Remove unused CSS classes from frameworks like bootstrap in a react project

Question

We are currently developing a react project using webpack and babel and would like to have automatically removed unused CSS classes in the CSS frameworks Bootstrap and AdminLTE 2 which we use.

In the project we use webpack (v4.41.0), babel (v7.6.2) and react (16.10.1). To use CSS classes we are using the babel plugin babel-plugin-react-css-modules which uses css modules.

What is a modern and contemporary way to do this?

Answer 1

As djfdev already wrote purgecss works quite well: purgcss simply searches all JavaScript files for occurrences of the CSS class strings of the used CSS files and removes those which cannot be found.

Answer 2

You should add these two configs:

defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
safelist: {
  standard: ["html", "body"],
},

to your postcss config. I am using [craco][1] and this is how the config file looks like:

const purgecss = require("@fullhuman/postcss-purgecss");

module.exports = {
  style: {
    postcss: {
      plugins: [
        purgecss({
          content: ["./src/**/*.html", "./src/**/*.js"],
          css: ["./src/**/*.css"],
          defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
          safelist: {
            standard: ["html", "body"],
          },
        }),
      ],
    },
  },
};

If you are using postcss config it should look the same. [1]: https://purgecss.com/guides/react.html#use-craco