lucleray / next-purgecss

nextjs + purgecss for smaller css bundles
https://www.npmjs.com/package/next-purgecss
134 stars 8 forks source link

used CSS classes are purged #48

Open SukPavel opened 4 years ago

SukPavel commented 4 years ago

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 3 years ago

I found same issue.

jsking216 commented 3 years ago

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

ahsanahmed321 commented 3 years ago

same issue with me

matthiasprieth commented 3 years ago

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

ShawnCentra commented 2 years ago

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