feat: support [email protected]

Author: aleen42

README.md

@@ -21,7 +21,7 @@ npm install --save css-split-webpack-plugin
 Simply add an instance of `CSSSplitWebpackPlugin` to your list of plugins in your webpack configuration file _after_ `ExtractTextPlugin`. That's it!
 
 ```javascript
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var MiniCssExtractPlugin = require('mini-css-extract-plugin');
 var CSSSplitWebpackPlugin = require('../').default;
 
 module.exports = {
@@ -35,11 +35,14 @@ module.exports = {
   module: {
     loaders: [{
       test: /\.css$/,
-      loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
+      use: [
+        MiniCssExtractPlugin.loader,
+        'css-loader',
+      ],
     }],
   },
   plugins: [
-    new ExtractTextPlugin('styles.css'),
+    new MiniCssExtractPlugin({filename: 'style.css'}),
     new CSSSplitWebpackPlugin({size: 4000}),
   ],
 };

example/basic/webpack.config.js

@@ -1,16 +1,6 @@
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CSSSplitWebpackPlugin = require('../../').default;
 
-const miniCssConfig = {
-  loader: MiniCssExtractPlugin.loader,
-  options: {
-    // you can specify a publicPath here
-    // by default it uses publicPath in webpackOptions.output
-    publicPath: '../',
-    hmr: process.env.NODE_ENV === 'development',
-  },
-};
-
 module.exports = {
   entry: './index.js',
   context: __dirname,
@@ -23,7 +13,7 @@ module.exports = {
     rules: [{
       test: /\.css$/,
       use: [
-        miniCssConfig,
+        MiniCssExtractPlugin.loader,
         'css-loader',
       ],
     }],

example/less/webpack.config.js

@@ -1,16 +1,6 @@
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CSSSplitWebpackPlugin = require('../../').default;
 
-const miniCssConfig = {
-  loader: MiniCssExtractPlugin.loader,
-  options: {
-    // you can specify a publicPath here
-    // by default it uses publicPath in webpackOptions.output
-    publicPath: '../',
-    hmr: process.env.NODE_ENV === 'development',
-  },
-};
-
 module.exports = {
   entry: './index.js',
   context: __dirname,
@@ -23,7 +13,7 @@ module.exports = {
     rules: [{
       test: /\.less$/,
       use: [
-        miniCssConfig,
+        MiniCssExtractPlugin.loader,
         'css-loader',
         'less-loader',
       ],

package.json

@@ -28,25 +28,22 @@
     "babel-preset-flow": "^6.23.0",
     "chai": "^3.5.0",
     "cross-env": "^6.0.3",
-    "css-loader": "^3.2.0",
+    "css-loader": "^6.2.0",
     "eslint": "^4.6.0",
     "eslint-config-metalab": "^7.0.1",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "less": "^3.10.3",
-    "less-loader": "^5.0.0",
+    "less": "^4.1.1",
+    "less-loader": "^10.0.1",
     "memory-fs": "^0.3.0",
-    "mini-css-extract-plugin": "^0.8.0",
+    "mini-css-extract-plugin": "^2.2.0",
     "mocha": "^2.4.5",
-    "optimize-css-assets-webpack-plugin": "^3.2.0",
-    "style-loader": "^0.13.1",
-    "webpack": "^4.41.2"
+    "webpack": "^5.50.0"
   },
   "dependencies": {
     "loader-utils": "^1.1.0",
     "postcss": "^6.0.14",
-    "webpack-sources": "^1.0.2"
+    "webpack-sources": "^3.2.0"
   },
   "peerDependencies": {
-    "webpack": ">=1"
+    "webpack": ">=5"
   }
 }

src/index.js

@@ -3,6 +3,8 @@ import chunk from './chunk';
 import {SourceMapSource, RawSource} from 'webpack-sources';
 import {interpolateName} from 'loader-utils';
 
+const name = 'CSSSplitWebpackPlugin';
+
 /**
  * Detect if a file should be considered for CSS splitting.
  * @param {String} name Name of the file.
@@ -133,8 +135,8 @@ 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 promises = Array.from(chunks).map((chunk) => {
+      const input = Array.from(chunk.files).filter(isCSS);
       const items = input.map((name) => this.file(name, assets[name]));
       return Promise.all(items).then((entries) => {
         entries.forEach((entry) => {
@@ -145,23 +147,25 @@ export default class CSSSplitWebpackPlugin {
           }
           // Inject the new files into the chunk.
           entry.chunks.forEach((file) => {
-            assets[file.name] = file;
-            chunk.files.push(file.name);
+            const name = file.name // RawSource
+              || file._name; // SourceMapSource
+            assets[name] = file;
+            chunk.files.add(name);
           });
-          const content = entry.chunks.map((file) => {
+          const content = Array.from(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);
+            chunk.files.delete(entry.file);
             delete assets[entry.file];
           }
           if (imports) {
             assets[imports] = new RawSource(content);
-            chunk.files.push(imports);
+            chunk.files.add(imports);
           }
         });
         return Promise.resolve();
@@ -187,35 +191,19 @@ export default class CSSSplitWebpackPlugin {
       // Run on `emit` when user specifies the compiler phase
       // Due to the incorrect css split + optimization behavior
       // Expected: css split should happen after optimization
-      if (compiler.hooks) {
-        compiler.hooks.emit.tapAsync('css-split-emit', (compilation, done) => {
-          return this.chunksMapping(compilation, compilation.chunks, done);
-        });
-      } else {
-        compiler.plugin('emit', (compilation, done) => {
-          return this.chunksMapping(compilation, compilation.chunks, done);
-        });
-      }
+      compiler.hooks.emit.tapAsync(name, (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`.
-      // eslint-disable-next-line no-lonely-if
-      if (compiler.hooks) {
-        compiler.hooks.thisCompilation.tap('css-split-this-compilation',
-          (compilation) => {
-            compilation.hooks.optimizeChunkAssets.tapAsync(
-              'css-split-optimize-chunk-assets',
-              (chunks, done) => {
-                return this.chunksMapping(compilation, chunks, done);
-              });
-          });
-      } else {
-        compiler.plugin('this-compilation', (compilation) => {
-          compilation.plugin('optimize-chunk-assets', (chunks, done) => {
+      // sub-compilers as happens when using the `mini-css-extract-plugin`.
+      compiler.hooks.thisCompilation.tap(name, (compilation) => {
+        // TODO there is no async hook for optimizing chunks
+        compilation.hooks.optimizeChunkAssets.tapAsync(
+          name, (chunks, done) => {
             return this.chunksMapping(compilation, chunks, done);
           });
-        });
-      }
+      });
     }
   }
 }

test/spec/index.spec.js

@@ -1,6 +1,5 @@
 import _webpack from 'webpack';
 import MiniCssExtractPlugin  from 'mini-css-extract-plugin';
-import OptimizeCssPlugin from 'optimize-css-assets-webpack-plugin';
 import CSSSplitWebpackPlugin from '../../src';
 import path from 'path';
 import MemoryFileSystem from 'memory-fs';
@@ -9,16 +8,6 @@ import {expect} from 'chai';
 const basic = path.join('.', 'basic', 'index.js');
 const less = path.join('.', 'less', 'index.js');
 
-const miniCssConfig = {
-  loader: MiniCssExtractPlugin.loader,
-  options: {
-    // you can specify a publicPath here
-    // by default it uses publicPath in webpackOptions.output
-    publicPath: '../',
-    hmr: process.env.NODE_ENV === 'development',
-  },
-};
-
 const config = (options, entry = basic, {
   plugins,
   ...extra
@@ -33,15 +22,9 @@ const config = (options, entry = basic, {
     },
     module: {
       rules: [{
-        test: /\.css$/,
+        test: /\.(css|less)$/,
         use: [
-          miniCssConfig,
-          'css-loader',
-        ],
-      }, {
-        test: /\.less$/,
-        use: [
-          miniCssConfig,
+          MiniCssExtractPlugin.loader,
           'css-loader',
           'less-loader',
         ],
@@ -67,10 +50,18 @@ const webpack = (options, inst, extra) => {
       expect(err).to.be.null;
       const stats = _stats.toJson();
       const files = {};
+      const readFile = (name) => compiler.outputFileSystem.readFileSync(
+        path.join(configuration.output.path, name)
+      );
       stats.assets.forEach((asset) => {
-        files[asset.name] = compiler.outputFileSystem.readFileSync(
-          path.join(configuration.output.path, asset.name)
-        );
+        // eslint-disable-next-line no-console
+        files[asset.name] = readFile(asset.name);
+
+        if (asset.related[0]) {
+          asset.related.forEach((related) => {
+            files[related.name] = readFile(related.name);
+          });
+        }
       });
       resolve({stats, files});
     });
@@ -175,12 +166,7 @@ describe('CSSSplitWebpackPlugin', () => {
       webpack({
         size: 3,
         defer: true,
-      }, basic, {
-        devtool: false,
-        plugins: [
-          new OptimizeCssPlugin(),
-        ],
-      }).then(({stats, files}) => {
+      }, basic, {devtool: false}).then(({stats, files}) => {
         expect(files).to.not.have.property('styles-1.css.map');
         expect(stats.assetsByChunkName)
           .to.have.property('main')