diff --git a/README.md b/README.md index 72216ba..2890d36 100644 --- a/README.md +++ b/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`. diff --git a/package.json b/package.json index 03161d6..d1f7428 100644 --- a/package.json +++ b/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", diff --git a/src/index.js b/src/index.js index 03bcfdd..b10cc29 100644 --- a/src/index.js +++ b/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) + }) }) }