diff --git a/README.md b/README.md index 6381132..fb6e151 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, @@ -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 diff --git a/dist/index.js b/dist/index.js index 5e6c99d..b26ea51 100644 --- a/dist/index.js +++ b/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); + }); }); }; diff --git a/package.json b/package.json index 7760b10..1e9c588 100644 --- a/package.json +++ b/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", diff --git a/src/index.js b/src/index.js index ceb69f5..3ef04be 100644 --- a/src/index.js +++ b/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) + }) }) }