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

how to take both before classes while removing unused class? #516

Closed
naveennsit opened this issue Nov 10, 2020 · 4 comments
Closed

how to take both before classes while removing unused class? #516

naveennsit opened this issue Nov 10, 2020 · 4 comments

Comments

@naveennsit
Copy link

I have a nextjs project .I am using postcss-purgecss to remove my unused css classes but I am facing one issue .In my style.css file there is two :before class on same element.

I take help from https://purgecss.com/guides/next.html

 .f20 [class^="icn-"]:before,.f20 [class*=" icn-"]:before {
        font-family: 'icons' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

.but when I compile and remove unused css file it remove one before class.I want both should be present in my bundle css file.How I will achieve this ? current output is this

.f20 [class^="icn-"]:before {
        font-family: 'icons' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

Here is my postcss.config.js file

module.exports = {
  plugins: [
    'autoprefixer',
    'postcss-flexbugs-fixes'[
      // ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
      ('postcss-preset-env',
      {
        autoprefixer: {
          flexbox: 'no-2009'
        },
        stage: 3,
        features: {
          'custom-properties': false
        }
      })
    ],
    [
      "@fullhuman/postcss-purgecss",
      {
        "content": [
          "./pages/**/*.{js,jsx,ts,tsx}",
         
],
        'whitelistPatterns': [/fb20/]
      }
    ]
  ]
};

any update.. ?

@SimonDesautels
Copy link

Could it be that your selector is .f20, but you are setting your whitelistPatterns to /fb20/ ? Why is there a b in your pattern ?

@naveennsit
Copy link
Author

see this vercel/next.js#19043

@naveennsit
Copy link
Author

@Ffloriel
Copy link
Member

The issue seems to be related to the attribute selector. There is currently an issue when the attribute selector contains a space:
#392

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

3 participants