file-loader & css-loader doesn't handle paths in the /*rtl*/ comments

[Abdelhady]

tl;dr: file-loader & css-loader doesn't handle paths (like url(image-en.png)) in the /*rtl*/ comments.

details:

here is my webpack.config.js configuration:

const extractLESS = new ExtractTextPlugin('[contenthash].css');

module.exports = {
...
    module: {
        rules: [
            ...
            {
                test: /\.less$/i,
                use: extractLESS.extract(['css-loader', 'less-loader'])
            },
            {
                test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$|\.ogg$/,
                loader: "file-loader?name=[name]-[hash].[ext]"
            }
        ]
    },
    plugins: [
        ...
        extractLESS,
        new WebpackRTLPlugin(),
    ]
}

now when I write background-image like this:

.example
{
      background-image: url(image-en.png)/*rtl:url(image-ar.png)*/;
}

the result is like this:

.example
{
      background-image: url(https://mycdn.com/build/image-en-[generated-hash].png);
}

which removed the /*rtl*/ comment completely before generating the rtl version,

I tried another way by using the rtl:raw like this:

.example
{
     background-image: url(image-en.png);
    /*rtl:raw:
        background-image: url(image-ar.png);
    */;
}

which generated an unprocessed version of image-ar.png like:

.example
{
      background-image: url(https://mycdn.com/build/image-en-[generated-hash].png);
      background-image: url(image-ar.png);
}

So, how to make this plugin work well with the file-loader?