Merge pull request #21 from metalabdesign/update-listen-for-webpack-emit

Allow splitting on `emit` event.

Author: izaakschroeder

README.md

@@ -55,6 +55,8 @@ The following configuration options are available:
 
 **preserve**: `default: false`. Keep the original unsplit file as well. Sometimes this is desirable if you want to target a specific browser (IE) with the split files and then serve the unsplit ones to everyone else.
 
+**defer**: `default: 'false'`. You can pass `true` here to cause this plugin to split the CSS on the `emit` phase. Sometimes this is needed if you have other plugins that operate on the CSS also in the emit phase. Unfortunately by doing this you potentially lose chunk linking and source maps. Use only when necessary.
+
 [webpack]: http://webpack.github.io/
 [herp]: https://github.com/ONE001/css-file-rules-webpack-separator
 [postcss]: https://github.com/postcss/postcss

src/index.js

@@ -70,19 +70,24 @@ export default class CSSSplitWebpackPlugin {
    * @param {Boolean|String} imports Truish to generate an additional import
    * asset. When a boolean use the default name for the asset.
    * @param {String} filename Control the generated split file name.
+   * @param {Boolean} defer Defer splitting until the `emit` phase. Normally
+   * only needed if something else in your pipeline is mangling things at
+   * the emit phase too.
    * @param {Boolean} preserve True to keep the original unsplit file.
    */
   constructor({
     size = 4000,
     imports = false,
     filename = '[name]-[part].[ext]',
     preserve,
+    defer = false,
   }) {
     this.options = {
       size,
       imports: normalizeImports(imports, preserve),
       filename: nameInterpolator(filename),
       preserve,
+      defer,
     };
   }
 
@@ -121,6 +126,48 @@ export default class CSSSplitWebpackPlugin {
     });
   }
 
+  chunksMapping(compilation, chunks, done) {
+    const assets = compilation.assets;
+    const publicPath = strip(compilation.options.output.publicPath || './');
+    const promises = chunks.map((chunk) => {
+      const input = chunk.files.filter(isCSS);
+      const items = input.map((name) => this.file(name, assets[name]));
+      return Promise.all(items).then((entries) => {
+        entries.forEach((entry) => {
+          // Skip the splitting operation for files that result in no
+          // split occuring.
+          if (entry.chunks.length === 1) {
+            return;
+          }
+          // Inject the new files into the chunk.
+          entry.chunks.forEach((file) => {
+            assets[file._name] = file;
+            chunk.files.push(file._name);
+          });
+          const content = entry.chunks.map((file) => {
+            return `@import "${publicPath}/${file._name}";`;
+          }).join('\n');
+          const imports = this.options.imports({
+            ...entry,
+            content,
+          });
+          if (!this.options.preserve) {
+            chunk.files.splice(chunk.files.indexOf(entry.file), 1);
+            delete assets[entry.file];
+          }
+          if (imports) {
+            assets[imports] = new RawSource(content);
+            chunk.files.push(imports);
+          }
+        });
+        return Promise.resolve();
+      });
+    });
+    Promise.all(promises).then(() => {
+      done();
+    }, done);
+  }
+
   /**
    * Run the plugin against a webpack compiler instance. Roughly it walks all
    * the chunks searching for CSS files and when it finds one that needs to be
@@ -132,50 +179,21 @@ export default class CSSSplitWebpackPlugin {
    * @returns {void}
    */
   apply(compiler : Object) {
-    // Only run on `this-compilation` to avoid injecting the plugin into
-    // sub-compilers as happens when using the `extract-text-webpack-plugin`.
-    compiler.plugin('this-compilation', (compilation) => {
-      const assets = compilation.assets;
-      const publicPath = strip(compilation.options.output.publicPath || './');
-      compilation.plugin('optimize-chunk-assets', (chunks, done) => {
-        const promises = chunks.map((chunk) => {
-          const input = chunk.files.filter(isCSS);
-          const items = input.map((name) => this.file(name, assets[name]));
-          return Promise.all(items).then((entries) => {
-            entries.forEach((entry) => {
-              // Skip the splitting operation for files that result in no
-              // split occuring.
-              if (entry.chunks.length === 1) {
-                return;
-              }
-              // Inject the new files into the chunk.
-              entry.chunks.forEach((file) => {
-                assets[file._name] = file;
-                chunk.files.push(file._name);
-              });
-              const content = entry.chunks.map((file) => {
-                return `@import "${publicPath}/${file._name}";`;
-              }).join('\n');
-              const imports = this.options.imports({
-                ...entry,
-                content,
-              });
-              if (!this.options.preserve) {
-                chunk.files.splice(chunk.files.indexOf(entry.file), 1);
-                delete assets[entry.file];
-              }
-              if (imports) {
-                assets[imports] = new RawSource(content);
-                chunk.files.push(imports);
-              }
-            });
-            return Promise.resolve();
-          });
+    if (this.options.defer) {
+      // Run on `emit` when user specifies the compiler phase
+      // Due to the incorrect css split + optimization behavior
+      // Expected: css split should happen after optimization
+      compiler.plugin('emit', (compilation, done) => {
+        return this.chunksMapping(compilation, compilation.chunks, done);
+      });
+    } else {
+      // Only run on `this-compilation` to avoid injecting the plugin into
+      // sub-compilers as happens when using the `extract-text-webpack-plugin`.
+      compiler.plugin('this-compilation', (compilation) => {
+        compilation.plugin('optimize-chunk-assets', (chunks, done) => {
+          return this.chunksMapping(compilation, chunks, done);
         });
-        Promise.all(promises).then(() => {
-          done();
-        }, done);
       });
-    });
+    }
   }
 }

test/spec/index.spec.js

@@ -133,10 +133,36 @@ describe('CSSSplitWebpackPlugin', () => {
       expect(files).to.not.have.property('styles-1.css.map');
     })
   );
-
   it('should fail with bad imports', () => {
     expect(() =>
       new CSSSplitWebpackPlugin({imports: () => {}})
     ).to.throw(TypeError);
   });
+  describe('deferred emit', () => {
+    it('should split css files when necessary', (done) => {
+      webpack({size: 3, defer: true}).then(({stats, files}) => {
+        expect(stats.assetsByChunkName)
+          .to.have.property('main')
+          .to.contain('styles-1.css')
+          .to.contain('styles-2.css');
+        expect(files).to.have.property('styles-1.css');
+        expect(files).to.have.property('styles-2.css');
+        expect(files).to.have.property('styles.css.map');
+        done();
+      });
+    });
+    it('should ignore files that do not need splitting', (done) => {
+      webpack({size: 10, defer: true}).then(({stats, files}) => {
+        expect(stats.assetsByChunkName)
+          .to.have.property('main')
+          .to.contain('styles.css')
+          .to.not.contain('styles-1.css')
+          .to.not.contain('styles-2.css');
+        expect(files).to.have.property('styles.css');
+        expect(files).to.not.have.property('styles-1.css');
+        expect(files).to.not.have.property('styles-2.css');
+        done();
+      });
+    });
+  });
 });