how to take both before classes while removing unused class?

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.. ?