Bug: CSS minification error in next.js@14.2.35 via CssMinimizerPlugin

[kelieCn]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/quirky-panna-2m23xd

To Reproduce

This issue only persists in production builds (next build) and does not appear in development mode.

1. Run pnpm build to bundle the application for production.
2. Inspect the generated .css file in the .next/static/css/ directory.
3. Search for classes like .x:max-xl:hidden or .x:max-lg:block

Current vs. Expected behavior

This project imports the nextra-theme-docs/style.css file in /app/layout.tsx. There are some styles in this style file (such as: .x:max-xl:hidden, .x:max-lg:block, etc.), but in the css file of the packaged file, the styles of these class names have changed.

Expected Behavior

Actual Behavior

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.12.0
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 14.2.35 // An outdated version detected (latest is 16.1.7), upgrade is highly recommended!
  eslint-config-next: 15.5.7
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.8.3
Next.js Config:
  output: export

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

CSS

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

next build (local)

Additional context

Currently, I have resolved this issue by manually overriding the built-in CssMinimizerPlugin in next.config.js and replacing it with a fresh instance of css-minimizer-webpack-plugin.

[icyJoseph]

Hi,

Two things, could you modify the repository so that it uses the problematic CSS directly, not through nextra, and does this reproduce on v16?

v14 is out of support (since October last year), so if it is only on v14 specifically, a patch/fix is unlikely to be backported happen at this point.