9

I am trying to purge unused styles from my app. But when purging it still removes used classes and the site looks broken.

I am using the following packages:

  "dependencies": {
    "@fullhuman/postcss-purgecss": "^4.0.3",
    "autoprefixer": "^10.3.4",
    "bootstrap": "^5.1.1",
    "next": "^11.1.0",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^6.7.0",
    "react": "17.0.2",
    "react-bootstrap": "^1.6.3",
    "react-dom": "17.0.2",
    "sass": "^1.40.1"
  }

In the ./styles folder I have a layout.scss where I import @import "../node_modules/bootstrap/scss/bootstrap"; as well. I am then importing import "../styles/layout.scss"; in _app.js

I have created a postcss.config.js with the following:

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}",
          "./node_modules/react-bootstrap/**/*.js",
        ],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ["html", "body"],
      },
    ],
  ],
};

I have included "./node_modules/react-bootstrap/**/*.js", as well as recommended on an earlier post. This does help a little bit but still removes used classes by react-bootstrap.

I tried adding css: ["./styles/**/*.scss, ./styles/**/*.css"] in postcss.config.js as well, which seems to do nothing either.

With all that it still looks broken:

enter image description here

While it should look like this:

enter image description here

isherwood
  • 58,414
  • 16
  • 114
  • 157
Mark
  • 731
  • 2
  • 10
  • 29
  • https://github.com/react-bootstrap/react-bootstrap/issues/6059 there's a comment here that says purgeCSS wont work with react-bootstrap and that we'll need to explicity set the classNames ourselves. – TigerCode Jan 03 '22 at 05:43
  • Also there's this forum https://giters.com/FullHuman/purgecss/issues/491 that goes more into it in detail with a possible solution – TigerCode Jan 03 '22 at 05:47
  • @TigerCode I do not have any progress because I kind of moved on to MUI (Material UI). Your latest link does promise a solution, which would not be the perfect one, but at least something. I might test it upcoming week. – Mark Jan 03 '22 at 23:04

1 Answers1

2

This configured prop inside '@fullhuman/postcss-purgecss' plugin saved my modals in boostrap from purge, so I guess you need to add to the safelist the css prefix used in the exact boostrap component you need to maintain unpurged

safelist: {
            standard: ['html', 'body', 'btn'],
            deep: [/^col/, /^navbar/, /^nav/, , /^modal/]
          },
Jose Maeso
  • 21
  • 3