Parcel: Add support for purging unused CSS

[kripod]

🙋 Feature request

🤔 Expected Behavior

There are packages like PurifyCSS, UnCSS and Purgecss for purging unused CSS classes in the final bundle. Unfortunately, none of them can be used out of the box along with Parcel.

😯 Current Behavior

Currently, the resulting HTML/CSS/JS files are minified during the build phase, but redundant CSS classes aren't removed.

💁 Possible Solution

It would be great if there was opt-in support for purging unused CSS. There is a PostCSS plugin called postcss-uncss which doesn't work with Parcel.

🔦 Context

This would be extremely useful for websites based on a CSS framework _(e.g. Bootstrap or Bulma)_.

[mischnic]

How do you know in advance which classes aren't used if they are used by javascript after pageload?

[kripod]

@mischnic For instance, there are configuration options in UnCSS for that. That’s why I want this to be an opt-in feature.

[mischnic]

Ok.

There is a PostCSS plugin called postcss-uncss which doesn't work with Parcel.

Why not?

[LukBukkit]

I think the plugin postcss-uncss could work with Parcel, if you only would use CSS.
Then you could add it via the .postcssrc.js.

But PostCss isn't used when compiling Sass, so this configuration is also ignored.
That's why I guess a transform for removing the unused css which also could work with Sass, would be great!

[timothydang]

i think https://github.com/cprecioso/parcel-plugin-purgecss is the plugin that you're looking for @kripod

[waynehoover]

https://github.com/uncss/postcss-uncss or https://github.com/FullHuman/postcss-purgecss work fine if using postcss with parcel but they don't seem to work well in watch mode because of caching issues.

You can make them only run in build mode by making use of process.env.NODE_ENV in your postcessrc.js for example:
https://gist.github.com/waynehoover/60d46c6508615a49ae6b716afa7f3995

[brianzelip]

Here's a working example of using Purgecss with Parcel, via parcel-plugin-purgecss.

Method:

1. npm i -D parcel-plugin-purgecss
2. create purgecss.config.js file in project root directory, ie:

// purgecss.config.js
module.exports = {
  content: ['index.html', 'src/**/*.vue'],
  css: ['src/css/main.css']
};

note: css only purged on build, not dev server.

[lukehedger]

With Parcel2, purgecss can be used without any additional plugins.

postcss.config.js

module.exports = {
  plugins: ["@fullhuman/postcss-purgecss"]
};

purgecss.config.js

module.exports = {
  content: ["index.html"]
};

Example here.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

[ranisalt]

With Parcel2, purgecss can be used without any additional plugins.

Except it spills warnings that doing the way you did, with a postcss JS config, loses caching ability.

[aminya]

Uncss is better in this regard. Uncss executes the JavaScript (purgecss just removes static classes).

https://github.com/uncss/uncss

UnCSS is a tool that removes unused CSS from your stylesheets. It works across multiple files and supports Javascript-injected CSS.

It would be nice if Parcel adds more support for uncss or even integrate it to Parcel by default.

Can we open this issue again?