CRA5 app using postcss v8.4.6 fails to build

Describe the bug

(Originally reported as https://github.com/tailwindlabs/tailwindcss/issues/7687, but closed and moved to a discussion as this is not in fact a Tailwind issue, see https://github.com/tailwindlabs/tailwindcss/discussions/7688#discussioncomment-2266946.)

In a vanilla CRA 5 app configured with Tailwind 3, the project fails to build if a CSS rule using Tailwind’s @apply directive together with a background color rule is included. Removing the background color from the custom selector avoids the problem.

Alternatively, the build succeeds without modifying the CSS after downgrading postcss to 8.4.5, suggesting a possible regression in postcss.

Environment

Environment Info:

current version of create-react-app: 5.0.0 running from /Users/stephen/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

System: OS: macOS 12.1 CPU: (10) x64 Apple M1 Pro Binaries: Node: 14.17.5 - /usr/local/bin/node Yarn: 1.22.11 - ~/.npm-global/bin/yarn npm: 8.5.2 - ~/.npm-global/bin/npm Browsers: Chrome: 98.0.4758.109 Edge: Not Found Firefox: 96.0.3 Safari: 15.2 npmPackages: react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 react-scripts: 5.0.0 => 5.0.0 npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

Sample project to reproduce issue: https://github.com/stephent/cra-5-tw-3-build-fails

1. Download main branch of sample project
2. Install dependencies npm i
3. Run npm run build

Expected behavior

Should build successfully

Actual behavior

Build fails with the following error:

Failed to compile.

static/css/main.4bacc579.css from Css Minimizer plugin
Error: Invalid mapping: {"generated":{"line":3,"column":8651},"source":"static/css/main.4bacc579.css","original":{"line":330,"column":null},"name":null}

Reproducible demo

https://github.com/stephent/cra-5-tw-3-build-fails

• Download source, install dependencies
• Build project
• Build fails as described above
• The project includes a file ./styles/custom.css with a single selector, .my-class. Edit line 2 and delete the applied rule bg-white
• The project builds successfully
• I tried a few different rules here and only managed to reproduce the build error when a background color rule was used.

An alternative fix for this problem is to downgrade postcss to version 8.4.5, which allows the project to build successfully. This suggests there’s a regression bug somewhere in 8.4.6.

I could not find any open bug reports against css-minimizer-webpack-plugin for ‘Invalid mapping’ errors, and given that CRA doesn’t expose webpack config by default, I wonder if there’s an issue with what gets passed in to the css minimizer.

See also

• https://github.com/tailwindlabs/tailwindcss/discussions/7688#discussioncomment-2266946
• https://github.com/facebook/create-react-app/issues/12101
• https://stackoverflow.com/questions/71156694/run-build-command-in-react-is-giving-me-error-invalid-mapping

[ai]

One moment! I will try to fix it today.

[thecrypticace]

PostCSS AST: https://astexplorer.net/#/gist/21ae495704b4f8f3e08a181c653fff9c/e23b8d72d6f700ea863b58eb9aa03f4ca7585d1e

Screenshot:

PostCSS Parser Test: https://github.com/postcss/postcss-parser-tests/blob/main/cases/custom-properties.css#L28 https://github.com/postcss/postcss-parser-tests/blob/main/cases/custom-properties.json#L476-L477

This only happens when there is whitespace after the end of a custom prop with no ending semicolon. If there is no whitespace (like in https://github.com/postcss/postcss-parser-tests/blob/main/cases/custom-properties.css#L26) then the column/offset is recorded correctly.