Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nested SCSS selectors breaking `@apply` directive

See original GitHub issue

What version of Tailwind CSS are you using?

v3.2.1

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

Laravel Mix v6.0.49

What version of Node.js are you using?

v16.18.0

What browser are you using?

N/A

What operating system are you using?

macOS Ventura

Reproduction URL

https://github.com/shengslogar/tailwind-scss-nesting-bug-report/blob/main/output.css#L469-L493

Describe your issue

Complex nested SCSS selectors seem to be breaking the @apply directive.

Input:

.foo {
  &:not(.bar) {
    @apply bg-red-100;
    background: red;

    &.baz > .bam {
      @apply bg-orange-100;
      background: orange;
    }
  }
}

Output:

.foo:not(.bar) {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
  background: red;
}

.foo.baz.bam:not(.bar) >  {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
}

.foo:not(.bar).baz > .bam {
  background: orange;
}

Expected Output:

.foo:not(.bar) {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
  background: red;
}

.foo:not(.bar).baz > .bam {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
  background: orange;
}

Thanks in advance! 🙏

Issue Analytics

State:
Created a year ago
Comments:10 (6 by maintainers)

Top GitHub Comments

1reaction

adamwathancommented, Nov 4, 2022

Just tagged a real release for you too 👍

1reaction

adamwathancommented, Nov 4, 2022

We’ll tag a proper release probably on Monday! In the mean time can just npm install tailwindcss@insiders to use the insiders build.

Top Results From Across the Web

CSS Nesting Module - W3C

This module describes support for nesting a style rule within another style rule, allowing the inner rule's selector to reference the elements ...

CSS selectors - CSS: Cascading Style Sheets - MDN Web Docs

CSS selectors define the pattern to select elements to which a set of CSS rules are then applied.

Help pick a syntax for CSS nesting - Hacker News

Requiring directly-nested style rules to use nest-prefixed selectors works around this problem—an & can never be part of a declaration, so the parser...

Sass: @-Rules and Directives - CSS - Vanseo Design

The @at-root directive tells the compiler to move nested code to the root of the stylesheet. It allows you to nest rules inside...

Functions & Directives - Tailwind CSS

Use the @tailwind directive to insert Tailwind's base , components , utilities and variants styles into your CSS. /** * This injects Tailwind's...