pure css class reported as impure by compiler in nextjs 15

[relativityboy]

Pure css class is incorrectly categorized as impure in a css module

.SomeClass {
  a:hover { ... }
}

The above a tag styling is scoped to within .Someclass. It is pure but is detected as not. This bug appeared after updating nextjs from 14 -> 15

Link to the code that reproduces this issue

https://github.com/relativityboy/bug-nextjs-false-impure-detection

To Reproduce

1. Start the app
2. load homepage.
3. see

4. Notice that the compiled css should be `.Container > a:hover { ...` which _is_ pure. 5. Question your life-choices.

Current vs. Expected behavior

Expected behavior is that the application will build and render the home-page successfully, with the .Container > a... style turning the link text red on hover.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.2.0: Fri Dec  6 19:02:12 PST 2024; root:xnu-11215.61.5~2/RELEASE_ARM64_T6031
  Available memory (MB): 65536
  Available CPU cores: 16
Binaries:
  Node: 20.17.0
  npm: 10.8.2
  Yarn: N/A
  pnpm: 9.11.0
Relevant Packages:
  next: 15.1.1-canary.6 // Latest available version is detected (15.1.1-canary.6).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

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

Not sure

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

next build (local)

Additional context

Ran against 15.1.0 stable and 15.1.1-canary.6

[relativityboy]

Update: after a little more investigation, nextjs 15+ doesn't use sass by default. So the nested styles aren't being compiled into css.

Solution

1. install sass npm i sass
2. change filename from <x>.module.css to <x>.module.scss