HookWebpackError - cssnano-simple - layers with the same name build error #68476
Description
Link to the code that reproduces this issue
https://github.com/ktabors/nextjs-layer-bug
To Reproduce
git clone git@github.com:ktabors/nextjs-layer-bug.git
cd nextjs-layer-bug
yarn install
yarn build
The project was stripped to nextjs and react. The index.js imports the styles from a css file with the above CSS.
Current vs. Expected behavior
Current:
When building a project the following CSS layers cause cssnano to throw an error.
CSS:
@layer b {
._5-enzrfpb:lang(ar) {
font-family: myriad-arabic;
}
}
@layer b;
The error:
HookWebpackError: Cannot read properties of undefined (reading 'length')
at makeWebpackError (/Users/ktaborski/dev/next-colorpicker/node_modules/next/dist/compiled/webpack/bundle5.js:28:312635)
at /Users/ktaborski/dev/next-colorpicker/node_modules/next/dist/compiled/webpack/bundle5.js:28:106060
at eval (eval at create (/Users/ktaborski/dev/next-colorpicker/node_modules/next/dist/compiled/webpack/bundle5.js:13:28858), <anonymous>:34:1)
-- inner error --
TypeError: Cannot read properties of undefined (reading 'length')
at equals (/Users/ktaborski/dev/next-colorpicker/node_modules/next/dist/compiled/cssnano-simple/index.js:190:9716)
at dedupeNode (/Users/ktaborski/dev/next-colorpicker/node_modules/next/dist/compiled/cssnano-simple/index.js:190:10143)
at dedupe (/Users/ktaborski/dev/next-colorpicker/node_modules/next/dist/compiled/cssnano-simple/index.js:190:10378)
at OnceExit (/Users/ktaborski/dev/next-colorpicker/node_modules/next/dist/compiled/cssnano-simple/index.js:190:10483)
at LazyResult.runAsync (/Users/ktaborski/dev/next-colorpicker/node_modules/postcss/lib/lazy-result.js:298:21)
at async /Users/ktaborski/dev/next-colorpicker/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:79:44
at async Span.traceAsyncFn (/Users/ktaborski/dev/next-colorpicker/node_modules/next/dist/trace/trace.js:154:20)
at async Promise.all (index 0)
at async /Users/ktaborski/dev/next-colorpicker/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:67:21
at async Span.traceAsyncFn (/Users/ktaborski/dev/next-colorpicker/node_modules/next/dist/trace/trace.js:154:20)
caused by plugins in Compilation.hooks.processAssets
TypeError: Cannot read properties of undefined (reading 'length')
at equals (/Users/ktaborski/dev/next-colorpicker/node_modules/next/dist/compiled/cssnano-simple/index.js:190:9716)
at dedupeNode (/Users/ktaborski/dev/next-colorpicker/node_modules/next/dist/compiled/cssnano-simple/index.js:190:10143)
at dedupe (/Users/ktaborski/dev/next-colorpicker/node_modules/next/dist/compiled/cssnano-simple/index.js:190:10378)
at OnceExit (/Users/ktaborski/dev/next-colorpicker/node_modules/next/dist/compiled/cssnano-simple/index.js:190:10483)
at LazyResult.runAsync (/Users/ktaborski/dev/next-colorpicker/node_modules/postcss/lib/lazy-result.js:298:21)
at async /Users/ktaborski/dev/next-colorpicker/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:79:44
at async Span.traceAsyncFn (/Users/ktaborski/dev/next-colorpicker/node_modules/next/dist/trace/trace.js:154:20)
at async Promise.all (index 0)
at async /Users/ktaborski/dev/next-colorpicker/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:67:21
at async Span.traceAsyncFn (/Users/ktaborski/dev/next-colorpicker/node_modules/next/dist/trace/trace.js:154:20)
Expected:
The minifier should not crash during the build step.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.5.0: Wed May 1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
Available memory (MB): 32768
Available CPU cores: 10
Binaries:
Node: 18.17.1
npm: 9.6.7
Yarn: 1.22.22
pnpm: 9.3.0
Relevant Packages:
next: 14.2.5 // Latest available version is detected (14.2.5).
eslint-config-next: N/A
react: 18.2.0
react-dom: 18.2.0
typescript: N/A
Next.js Config:
output: N/AWhich area(s) are affected? (Select all that apply)
Output (export/standalone)
Which stage(s) are affected? (Select all that apply)
next build (local)
Additional context
In the project that revealed the error we using a library component. That library component has a CSS file with layers and uses another component with its own CSS file with layers and the layers in the two CSS files have the same names. This creates the order of a layer block at-rule with CSS rules then a layer statement at-rule. Both CSS layers are valid and order shouldn't matter. The second layer should be ignored or treated as @layer b {}.