React-bootstrap component css missing

[gaweki]

Before you open an issue, please check if a similar issue already exists or has been closed before.

When reporting a bug, please try to include the following:

• [v ] A descriptive title
• [ v] An isolated way to reproduce the behavior (example: GitHub repository with code isolated to the issue that anyone can clone to observe the problem)
  expect use component like Col, but css not appear in dev tools
  
• [ v] What package and version you're using, and the platform(s) you're running it on
  "^3.0.0"
• The behavior you expect to see, and the actual behavior
  i want the css not missing
  

[x80486]

Same happens for me. I'm using this recommended way with Next.js and react-bootstrap version 1.4.0...almost all styles are purged.

[matthiasprieth]

Same issue for me. I'm using the next-purgecss component and people seem to have the same problem: lucleray/next-purgecss#48

[ghost]

is there a solution to this already? I am running into the same problem where css used by react-bootstrap are being deleted my setup for postcss.config.js is as follow:

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"],
      },
    ],
  ],
};

[AlvinLaiPro]

We have the same problem. I think the main reason is this plugin removes unused CSS by existing words. But React-Bootstrap generates class names dynamically.

[jamesschwindt]

After troubleshooting this issue for a while, I found a solution. In our case, it seemed purgecss + react-bootstrap was working except for the column and navbar classes. To fix this, I added the regex expression for classes that start with "col", "navbar", and "nav". Here is our postcss.config.css:

`module.exports = {
plugins: [

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

}; `

Also, I found that purgecss sometimes wouldn't run after changing postcss.config.js in my dev environment. To ensure the changes are being read, you can restart your server and comment out then comment back in a CSS/SCSS import such as @import "../node_modules/bootstrap/scss/bootstrap" in your globals.scss file. I think the change in CSS files being read triggers purgecss to run again. I'm not positive if that is the correct approach but I figured I'd mention it just in case.

Here's our before and after.
Before:

After:

P.S. The "Start Writing" button should actually be white but I'm sure that's just another small change in the postcss.config.js file.

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days.