CODEWITHSUNDEEP
next.jsreact-bootstrapbootstrap-5purge
Mark
Mark

Reputation: 783

Why is purgeCSS removing styles used by my React-Bootstrap app?

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

Upvotes: 9

Views: 2148

Answers (1)

Jose Maeso
Jose Maeso

Reputation: 21

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/]
          },

Upvotes: 2

Related Questions