MINIFY_CSS option

[bdefore]

Is your proposal related to a problem?

• Bundle size is larger than it needs to be because there is no option to minify/obfuscate CSS even though CRA already has tools to support it
• Bots/scrapers can be a nuisance and can be partially mitigated by unique class names per build so that selector-based traversal is less reliable

Describe the solution you'd like

A MINIFY_CSS flag that enables style minification. A cousin to the GENERATE_SOURCEMAP option. Only operates for production builds.

If enabled, appropriate options could be passed to css-loader here (and postcss-loader):
https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpack.config.js#L131

Or to css-minimizer-webpack-plugin here:
https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpack.config.js#L300

The webpack.config.js has a shouldUseSourceMap that derives from GENERATE_SOURCEMAP.

An implementation suggestion from an earlier request is here: #8984 (comment)

An example of someone ejecting to achieve this: https://medium.com/swlh/minifying-tailwind-css-with-create-react-app-b8615a82b33b

This would not be a sensible default to leave enabled. This would break sites that rely on predictable selectors to function properly. Leaving the flag off on builds destined for integration testing would make them easier to author. A flag would seem most suitable.

Describe alternatives you've considered

Did not find a relevant flag in existing set: https://create-react-app.dev/docs/advanced-configuration

Aside from ejecting, running cssnano on resulting build output. Haven't tried since it would introduce fragility.

Additional context

Earlier requests for this feature marked stale here:
#8984
#6349

Larger scope: It may be worth considering a flag to remove unused styles via something like https://purgecss.com/

[zamarawka]

In 2020 I already submitted PR for this feature #9223 , but i lost hope to get it merged 😄