both rtl and lrt css files added to asset list

[elad-maimon]

Somewhere in between version 1.3.0 to 1.5.0 the plugin behaviour was changed and now all files created by the plugin are added to the asset list, hence, added to every html file created by HtmlWebpackPlugin regardless if this is a rtl html file or ltr.

[shem86]

@elad-maimon how did you overcome this issue?

[elad-maimon]

I wrote my own plugin to integrate webpack-rtl-plugin with html-webpack-plugin, which explicitly changes the stylesheet tag from .css to *.rtl.css, if the dir is "rtl".

This is the code of my plugin:

function RtlHtmlWebpackPlugin(options) {
  this.options = options
}

RtlHtmlWebpackPlugin.prototype.apply = function(compiler) {
  compiler.plugin('compilation', function(compilation) {
    compilation.plugin('html-webpack-plugin-alter-asset-tags', function(htmlPluginData, callback) {
      if (htmlPluginData.plugin.options.dir === 'rtl') {
        htmlPluginData.head.forEach(function(tag) {
          tag.attributes.href = tag.attributes.href.replace(/css$/, 'rtl.css')
        })
      }

      callback(null, htmlPluginData)
    })
  })
}

module.exports = RtlHtmlWebpackPlugin

[shem86]

Oh thanks!
I ended up using HtmlWebpackExcludeAssetsPlugin.

[wessamzaghloul]

@elad-maimon would you please explain how you use your own plugin ?