Usage with extract-text-webpack-plugin

[jhnns]

Hi there 👋. Great module, I love it!

I just wanted to let you know that I've hacked myself a small setup where I'm able to extract the CXS styles into separated CSS files for production builds with webpack. The benefit of this approach is that webpack will generate a CSS file for each chunk with just the styles that are required.

The setup consists of a custom loader (not published yet) and the extract-text-webpack-plugin.

The loader source:

// exportCssLoader.js
const exportCss = `module.exports = ((cxs, oldExports) => {
    const newExports = [[module.id, cxs.getCss()]];

    Object.assign(newExports, oldExports);

    newExports.locals = oldExports;
    cxs.reset();

    return newExports;
})(require("cxs"), module.exports);`;

module.exports = function (source, sourceMaps) {
    this.callback(null, source + ";" + exportCss, sourceMaps);
};

The webpack config:

// webpack.config.js
            ...
            // loader config
            {
                test: /\.css\.js$/,
                use: ExtractTextPlugin.extract([
                    // the babel-loader is only required if you use
                    // ES features that node isn't able to understand
                    {
                        loader: "babel-loader",
                        options: {
                            cacheDirectory: true,
                            sourceMaps: false,
                        },
                    },
                    {
                        loader: require.resolve(
                            "../tools/webpack/exportCssLoader"
                        ),
                    },
                ]),
            },

        ...
        // plugin config
        new ExtractTextPlugin({
            filename: "[name].[contenthash].css",
            disable: isDev,
        }),

There are maybe some edge cases I haven't thought about yet, but that's the gist. What do you think? Should the loader be published separately or together with this repository?