Add mini css extract plugin support

README.md

@@ -47,6 +47,8 @@ This will create the normal `style.css` and an additionnal `style.rtl.css`.
 ```
 new WebpackRTLPlugin({
   filename: 'style.[contenthash].rtl.css',
+  updateRuntimeChunk: true,
+  rtlFlag: 'IS_RTL',
   options: {},
   plugins: [],
   diffOnly: false,
@@ -57,6 +59,8 @@ new WebpackRTLPlugin({
 * `test` a RegExp (object or string) that must match asset filename
 * `filename` the filename of the result file. May contain patterns in brackets. Default to `style.css`.
   * `[contenthash]` a hash of the content of the extracted file
+  * `updateRuntimeChunk` updates webpack runtime to look for `.rtl.css` async chunks instead of `.css`. Works along with `mini-css-extract-plugin`. Works, when optimization.runtimeChunk is set to 'single'
+  * `rtlFlag`. If `updateRuntimeChunk` is set to `true` will look for global var (IS_RTL by default) passed as a string value.
   * `[id]` the module identifier
   * `[name]` the module name
   * `[file]` the extracted file filename 

dist/index.js

@@ -30,12 +30,25 @@ var WebpackRTLPlugin = function WebpackRTLPlugin() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { filename: false, options: {}, plugins: [] };
 
   this.options = options;
+  this.pliginName = 'webpack-rtl-plugin';
 };
 
 WebpackRTLPlugin.prototype.apply = function (compiler) {
   var _this = this;
 
-  compiler.plugin('emit', function (compilation, callback) {
+  if (this.options.updateRuntimeChunk) {
+    var rtlFlag = this.options.rtlFlag || 'IS_RTL';
+    compiler.hooks.thisCompilation.tap(this.pliginName, function (compilation) {
+      compilation.mainTemplate.hooks.requireEnsure.tap(_this.pliginName, function (source, chunk, hash) {
+        // already updated
+        if (source.indexOf('.rtl.css') !== -1) {
+          return source;
+        }
+        return source.replace(/(var href.*)("\.css";)/i, '$1 (' + rtlFlag + ' ? ".rtl.css" : ".css");');
+      });
+    });
+  }
+  compiler.hooks.emit.tap(this.pliginName, function (compilation) {
     (0, _async.forEachOfLimit)(compilation.chunks, 5, function (chunk, key, cb) {
       var rtlFiles = [];
       var cssnanoPromise = Promise.resolve();
@@ -120,7 +133,7 @@ WebpackRTLPlugin.prototype.apply = function (compiler) {
         chunk.files.push.apply(chunk.files, rtlFiles);
         cb();
       });
-    }, callback);
+    });
   });
 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-rtl-plugin",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Webpack plugin to produce a rtl css bundle",
   "main": "dist/index.js",
   "scripts": {
@@ -35,7 +35,7 @@
     "extract-text-webpack-plugin": "^1.0.1",
     "mocha": "^2.4.5",
     "style-loader": "^0.13.1",
-    "webpack": "^1.13.0"
+    "webpack": "^4.16.0"
   },
   "dependencies": {
     "@romainberger/css-diff": "^1.0.3",

src/index.js

@@ -7,11 +7,24 @@ import {forEachOfLimit} from 'async'
 import cssnano from 'cssnano'
 
 const WebpackRTLPlugin = function(options = {filename: false, options: {}, plugins: []}) {
-  this.options = options
+  this.options = options;
+  this.pliginName = 'webpack-rtl-plugin';
 }
 
 WebpackRTLPlugin.prototype.apply = function(compiler) {
-  compiler.plugin('emit', (compilation, callback) => {
+  if (this.options.updateRuntimeChunk) {
+    const rtlFlag = this.options.rtlFlag || 'IS_RTL';
+    compiler.hooks.thisCompilation.tap(this.pliginName, compilation => {
+      compilation.mainTemplate.hooks.requireEnsure.tap(this.pliginName, (source, chunk, hash) => {
+        // already updated
+        if (source.indexOf('.rtl.css') !== -1){
+          return source;
+        }
+        return source.replace(/(var href.*)("\.css";)/i, '$1 (' + rtlFlag + ' ? ".rtl.css" : ".css");');
+      });
+    });
+  }
+  compiler.hooks.emit.tap(this.pliginName, (compilation) => {
     forEachOfLimit(compilation.chunks, 5, (chunk, key, cb) => {
       const rtlFiles = []
       let cssnanoPromise = Promise.resolve()
@@ -99,7 +112,7 @@ WebpackRTLPlugin.prototype.apply = function(compiler) {
         chunk.files.push.apply(chunk.files, rtlFiles)
         cb()
       })
-    }, callback)
+    })
   })
 }