Rebuilding optimization.

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,
@@ -56,6 +58,8 @@ new WebpackRTLPlugin({
 
 * `filename` the filename of the result file. May contain `[contenthash]`. 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`.
+* `rtlFlag`. If `updateRuntimeChunk` is set to `true` will look for global var (IS_RTL by default) passed as a string value.
 * `options` Options given to `rtlcss`. See the [rtlcss documentation for available options](http://rtlcss.com/learn/usage-guide/options/).
 * `plugins` RTLCSS plugins given to `rtlcss`. See the [rtlcss documentation for writing plugins](http://rtlcss.com/learn/extending-rtlcss/writing-a-plugin/). Default to `[]`.
 * `diffOnly` If set to `true`, the stylesheet created will only contain the css that differs from the source stylesheet. Default to `false`.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-rtl-plugin",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Webpack plugin to produce a rtl css bundle",
   "main": "lib/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.0.0"
   },
   "dependencies": {
     "@romainberger/css-diff": "^1.0.3",

src/index.js

@@ -8,11 +8,34 @@ import cssnano from 'cssnano'
 
 const WebpackRTLPlugin = function(options = {filename: false, options: {}, plugins: []}) {
   this.options = options
+  this.chunkHashs = {};
+  this.pliginName = 'webpack-rtl-plugin';
 }
 
 WebpackRTLPlugin.prototype.apply = function(compiler) {
-  compiler.plugin('emit', (compilation, callback) => {
-    forEachOfLimit(compilation.chunks, 5, (chunk, key, cb) => {
+  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) => {
+    const changedChunks = compilation.chunks.filter((chunk) => {
+      const name = chunk.name || chunk.id;
+      const prevHash = this.chunkHashs[name];
+      const currHash = chunk.hash;
+      this.chunkHashs[name] = currHash;
+      return !prevHash || (currHash !== prevHash);
+    });
+
+    forEachOfLimit(changedChunks, 5, (chunk, key, cb) => {
       var rtlFiles = [],
           cssnanoPromise = Promise.resolve()
 
@@ -70,7 +93,7 @@ WebpackRTLPlugin.prototype.apply = function(compiler) {
         chunk.files.push.apply(chunk.files, rtlFiles)
         cb()
       })
-    }, callback)
+    })
   })
 }