Skip to content

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

@mwnciau

Description

@mwnciau

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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions