lucleray/next-purgecss

used CSS classes are purged

SukPavel opened this issue · 5 comments

SukPavel commented

I'm using next-purgecss with @zeit/next-scss and the result css is purget "too much".

My sccs structure is:

@import "variables";
@import "../../node_modules/bootstrap/scss/bootstrap";
@import "base";
...

I think that the result does not contain all of bootstrap classes defined by functions that generates classes like "justify-content-lg-end" atc. So after purging all bootstrap classes not working.

WoraponU commented

I found same issue.

jsking216 commented

trying to find a solution to this myself. i'll let you know if i get anything working.

ahsanahmed321 commented

same issue with me

matthiasprieth commented

I'm having the same problem. People seem to have that problem even in the base component: FullHuman/purgecss#491

ShawnCentra commented

Next.js - same issue. React-bootstrap is adding dynamic? classes that purgeCSS is not handling.

next.config.js 

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