Build fails when CSS contains escaped space
Open
Nobody has claimed this yet.
CSS
Webpack
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
https://codesandbox.io/p/sandbox/github/vercel/next.js/tree/canary/examples/reproduction-template
To Reproduce
- Add a style rule containing an escaped space character to the CSS, e.g.:
[data-attr=\ ] { color: red; } pnpm build
Current vs. Expected behavior
Expect build to pass but instead throws with:
HookWebpackError: Cannot read properties of undefined (reading '0')
at makeWebpackError (/project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/webpack/bundle5.js:29:315788)
at /project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/webpack/bundle5.js:29:106487
at eval (eval at create (/project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/webpack/bundle5.js:14:9224), <anonymous>:44:1)
-- inner error --
TypeError: Cannot read properties of undefined (reading '0')
at /project/workspace/static/css/b0041ae41d46d821.css:1:1
at Parser.attribute (/project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/cssnano-simple/index.js:320:84899)
at Parser.parse (/project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/cssnano-simple/index.js:320:99055)
at Parser.loop (/project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/cssnano-simple/index.js:320:98727)
at new Parser (/project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/cssnano-simple/index.js:320:84494)
at Processor._root (/project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/cssnano-simple/index.js:320:101743)
at Processor._runSync (/project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/cssnano-simple/index.js:320:102250)
at Processor.processSync (/project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/cssnano-simple/index.js:320:103005)
at generateUniqueSelector (/project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/cssnano-simple/index.js:320:142312)
at /project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/cssnano-simple/index.js:320:142631
at /project/workspace/node_modules/.pnpm/postcss@8.4.31/node_modules/postcss/lib/container.js:369:18
caused by plugins in Compilation.hooks.processAssets
TypeError: Cannot read properties of undefined (reading '0')
at /project/workspace/static/css/b0041ae41d46d821.css:1:1
at Parser.attribute (/project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/cssnano-simple/index.js:320:84899)
at Parser.parse (/project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/cssnano-simple/index.js:320:99055)
at Parser.loop (/project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/cssnano-simple/index.js:320:98727)
at new Parser (/project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/cssnano-simple/index.js:320:84494)
at Processor._root (/project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/cssnano-simple/index.js:320:101743)
at Processor._runSync (/project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/cssnano-simple/index.js:320:102250)
at Processor.processSync (/project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/cssnano-simple/index.js:320:103005)
at generateUniqueSelector (/project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/cssnano-simple/index.js:320:142312)
at /project/workspace/node_modules/.pnpm/next@15.2.0-canary.66_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/compiled/cssnano-simple/index.js:320:142631
at /project/workspace/node_modules/.pnpm/postcss@8.4.31/node_modules/postcss/lib/container.js:369:18
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): 4242
Available CPU cores: 2
Binaries:
Node: 20.9.0
npm: 9.8.1
Yarn: 1.22.19
pnpm: 8.10.2
Relevant Packages:
next: 15.2.0-canary.66 // Latest available version is detected (15.2.0-canary.66).
eslint-config-next: N/A
react: 19.0.0
react-dom: 19.0.0
typescript: 5.3.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Webpack
Which stage(s) are affected? (Select all that apply)
next build (local)
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproduction template and run pnpm build using the CSS selector containing an escaped space. Read the stack trace around cssnano-simple's Parser.attribute and generateUniqueSelector. Done means next build completes successfully while preserving support for the escaped-space selector.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript, next.js
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100