What is the styleExtensions attribute for?

[bart]

Hey everyone,

I'm running a nuxtJS project with element UI and I'm not be able to get it running in build mode. PurgeCSS removes all element UI classes. So I looked into the configuration options and found styleExtensions but no information about it. Could anyone explain in one or two sentences what this option does? Is it the css option of purgeCSS? Thanks!

[manniL]

Hey @bart 👋
It seems like it's an old option for the webpack plugin but not related to the issue you mean.

PurgeCSS has likely problems to detect what CSS classes you use because Element-UI is a component-based library. As it doesn't know the content of the components you use, it doesn't know that the CSS is used at all. But this is explained in some other threads/issues. Generally it is difficult to use purgecss with vue-based component css libraries.

[bart]

Hey @manniL ,

thanks a lot for you quick answer. I know that it's difficult to use PurgeCSS with a component based Nuxt plugin / framework. After struggling around with that issue I found a solution which might not be ideal but maybe someone who comes up with the same problem can use a similar approach.

I'm using the purgecss-whitelister package and configured my purgeCSS attributes like this:

purgeCSS: {
    whitelist: [
      'antialiased',
      'leading-normal',
      ...whitelister([
        'node_modules/tailwindcss/lib/plugins/css/preflight.css',
        'node_modules/element-ui/lib/theme-chalk/select.css',
        'node_modules/element-ui/lib/theme-chalk/input.css',
        'node_modules/element-ui/lib/theme-chalk/rate.css'
      ])
    ],
    whitelistPatternsChildren: [/^__nuxt/],
    whitelistPatterns: [/^__nuxt/]
  },

Cheers 🎉

[roselily8]

Hi Bart, how do you include whitelister in nuxt.config.js. It doesn't work for me. Thanks.