Retaining empty/unused classes with CSS Loader

1.5k Views Asked by At

I am building a React application through Webpack 2, generating CSS through SASS-loader and CSS-loader. Here is my Webpack 2 configuration:

loaders: [
        {
            test: /\.(css|scss)$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            importLoader: 1,
                            camelCase: true,
                            localIdentName: '[local]',
                            minimize: {
                                safe: true,
                            },
                        }
                    },
                    {
                        loader: 'sass-loader'
                    }
                ],
            })
        },
        [...]
     ]

I am writing the resulting CSS to file, while allowing my React application to get the resulting class names in a Javascript object to assign to various HTML elements.

One quirk I've seen is that empty classes (class selectors containing no actual styles) are not being kept, and are discarded from the class list on generation. I have read that CSS-loader uses CSSNano, whose configuration by default removes unused/empty classes through minification.

As per CSS-Loader's documentation, you can set CSSNano options through the minimize option. That is why I have set safe as true, as per CSSNano's options documentation.

Unfortunately, empty/unused classes are still not being kept. I am wondering if I'm properly passing the CSSNano option through.

Any thoughts on why empty classes aren't persisting?

0

There are 0 best solutions below