vercel / vercel/next.js

Build fails when CSS contains escaped space

Open
#76,269 1 comment 0 reactions 0 assignees View on GitHub

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
  1. Add a style rule containing an escaped space character to the CSS, e.g.:
    [data-attr=\ ] {
      color: red;
    }
    
  2. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.