Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Compilation error for rule reusing important selector within a layer and using @apply #12110

Closed
mwnciau opened this issue Sep 29, 2023 · 1 comment · Fixed by #12112
Closed
Assignees

Comments

@mwnciau
Copy link
Contributor

mwnciau commented Sep 29, 2023

What version of Tailwind CSS are you using?

v3.3.3
Reproduced on current play.tailwindcss.com version

What build tool (or framework if it abstracts the build tool) are you using?

vite v4.4.9
postcss v8.4.29

What version of Node.js are you using?

v18.17.0

What browser are you using?

N/A

What operating system are you using?

Ubuntu

Reproduction URL

https://play.tailwindcss.com/xsicGQjVTh

Describe your issue

When using a selector in the important configuration option, adding a class using that same selector within a layer and using @apply causes a compilation error.

e.g.

// config
{
  important: '.a-class',
}

// css
@layer base {
  .a-class {
    @apply font-bold;
  }
}

The crash seems to happen in applyImportantSelector.js because sel.nodes is an empty array, and it is assumed sel.nodes[0] is defined.

Either not using @apply or moving out of the @layer block makes this work as expected.

@thecrypticace
Copy link
Contributor

This should be fixed by #12112, and will be available in the next release.

You can already try it by using the insiders build (usually takes around 15–20m to become available):

npm install tailwindcss@insiders

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants