CRA5 app fails to build due to Invalid mapping error in Css Minimizer plugin

Describe the bug

(Originally reported as https://github.com/tailwindlabs/tailwindcss/issues/7687, but closed and moved to a discussion by @adamwathan, so I assume he believes the problem does not lie there.)

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.

UPDATE: @thecrypticace has demonstrated that the issue is not dependent on Tailwind, but also occurs when using standard CSS.

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

build, minify, css

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

1. Download source, install dependencies
2. Build project
3. Build fails as described above
4. The project includes a file ./styles/custom.css with a single selector, .my-class. Edit line 2 and delete the applied rule bg-white
5. 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.

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.

(I did also try customizing the css minimizer config via craco to use different minification approaches, but they all fail in the same way, suggesting the problem may lie upstream of that step.)

See also

• https://github.com/tailwindlabs/tailwindcss/discussions/7688#discussioncomment-2266946
• https://github.com/thecrypticace/cra-css-minimize-bug
• https://stackoverflow.com/questions/71156694/run-build-command-in-react-is-giving-me-error-invalid-mapping)

[ai]

Thanks. I will look (but maybe on next week, protests against Russian-Ukranian war takes all my resources).

[stephent]

@johnrobertmcc see also https://github.com/tailwindlabs/tailwindcss/discussions/7688#discussioncomment-2258972