CRA5 app using postcss v8.4.6 fails to build

[stephent]

Describe the bug

(Originally reported as tailwindlabs/tailwindcss#7687, but closed and moved to a discussion as this is not in fact a Tailwind issue, see tailwindlabs/tailwindcss#7688 (comment).)

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

• CRA5 + TW3 app fails to build due to Invalid mapping error in Css Minimizer plugin tailwindlabs/tailwindcss#7688 (comment)
• CRA5 app fails to build due to Invalid mapping error in Css Minimizer plugin facebook/create-react-app#12101
• https://stackoverflow.com/questions/71156694/run-build-command-in-react-is-giving-me-error-invalid-mapping

[ai]

You need to open issue in CRA. I can’t accept CRA issues since CRA team are very slow in applying fixes.

[ai]

I recommend avoiding CRA for production services because this project is almost abounded.

[stephent]

Please read the issue more closely instead of just closing it - this appears to be a regression in postcss 8.4.6.

[ai]

Please recreate an issue with non-CRA stack to reproduction with simpler case (and with PostCSS 8.4.7).

CRA is so unstable that it could start throwing and issue even if we fixed something in PostCSS.

[stephent]

I'm all out of hours to devote to tracking this one down. There are multiple reproductions of this issue linked in the issue above. And it makes no difference whether it's 8.4.6 or 8.4.7 - when you're tracking down a regression, best to report it against the version in which it first manifests. The problem is still present in 8.4.7.

[stephent]

@ai FWIW, the analysis here by @thecrypticace makes me wonder if this is not something related to the semicolon parsing changes mentioned in the 8.4.6 release notes.

[ai]

makes me wonder if this is not something related to the semicolon parsing changes mentioned in the 8.4.6 release notes.

Could be. I can help if you will create an example without CRA (CRA is huge and broken AST can be a result from some PostCSS plugin like CSS properties sorter in CSS minifier).

For instance, simple input CSS, just PostCSS parser and position in AST tree which is unexpected.

[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.

[ai]

One moment! I will try to fix it today.

[ai]

Fixed be364fd

[ai]

The fix was released in 8.4.8.