Nuxt.js: Help cleanup css unused styles mess with a webpack plugin

[SharadKumar]

I am new to nuxt and really enjoying working with it so far. I created a simple app with few pages and deploying on zeit/now. All I have done is added firebase and bulma/scss and I have started getting chunk size warnings! So I went looking and I think I have reduced my firebase footprint but not happy with amount of unused CSS styling being shipped to the browser. I have selectively imported only relevant scss files in layout, however there are still many styles that are not used but get bundled.

So I started looking and found that PurifyCSS with purifycss-webpack is the answer. Then I looked for ways to include the plugin in build, so I tried below in nuxt.config.js:

...
build: {
    plugins: [
      new PurifyCSSPlugin({paths: glob.sync(path.join(__dirname, 'index.html'))})
    ]
}
...

I still see that my index.html is loaded with unused styles in dev.

What am I missing?

_{This feature request is available on Nuxt.js community (#c765)}

[SharadKumar]

Also I think that since nuxt is doing so much to improve the default performance... I think purify-css should be part of standard or an option available. The reality if most projects use css frameworks such a bootstrap or bulma etc and for good reasons. Some front-end developers try to also go without them due to the issue of unused styles or bloating their code... but if we can clear out unused styles... then it is a good reason to use the css frameworks without worrying too much about increasing the size of your app with unused parts.

Something like below would be great to improve size:

build: {
    extractCSS: true,
    purifyCSS: false // default: true
}

[Atinux]

Actually this plugin does not work with nuxt.js since the HTML is generated after webpack plugins.

We will try to make a plugin to use purifyCSS with nuxt.js since we already talked with @alexchopin about this feature, but it would be only after 1.0.

[SharadKumar]

Thanks @Atinux @alexchopin

[massada]

@SharadKumar it's actually possible. I've extended the Webpack build config to include the plugin (doesn't work if you add it to the plugins key because that gets included before ExtractTextPlugin - see lib/builder/webpack/base.config.js). It also works with vue templates.

My changes:

const glob = require('glob-all')
const path = require('path')
const PurifyCSSPlugin = require('purifycss-webpack')

module.exports = {
  build: {
   ...
    extend(config) {
      config.plugins.push(new PurifyCSSPlugin({
        paths: glob.sync([
          path.join(__dirname, 'components/**/*.vue'),
          path.join(__dirname, 'default/**/*.vue'),
          path.join(__dirname, 'pages/**/*.vue'),
          path.join(__dirname, 'plugins/**/*.vue')
        ]),
        minimize: process.env.NODE_ENV === 'production'
      }))
    }
    ...
  }
  ...
}

[pxwee5]

Do note that if you use PurgeCSS (same case with PurifyCSS I assume) and build with Nuxt. You will lose VSCode's IntelliSense TailwindCSS class suggestions.

[manniL]

@Atinux Well, PurgeCSS (which is the spiritual successor of purifyCss) can be used with Vue SFCs only without problems! So implementing it into the core of NuxtJs shouldn't be a problem.

[husayt]

also see #2195 and #2942

[husayt]

Also, here is official PurgeCss demo for Nuxt

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.