Integration with html-webpack-plugin

[burtyish]

I use https://github.com/jantimon/html-webpack-plugin to build my HTML. It automatically adds a a link to the stylesheet built by mini-css-extract-plugin:

If you have any CSS assets in webpack's output (for example, CSS extracted with the ExtractTextPlugin) then these will be included with tags in the HTML head.

So I've followed the instructions in the README here and webpack's output includes both the ltr [name].css file and also the [name].rtl.css file. However, the generated html links to the ltr file only. I don't know how html-webpack-plugin detects CSS assets in the webpack output, but it'd be very helpful if it used the css from rtl-css-transform-webpack-plugin.

As it is, the HTML generated by html-webpack-plugin includes only the follwing link to css in the head:

<link href="foo.css" rel="stylesheet">

I'd like the output to be

<link href="foo.rtl.css" rel="stylesheet">

[burtyish]

Update: From debugging this part of html-webpack-plugin's code, I see that the rtl css file does not show up in the chunk assets.

Anyway, I've found a hack to work around this problem. I set up rtl-css-transform plugin to write to the same file name as mini-css-extract-plugin. So the ltr file is overwritten with an rl file of the same name.

const plugins = [
    new HtmlWebpackPlugin(/*  settings */)
    new FaviconsWebpackPlugin(/*  settings */),
    new MiniCssExtractPlugin({
      filename: "[name].[hash].css",
    }),
    new RtlCssPlugin({
        filename: "[name].[hash].css", // Hack: This will write over the ltr css file
      })
  ];

[charliedavison]

@nicolashemonic Any word on this?