Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

used CSS classes are purged #48

Open
SukPavel opened this issue Jun 29, 2020 · 5 comments
Open

used CSS classes are purged #48

SukPavel opened this issue Jun 29, 2020 · 5 comments

Comments

@SukPavel
Copy link

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.

@SukPavel SukPavel changed the title SCSS purged but used SCSS purged used classes Jun 29, 2020
@SukPavel SukPavel changed the title SCSS purged used classes used CSS classes are purged Jun 29, 2020
@WoraponU
Copy link

I found same issue.

@jsking216
Copy link

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

@ahsanahmed321
Copy link

same issue with me

@matthiasprieth
Copy link

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

@ShawnCentra
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants