Migrate to new webpack 4 tapable api and es6+ syntax

klimashkin · Jun 4, 2018 · a6045bb · a6045bb
1 parent 1fc6231
commit a6045bb
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 96 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -4,7 +4,7 @@ root = true
 charset = utf-8
 
 indent_style = space
-indent_size = 4
+indent_size = 2
 
 end_of_line = lf
 insert_final_newline = false

diff --git a/index.js b/index.js
@@ -1,96 +1,92 @@
-var postcss = require('postcss');
-var webpackSources = require('webpack-sources');
-var humanSize = require('human-size');
-
-function PostCSSAssetsPlugin(options) {
-    this.options = options || {};
-
-    if (options.test === undefined) {
-        this.options.test = /\.css$/;
-    }
-
-    if (options.plugins === undefined) {
-        this.options.plugins = [];
-    }
-
-    if (options.log === undefined) {
-        this.options.log = true;
-    }
-}
-
-PostCSSAssetsPlugin.prototype.apply = function(compiler) {
-    var self = this;
-    var options = this.options;
-
-    compiler.plugin('emit', function(compilation, compileCallback) {
-        var assets = compilation.assets;
-
-        self.log('Start PostCSSAssetsPlugin');
-
-        return Promise.all(Object.keys(assets).reduce(function (result, name) {
-            if (!options.test.test(name)) {
-                return result;
-            }
-
-            var asset = assets[name];
-            var originalCss = asset.source();
-
-            var mapName = originalCss.match(/\/\*# sourceMappingURL=(.{1,200}).*\*\/$|$/)[1];
-
-            var inlineMap = mapName ? mapName.search(/^data:/) === 0 : false;
-            if (inlineMap) { self.log('Found inline source map'); }
-
-            var mapAsset = mapName && !inlineMap ? assets[mapName] : null;
-            var externalMap = mapAsset ? mapAsset.source() : undefined;
-            if (externalMap) { self.log('Found external source map'); }
-
-            var processOptions = {
-                from: name,
-                to: name,
-                map: (inlineMap || externalMap) ? {
-                    inline: inlineMap,
-                    sourcesContent: true,
-                    prev: externalMap
-                } : false
-            };
-
-            self.log('Processing ' + name + '...');
-
-            result.push(
-                postcss(options.plugins)
-                    .process(originalCss, processOptions)
-                    .then(function handlePostCSSResult(result) {
-                        var processedCss = result.css;
-                        var warnings = result.warnings();
-
-                        if (warnings && warnings.length) {
-                            self.log(warnings.join('\n'));
-                        }
-
-                        assets[name] = new webpackSources.RawSource(processedCss);
-                        if (mapAsset) {
-                            assets[mapName] = new webpackSources.RawSource(JSON.stringify(result.map));
-                        }
-
-                        self.log('Processed ' + name + '. Length before: ' + humanSize(originalCss.length, 2) + ', length after: ' + humanSize(processedCss.length, 2));
-                    })
-                    .catch(function (error) {
-                        self.log('Error processing file: ' + name, error);
-                    })
-            );
-
-            return result;
-        }, [])).then(function () {
-            self.log('Finish PostCSSAssetsPlugin');
-            compileCallback();
-        }).catch(compileCallback);
+const postcss = require('postcss');
+const fancyLog = require('fancy-log');
+const humanSize = require('human-size');
+const webpackSources = require('webpack-sources');
+
+const pluginName = 'PostCSSAssetsPlugin';
+
+module.exports = class PostCSSAssetsPlugin {
+  constructor({test = /\.css$/, plugins = [], log = true} = {}) {
+    this.test = test;
+    this.plugins = plugins;
+
+    this.log = log ? fancyLog : () => {};
+  }
+
+  apply(compiler) {
+    compiler.hooks.emit.tapPromise(pluginName, compilation => {
+      const assets = compilation.assets;
+
+      this.log('PostCSSAssetsPlugin: Starting...');
+
+      return Promise.all(Object.keys(assets).reduce((result, name) => {
+        if (!this.test.test(name)) {
+          return result;
+        }
+
+        const asset = assets[name];
+        const originalCss = asset.source();
+
+        const mapName = originalCss.match(/\/\*# sourceMappingURL=(.{1,200}).*\*\/$|$/)[1];
+
+        const inlineMap = mapName ? mapName.search(/^data:/) === 0 : false;
+        if (inlineMap) {
+          this.log('PostCSSAssetsPlugin: Found inline source map');
+        }
+
+        const mapAsset = mapName && !inlineMap ? assets[mapName] : null;
+        const externalMap = mapAsset ? mapAsset.source() : undefined;
+        if (externalMap) {
+          this.log('PostCSSAssetsPlugin: Found external source map');
+        }
+
+        const processOptions = {
+          from: name,
+          to: name,
+          map: (inlineMap || externalMap) ? {
+            inline: inlineMap,
+            sourcesContent: true,
+            prev: externalMap
+          } : false
+        };
+
+        this.log(`PostCSSAssetsPlugin: Processing ${name}...`);
+
+        result.push(
+          postcss(this.plugins)
+            .process(originalCss, processOptions)
+            .then(result => {
+              const processedCss = result.css;
+              const warnings = result.warnings();
+
+              if (warnings && warnings.length) {
+                this.log('PostCSSAssetsPlugin:', warnings.join('\n'));
+              }
+
+              assets[name] = new webpackSources.RawSource(processedCss);
+
+              if (mapAsset) {
+                assets[mapName] = new webpackSources.RawSource(JSON.stringify(result.map));
+              }
+
+              this.log(
+                'PostCSSAssetsPlugin:',
+                `Processed ${name}. Size before: ${humanSize(originalCss.length, 3)},`,
+                `size after: ${humanSize(processedCss.length, 2)}`
+              );
+            })
+            .catch(error => {
+              this.log('PostCSSAssetsPlugin:', `Error processing file: ${name}`, error);
+
+              throw error;
+            })
+        );
+
+        return result;
+      }, []))
+      .then(() => {
+        this.log('PostCSSAssetsPlugin: Done.');
+      });
     });
-};
-
-PostCSSAssetsPlugin.prototype.log = function () {
-    if (this.options.log) {
-        console.log.apply(console, arguments);
-    }
-};
-
-module.exports = PostCSSAssetsPlugin;
+  }
+};
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
   },
   "main": "index.js",
   "dependencies": {
+    "fancy-log": "^1.3.2",
     "human-size": "^1.1.0",
     "postcss": "^6.0.22",
     "webpack-sources": "^1.1.0"