Remove unused CSS

[stevenvachon]

with email-remove-unused-css.

It's built with posthtml, but it currently cannot be used as a plugin and forces a reparse of the HTML. This should get fixed, though.

[revelt]

I agree, the unused CSS removal is a perfect feature for minifier.

And there can be issues when any removal of CSS is done after the minification because, for example, mentioned email-remove-unused-css parses and renders back the code. The CSS renderer (stringifier) won't output minified code, what means minifying would need to be performed again, OR unused CSS removed first and only then whole thing minified. When minification does the CSS removal it's faster for user.

email-remove-unused-css is for email code and was not designed to accept external stylesheets. That will be an issue for htmlnano which is web pages oriented. Unless we're happy with removal only what's contained. In a sense that's fine since it's quite quick procedure, it's not unCSS.

There is a PostHTML plugin to remove unused CSS, https://www.npmjs.com/package/postcss-remove-unused and looks like it accepts external stylesheets, although probably not id attributes.

[fstanis]

How about using uncss?

It seems that, at least theoretically, we could add uncss to the minifyCss module with the help of posthtml-render (since uncss requires the html):

const uncss = require('uncss');
const render = require('posthtml-render');

[...]

function processStyleNode(tree, styleNode, cssnanoOptions) {
  const css = Array.isArray(styleNode.content) ? styleNode.content.join(' ') : styleNode.content;
  [...]
  const html = render(tree, options);
  uncss(html, { stylesheets: [], raw: css } (error, output) => { ... });
}

Thoughts on this?

[maltsev]

Thanks, @fstanis for implementing that! I released this module and your other fixes as version 0.2.2.