Support for the new "css-style-sheet" option in css loader

[factoidforrest]

For those not familiar, there is a new way to load css into the DOM using JS only instead of inserting a <link rel=stylesheet...
It's called, confusingly, "CSSStyleSheets". This has a few advantages, namely that it can be reconfigured on the fly by JS, unloaded, etc. Pretty sweet.
You can just do

import myStyleSheet from './stylesheet.css'
// and then manipulate it, like this for instance
myStyleSheet.disabled = true 

This is now natively supported by the webpack css-loader extension
https://webpack.js.org/loaders/css-loader/#exporttype

How does one get this working in create-react-app? Is it even possible? I'm actually using craco, so I feel there is probably a way to configure it.

If this is going to get implemented as a feature, I think the "my-style.module.css" naming convention for forcing module compilation in CRA is pretty sweet. Maybe we could do something like my-style.css-style-sheet.(s)css as a convention. They really should have gone with a more distinct name, but here we are.

[factoidforrest]

Ok, that took me a minute, but I got it working in Craco. Here is the rule and how you would add it using craco.

Note we have to set up a whole new rule because the other instances of the css-loader are wrapped in style-loader and that won't work. Instead we just add this new rule at the top. Note that my rule here is just for sass but if you want it for bare css, just change the test and take out the sass-loader at the bottom.

Note that I left in the postcss-loader from the other rules I spotted in there because I'm not sure if its needed, just following how the rest of CRA seems to have things set up out of caution.

        configure: (webpackConfig, {env, paths}) => {

            webpackConfig.module.rules[1].oneOf.unshift(
                {
                    test: /\.css-style-sheet\.(scss|sass)$/,
                    use: [{
                        loader: require.resolve("css-loader"),
                        options: {
                            exportType: 'css-style-sheet'
                            // postcssOptions: {
                            //   plugins: [require("autoprefixer")],
                            // },
                        },
                    }, {
                        loader: require.resolve('postcss-loader'),
                        options: {
                            postcssOptions: {
                                ident: 'postcss',
                                config: false,
                                plugins: [
                                    'postcss-flexbugs-fixes',
                                    [
                                        'postcss-preset-env',
                                        {autoprefixer: {flexbox: 'no-2009'}, stage: 3}
                                    ],
                                    'postcss-normalize'
                                ]
                            },
                            sourceMap: true
                        }
                    }, 'sass-loader']
                });
            return webpackConfig;
                    },

Change you scss file names to match our new naming convention from the test
And then in your JS you can do something like

import darkStyles from '../scss/main/dark.css-style-sheet.scss';
import lightStyles from '../scss/main/light.css-style-sheet.scss';

document.adoptedStyleSheets = [darkStyles]

Works fine.

I'd be 100% happy to PR this into create-react-app. I don't think it would break anything unless someone has a naming collision with that convention, which is highly unlikely. First please let me know if a PR would be accepted.