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?

@djfdev I have already looked at purgecss and purifycss and am not so sure if they work properly in combination with babel-plugin-react-css-modules. Also, purifycss had the last commit on March 18, 2018. — A. Fendt
– A. Fendt, Commented Oct 2, 2019 at 18:58

A. Fendt · Accepted Answer · 2019-10-09 19:50:36Z

2

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.

answered Oct 9, 2019 at 19:50

A. Fendt

871 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ali Bdeir Over a year ago

The link seems to be down

A. Fendt Over a year ago

This regex is now inside this File: https://github.com/FullHuman/purgecss/blob/master/packages/purgecss/src/options.ts#L6

Khaled Khalifa · Accepted Answer · 2022-03-26 15:44:52Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related