Safelisting - Does It Work?

[peter-hvass]

I've been messing around with purgecss for a couple hours here or there and I simply can't get it to safelist certain selectors.

Have tried regex in each of the different sub-categories (greedy, etc.) and have also tried in-line in the css itself. I've also tried just sticking super obvious div elements in my content carrying the classnames I want to preserve. Nada. Purgecss merrily excludes it all.

Does this feature actually work for any of you out there? Am I just doing something incredibly stupid?

In my below example btn-with-price gets safelisted correctly... navbar-phone never does.

Config;

module.exports = {
  content: ['./**/*.tml', './**/*.js', '../jin/**/*.tml', '../jin/**/*.js' ],
  css: ['./**/*.css'],
  safelist: {
	standard: ['btn-with-price'],
	deep: [/^navbar/],
    greedy: [/^navbar/]
  },
  output: './purgecss/'
}

Obvious divs;

<div class="btn-with-price"></div>
<div class="navbar-phone navbar-brand font-weight-bold text-primary d-none d-sm-block"></div>

The raw css that never makes the cut;

.navbar-phone {
  letter-spacing: -1px;
}

@media (max-width: 1024.98px) {
  .navbar-phone {
    font-size: 17px;
    line-height: 31px;
  }
}

.navbar-phone a:hover {
  text-decoration: none;
}

[ShawnCentra]

Im having the exact same problem with mine.

In my case it was react-boostrap that I wasn't able to exclude from purging (forcing me to use just regular bootstrap) and another library called react-multi-carousel.

I tried greedy safelisting with regex on anything that starts with react as react-multi-carousel used that for its styling naming.

https://stackoverflow.com/questions/70807887/next-js-purgecss-library-for-carousels-react-multi-carousel

postcss.config.js
  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}",
          "./pages/**/*.{js,jsx,ts,tsx}",
          "./components/*.{js,jsx,ts,tsx}",
          "./components/**/*.{js,jsx,ts,tsx}",
          "./node_modules/react-multi-carousel/**/*.{js,jsx,ts,tsx}",
        ],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: {
          standard: ["html", "body"],
          deep: [],
          greedy: [/^react.*/, /^navbar.*/],
        },
      },
    ],
  ],
};

[ShawnCentra]

  safelist: [/^react.*/, /^navbar.*/, /^collapsed.*/], 
  
  Tried this, seems to work now. I think the complex object isnt working as intented?

[ShawnCentra]

Dynamic CSS that gets applied through JS wasn't being safelisted properly either.

I assume thats just how purgecss works - doesnt handle dynamic applied css

What I did was put the classes for the dynamic css in the safelist array but also include them and the css they apply in my public/styles/globals.css

[Ffloriel]

I tried your configuration in this repository: https://github.com/Ffloriel/purgecss-reproduction/tree/715
It does work without any issues, navbar-phone gets safelisted as expected.
You can fork this repository to try it yourself, and if you find some issues, let us know