Build failure: SCSS variables leak through to LightningCSS

This issue was created by an agent analysing CI failures from the Next.js Deploy Suite (vinext main vs Next.js v16.2.6, 2026-05-20).

Problem

SCSS variables ($var: red;) leak through into CSS module output without being processed by the Sass compiler first. LightningCSS receives raw SCSS syntax and treats $var: red; as an invalid selector.

[plugin vite:css-post]
SyntaxError: [lightningcss minify] Invalid empty selector
1  |  $var: red;._className_10j3d_2 {
   |  ^

This suggests the CSS pipeline is feeding unprocessed SCSS content directly to the CSS minifier.

Estimated Impact

~4 build failures across the deploy suite.

Affected Test Suites

• test/e2e/app-dir/scss/composes-external/composes-external.test.ts
• test/e2e/app-dir/scss/nm-module-nested/nm-module-nested.test.ts

Recommendation

1. Reproduce first in vinext's own test suite. Add a test with an SCSS file that uses variables and CSS modules composition. Confirm the build fails.

2. Investigate the CSS processing pipeline. The Sass compiler should process .scss files before LightningCSS minification. Check if vinext's Vite config properly registers the Sass preprocessor for all SCSS files, including those imported via CSS modules composes from external files.

3. Check CSS module composes handling. The composes: ... from './external.scss' pattern may bypass the Sass preprocessor.