AI & Agent Dev Bug Sandbox logo
AI & Agent Dev Bug Sandbox
Back to Radar

Next Build --Webpack Drops Semicolon After CSS @Layer Statement

In Next.js 16.3.0-canary.31 with webpack builds, CSS minification removes the required semicolon after a standalone @layer statement, producing invalid CSS that breaks cascade layer behavior in production.

highConfidence 82%Next.jsAffected V16.3.0-Canary.31

Origin Analysis

The semicolon after the @layer statement is stripped by cssnano's postcss-normalize-whitespace plugin during CSS minification in the webpack build. This plugin incorrectly treats the semicolon as redundant whitespace, failing to preserve the CSS syntax requirement that a standalone @layer statement must end with a semicolon before a following block at-rule.
1. Clone https://github.com/Poliklot/next-css-layer-statement-semicolon-repro 2. Run `npm install` 3. Run `npm run build` (using `next build --webpack`) 4. Inspect the emitted CSS; observe that `@layer reset, tokens, base, components, utilities` lacks a semicolon before the next `@layer reset{...}` block, resulting in invalid CSS.

Fixing Code Block

Edge Case Audit

Disabling normalizeWhitespace may slightly increase CSS file size due to retained whitespace and newlines. Future updates to Next.js or css-minimizer-webpack-plugin may change the constructor name or options structure, causing this override to silently fail and the bug to reappear. Rollback: remove the webpack override or set normalizeWhitespace back to true. This workaround only applies to webpack builds; if switching to Turbopack, this configuration is ignored, but Turbopack may not exhibit the issue. Also, if other PostCSS plugins rely on normalized whitespace, this change could lead to unexpected output.

Ecosystem Topology