CODEWITHSUNDEEP
javascriptreactjswebpackbabeljsbabel-plugin-react-css-modules
A. Fendt
A. Fendt

Reputation: 87

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

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?

Upvotes: 4

Views: 2812

Answers (2)

Khaled Khalifa
Khaled Khalifa

Reputation: 1

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

Upvotes: 0

A. Fendt
A. Fendt

Reputation: 87

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.

Upvotes: 2

Related Questions