[V4-BETA] Error: Selector is not pure in LightningCSS (Selector: video, Specificity: 0x1)

[Fedox-die-Ente]

What version of Tailwind CSS are you using?

For example: v4.0.0-beta.9

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

For example: NextJS v15, @tailwindcss/postcss 4.0.0-beta.9

What version of Node.js are you using?

For example: v20.15.0

What browser are you using?

For example: ARC

What operating system are you using?

For example: Windows 11

Reproduction URL

/~https://github.com/Fedox-die-Ente/temp-tailwind-bug/tree/main

Describe your issue

I have tried to use Tailwind Styles in an under CSS file with NextJS. The CSS file is imported in the TSX file (/~https://github.com/Fedox-die-Ente/temp-tailwind-bug/blob/main/app/page.tsx) and this error appears permanently in the console:

./app/page.module.css
Parsing of the css source code failed
Selector is not pure (pure selectors must contain at least one local class or ID), (lightningcss, Selector(video, specificity = 0x1))

[philipp-spiess]

Thanks for the report! I was able to boil it down to a CSS modules file that only needs to contain something like:

@reference "tailwindcss"
.title { @apply font-bold; }

Seems like Next.js is not happy with us including a CSS property definition as the error is from here: https://sourcegraph.com/github.com/vercel/next.js/-/blob/turbopack/crates/turbopack-css/src/process.rs?L534-535 🤔

[Fedox-die-Ente]

Thanks for the report! I was able to boil it down to a CSS modules file that only needs to contain something like:

@reference "tailwindcss"
.title { @apply font-bold; }

Seems like Next.js is not happy with us including a CSS property definition as the error is from here: https://sourcegraph.com/github.com/vercel/next.js/-/blob/turbopack/crates/turbopack-css/src/process.rs?L534-535 🤔

I tried to add the line to my code, but the error still comes up.
Seems like NextJS is doing something weird..

@reference "tailwindcss";
.container {
    @apply flex flex-col items-center justify-center h-screen w-screen;
}

.title {
    @apply font-bold text-3xl text-red-500;
}

.description {
    @apply text-black text-center text-lg dark:text-white;
}

.buttonContainer {
    @apply flex flex-row gap-1;
}

I found out it works as soon as I remove the font-bold from my title element, which is of course even more interesting.
And it doesn't know my own tailwindcss '@theme' classes.

[philipp-spiess]

@Fedox-die-Ente Oh yes sorry for the confusion but the line I posted was the minimal reproduction case. The issue is that the font-bold rule creates additional selectors outside of the .title one that are considered "not-allowed" by Next.js:

.font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
@supports (-moz-orient: inline) {
  @layer base {
    *, ::before, ::after, ::backdrop {
      --tw-font-weight: initial;
    }
  }
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}

The other rules that are created though are necessary to set up the CSS variable (and the work around Firefox-specific issues), so ideally Next.js would not error on this. I plan to create a Next.js bug report to have their team look into potentially allowing this pattern, feel free to beat me too it though (otherwise I am planning to get to it tomorrow).

[Fedox-die-Ente]

@Fedox-die-Ente Oh yes sorry for the confusion but the line I posted was the minimal reproduction case. The issue is that the font-bold rule creates additional selectors outside of the .title one that are considered "not-allowed" by Next.js:

.font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
@supports (-moz-orient: inline) {
  @layer base {
    *, ::before, ::after, ::backdrop {
      --tw-font-weight: initial;
    }
  }
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}

The other rules that are created though are necessary to set up the CSS variable (and the work around Firefox-specific issues), so ideally Next.js would not error on this. I plan to create a Next.js bug report to have their team look into potentially allowing this pattern, feel free to beat me too it though (otherwise I am planning to get to it tomorrow).

I see, it is interesting that NextJS blocks this, unfortunately I have already shut down my PC because I wanted to sleep a little earlier today, so I'll leave the work of creating a bug report to you, I think you could explain it better than I can. 😅

[philipp-spiess]

Been doing some more digging and the rules that cause issues (the *, ::before, ::after, ::backdrop selector in this case), might actually no longer be needed anyways. If we remove that, we only emit the @property rule which I tested to be working with next in CSS module files. So #15622 should also fix the issue 👍

[Fedox-die-Ente]

Been doing some more digging and the rules that cause issues (the *, ::before, ::after, ::backdrop selector in this case), might actually no longer be needed anyways. If we remove that, we only emit the @property rule which I tested to be working with next in CSS module files. So #15622 should also fix the issue 👍

Good work, let's wait for the merge. :)