Use multiple files

[IngwiePhoenix]

Hey.

I just figured out, with a huge facedesk involved, that there is a PurifyCSS plugin for WebPack. Previously, I used the following script to test out what actually happens when I run PurifyCSS - and the result is so drastic that I want to use it. here is the script, as I have it:

var purify = require("purify-css");
var fs = require("fs");
var css = fs.readFileSync(process.argv[2], "utf8");
var merge = require("array-merger").merge;
var glob = require("glob").sync;
var path = require("path");

var paths = [
    // Templates
    "protected/views/*/*.php",
    "protected/components/views/*.php",
    "protected/modules/*/views/*/*.php",
    "protected/modules/*/components/views/*.php",
    "themes/dragonsinn/views/layouts/*.php",
    "protected/extensions/*/components/views/*.php",
    // JavaScript + OJ
    "web-lib/*.js",
    "web-lib/*.oj",
    "protected/extensions/*/js/*.js",
    // Specific
    "protected/modules/chat/js/*.js",
    "protected/modules/chat/lib/template/*.html",
    "protected/modules/chat/lib/template/*.php",
    "protected/modules/chat/views/*/*.php"
];

var files=[];
paths.forEach(function(p){
    files = merge(files,glob(p));
});

console.log("Target:", process.argv[2]);

purify(files, css, {
    minify: true,
    info: true
}, function(output){
    fs.writeFileSync(
        path.join(
            path.dirname(process.argv[2]),
            "purified-"+path.basename(process.argv[2])
        ), output
    );
});

I get an "1.9 times smaller" message - and that is insane. So I want to use this with WebPack. However, the code and README do not indicate how I would pass multiple files into the plugin - and, if I can savely use ExtractTextPlugin as I am already doing.

So how would I go about oding this? :)

[iam4x]

@IngwiePhoenix Your code works great!

I've translated it to ES6 if someone wants it:

import path from 'path';
import purify from 'purify-css';
import ConcatSource from 'webpack/lib/ConcatSource';
import { sync as glob } from 'glob';

export default function PurifyPlugin(options) {
  this.basePath = options.basePath || process.cwd();
  this.purifyOptions = options.purifyOptions || { minify: true, info: true };
  if (options.paths) {
    this.paths = options.paths;
  } else {
    throw new Error('Required: options.paths');
  }
}

PurifyPlugin.prototype.apply = function(compiler) {
  let files = [];
  this.paths.forEach((p) => {
    files = [ ...files, ...glob(path.join(this.basePath, p)) ];
  });

  compiler.plugin('this-compilation', (compilation) => {
    compilation.plugin('additional-assets', (done) => {
      for (const key in compilation.assets) {
        if (/\.css$/i.test(key)) {
          // We found a CSS. So purify it.
          const asset = compilation.assets[key];
          const css = asset.source();
          const newCss = new ConcatSource();
          newCss.add(purify(files, css, this.purifyOptions));
          compilation.assets[key] = newCss;
        }
      }
      return done();
    });
  });
};

[IngwiePhoenix]

@iam4x I am actually very close to opensource the plugin itself. It has been working super stable the whole time so I see no point why I should keep it an internal dependency anymore. :3 Once published, Ill let you know, and in fact, probably add a PR to the readme of this repo to have my plugin mentioned. :)

If you are curios, it did learn something very, very interesting: It can now scan all files that are used in your WebPack build and scan for used classes/selectors there, allowing you to just use your code right away, pass the globs to your templates, and let the magic happen. :)

I haven't gotten it to a per-chunk basis, but thats something for the future. As said, im opensourcing it soon! ^^

[iam4x]

Very nice! Thank's @IngwiePhoenix :+1:

[IngwiePhoenix]

@iam4x https://github.com/DragonsInn/bird3-purifycss-webpack-plugin