Description
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/