CSS pseudo-class `:is` is not compiled correctly in dev mode on 14.2 using turbopack

[mvgrimes]

Link to the code that reproduces this issue

https://github.com/mvgrimes/turbo-14.2-css-issue

To Reproduce

1. pnpm i ; pnpm run dev
2. open site in browser (localhost:3000)
3. the checkbox should have 3rem of margin per the gloabal.css:

.cb:is(input:checked) {
  margin: 3rem;
}

Current vs. Expected behavior

When running next dev --turbo in version 14.2.0-canary.14 or later, CSS using the :is pseudo-class is compiled incorrectly.

The following CSS in the src/app/global.css file:

.cb:is(input:checked) {
  margin: 3rem;
}

Generates .next/static/chunks/src_app_globals_b52d8e.css:

/* [project]/src/app/globals.css [app-client] (css) */
.cbinput:checked {
  margin: 3rem;
}

/*# sourceMappingURL=src_app_globals_b52d8e.css.map*/

Under version 14.2.0-canary-13, it generates .next/static/chunks/src_app_globals_b52d8e.css:

/* [project]/src/app/globals.css [app-client] (css) */
.cb:is(input:checked) {
  margin: 3rem;
}
/*# sourceMappingURL=src_app_globals_b52d8e.css.map*/

It looks like it might be trying to simplify the .cb:is(...) . Possibly trying to produce input.cb:checked.

The CSS compiles correctly without the --turbo flag or in production (ie next build).

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:14:38 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6020
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 22.2.0
  npm: 10.7.0
  Yarn: 1.22.22
  pnpm: 9.1.2
Relevant Packages:
  next: 14.2.0-canary.14 // There is a newer canary version (14.3.0-canary.80) available, please upgrade! 
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Developer Experience, Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

The issue was first observed in 14.2.0-canary.14. The issue also appears in 14.2.0, 14.2.1, 14.2.3, 14.3.0-canary.80, and 15.0.0-rc.0.

The issue is not observed in 14.2.0-canary.13. It is observed when running any version without the --turbo flag. It is also not observed when creating a production build.

[Sabin-Subedi]

Seems like the current behavior is due to the lightningcss library which is used by nextjs for parsing css while turbo is enabled. I have found the relevant issue on the lightingcss repo: https://github.com/parcel-bundler/lightningcss/issues/661 Hope this helps

[timneutkens]

Indeed this is a bug in lightningcss 👍

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.