HookWebpackError - cssnano-simple - layers with the same name build error

ktabors commented 1 month ago

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/A

Which 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 {}.

samcx commented 1 month ago

@ktabors Thank you for submitting an issue!

@layer b {
  ._5-enzrfpb:lang(ar) {
    font-family: myriad-arabic;
  }
}

@layer b; // This looks like a syntax error

If I remove it, next build works normally.

devongovett commented 1 month ago

It is valid CSS. @layer rules don't have to have blocks, they can just declare layer names. This is equivalent to @layer b {}. See https://drafts.csswg.org/css-cascade-5/#layer-empty, and here for how this behaves in the browser: https://codepen.io/devongovett/pen/YzoxjPM

I suspect cssnano may need to be updated in Next.js (or switch to lightningcss 😉).

devongovett commented 1 month ago

Actually I tested in the cssnano playground and it at least doesn't crash there, but still results in incorrect output. Filed a bug there: https://github.com/cssnano/cssnano/issues/1655

samcx commented 1 month ago

I suspect cssnano may need to be updated in Next.js (or switch to lightningcss 😉).

Oh interesting. Let me test it with lightningcss too just in case

devongovett commented 1 month ago

FYI, thanks to @snowystinger, this is fixed upstream in cssnano v7.0.5. https://github.com/cssnano/cssnano/pull/1656

samcx commented 1 month ago

@ktabors @devongovett

  experimental: {
    useLightningcss: true,
  }

Can confirm it does not throw on next build if you use the above. Will look to see now about updating cssnano...

ktabors commented 4 weeks ago

@samcx I tested the experimental useLightningcss in the reproduction github repo attached to issue. yarn build worked with that. The app where this bug occurred is using an older version that doesn't support useLightningcss. Updating cssnano is preferred.

SmallhillCZ commented 12 hours ago

Hi guys, I am having the exact same error as OP, however useLightningcss: true doesn't change anything. Is there anything else to be done?

vercel / next.js