Setting the enabled property of purgeCSS to true will invalidate the styles in the group

[KeithChou]

The question is mentioned in the title.

Here is package.json

{
  "name": "my-app",
  "scripts": {
    "webpack": "nuxt webpack --dev",
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  },
  "dependencies": {
    "element-ui": "^2.15.12",
    "lodash": "^4.17.21",
    "nuxt": "2.15.8",
    "swiper": "4.3.5",
    "vant": "2.12.47",
    "vue-awesome-swiper": "3.1.3",
    "webpack": "4",
    "webpack-cli": "3.x"
  },
  "devDependencies": {
    "nuxt-purgecss": "^1.0.0",
    "nuxt-windicss": "^2.6.0"
  }
}

Here is my nuxt.config.js config

export default {
  /*
   ** Global CSS
   */
  css: [
    {
      src: 'element-ui/lib/theme-chalk/index.css',
    },
    {
      src: 'swiper/dist/css/swiper.css',
    },
    {
      src: 'vant/lib/index.css',
    },
  ],
  build: {
    extend(config, ctx) {
      if (ctx.isDev) {
        config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map';
      }
    },
    extractCSS: {
      ignoreOrder: true,
    },
  },
  buildModules: ['nuxt-windicss', 'nuxt-purgecss'],
  purgeCSS: {
    enabled: true,
  },
};

Here is my template.

<template>
  <div class="sm:text-100px sm:(pl-4 pr-4)">
    Hello world!

    <div class="bg-yellow-100" @click="handleClick">windi css</div>
    <div class="bg-gray-200 w-100px box-border">self css</div>
  </div>
</template>

And the last one is windi.config.js

export default {
  preflight: false,
};

hen I set the enabled property of purgeCSS to true, which will invalidate the styles in the group. That is to say, sm:text-100px is available, but the sm:(pl-4 pr-4)can't work.

However, if I set it to false, everything is ok...!

{
purgeCSS: {
    enabled: false,
  },
}

Can anyone help me solve this issue?
Thank you a lot!

[manniL]

Because you use the group syntax, the classes "sm:pl-4" and "sm:pr-4" are not found by purgecss in the markup. You can whitelist the classes manually.

PS: Windicss should not need purgeCSS as they have their own extractors.

[KeithChou]

Because you use the group syntax, the classes "sm:pl-4" and "sm:pr-4" are not found by purgecss in the markup. You can whitelist the classes manually.

PS: Windicss should not need purgeCSS as they have their own extractors.

Thank you for your answer! Let me refer to the relevant document of windicss 😆