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

[stephent]

Describe the bug

(Originally reported as tailwindlabs/tailwindcss#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

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

[johnrobertmcc]

I am experiencing this same issue on build as of this afternoon, CRA5 and TW3. Unsure if I should open a new issue as this one seems pretty fresh.

Reproducible instructions:

• clone repo https://github.com/johnrobertmcc/jrcoin
• npm run build
• The following error shows in terminal on build:

Error: Invalid mapping: {"generated":{"line":3,"column":3836},"source":"static/css/main.7cb86d24.css","original":{"line":587,"column":null},"name":null}

[stephent]

@johnrobertmcc see also tailwindlabs/tailwindcss#7688 (comment)

[johnrobertmcc]

@stephent I was able to perform a build by npm run eject and commenting out the CSS minify inside webpack.config.js. Obviously this is not ideal.

Thank you for linking the other issue logged, I commented there as well. Unsure where the issue is originating from (CRA/TW), hopeful this helps pinpoint the problem

[stephent]

See also tailwindlabs/tailwindcss#7688 (comment)

[stephent]

@stephent I was able to perform a build by npm run eject and commenting out the CSS minify inside webpack.config.js. Obviously this is not ideal.

You could likely do this using craco (they have a CRA5 compatible alpha version available) without ejecting. However, in a large app, I imagine the lack of minification could be problematic?

[stephent]

It appears this is a regression in postcss 8.4.6. Downgrading to 8.4.5 allows my projects to build successfully.

[stephent]

@ai says

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

So, reopening here. (Even though it appears this is a regression in postcss.)

[ai]

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

[viktormuller]

I am still getting the same issue with both postcss@8.4.5 and postcss@8.4.12. Has anyone found any other solution besides upgrading or downgrading postcss?

System:
OS: Windows 10
Binaries:
Node: 17.2.0
Yarn: 1.22.11
npm: 8.1.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