1

Using React-bootstrap in our NextJS (10.0.0) app and need to remove unused CSS so using purgecss for that. But all the CSS are getting removed after doing like in this https://purgecss.com/guides/next.html. And found that issue is because of CSS Modules that we are using.

Here is my postcss.config.js

module.exports = {
"plugins": [
  "postcss-flexbugs-fixes",
  [
    "postcss-preset-env",
    {
      "autoprefixer": {
        "flexbox": "no-2009"
      },
      "stage": 3,
      "features": {
        "custom-properties": false
      }
    }
  ],
  [
    '@fullhuman/postcss-purgecss',
    {
      content: [
          './pages/**/*.{js,jsx,ts,tsx}',
          './components/**/*.{js,jsx,ts,tsx}'
      ],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
      safelist: ["html", "body"]
    }
  ],
]

}

Any ways to remove unused CSS?

Dr tech
  • 11
  • 4
  • Can you show what your PostCSS config looks like? – juliomalves Oct 15 '21 at 12:05
  • 2
    By using a UI wrapper like React-Bootstrap, you are not writing most of the class names in code. PurgeCSS will not find them in the files specified in your content array and will remove them. You need to safelist them. Refer the [docs](https://purgecss.com/safelisting.html). There is [a similar question](https://stackoverflow.com/a/63868908) like yours, but the answer there is literally useless. That content setting is same as not purging nearly the whole Bootstrap library. This one seems better though: https://stackoverflow.com/a/64565692 – brc-dd Oct 15 '21 at 13:37
  • 1
    @brc-dd but its hard to put all the react bootstrap component classes? and also where can we add the solution provided in https://stackoverflow.com/a/64565692 in my postcss.config.js ? – Dr tech Oct 15 '21 at 13:47
  • 1
    @Drtech Yeah I know, that will take time. The solution provided in that solution seems outdated. You can add the patterns similar to what given in that answer to the `safelist` key in your config: https://purgecss.com/safelisting.html#patterns. Even the list of the patterns will be significantly long. – brc-dd Oct 15 '21 at 13:57
  • 2
    @brc-dd Could you please provide an example of a "safelist"? I tried: safelist: ["html", "body", "row", "col", "row"] but it doesn't work. – Ricardo Romero Benítez Dec 08 '21 at 14:12

0 Answers0