How to choose between rtl css file generated by rtl css and ltr css

Question

We're building a website for a customer and the customer demands both an english and an arabic version of the website.

We're using infernojs@7 with webpack@4 and we're bundling css using webpack as well.

We're applying https://github.com/nicolashemonic/rtl-css-transform-webpack-plugin so that we get two versions of our output css file : RTL version and LTR version, our filenames are hashed for caching obviously.

Here is the Problem : how to choose at runtime between the rtl css file and ltr css file when we don't know their name(because of the hash) ?

I'm thinking of using react-helmet in root component to do something like

<link rel="stylesheet" href={this.state.lang==='ar' ? 'bunldename.rtl.css' : 'bundlename.css'}/>
<!-- we'll actually get lang from route but that's not the point-->

My only problem is getting the bundlename, I thought of using DefinePlugin but I couldn't get bundlename even in webpack.config.js.

Here is my webpack config:

const HtmlWebpackPlugin = require('html-webpack-plugin'),
    RtlCssPlugin = require('rtl-css-transform-webpack-plugin'),
    ExtractCssChunks = require('extract-css-chunks-webpack-plugin'),        
    HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin'),       
    path = require('path');

const commonPlugins = [ 
    new ExtractCssChunks({
        'filename': 'css/[name].[contenthash].css'
    }),
    new RtlCssPlugin({
        filename: 'css/[name].[hash].rtl.css'
    }),   
    new HtmlWebpackPlugin({
        'title': 'mytitle',
        'template': 'index.html',
        excludeAssets: /\.css/u
    }),
    new HtmlWebpackExcludeAssetsPlugin()
];
const productionPlugins = [ 
    ...
];

module.exports = (_env,argv) => ({ 
    'entry': './src/index.jsx',
    'output': {
        'path': path.resolve('../public'),
        'filename': 'js/main.[contenthash].js'
    },
    'plugins': argv.mode === 'development' ? commonPlugins : [...commonPlugins,...productionPlugins],
    'module': {
        'rules': [
            {
                'test': /\.(js|jsx)$/u,
                'use':
                {
                    'loader': 'babel-loader',
                    'options': {
                        'presets': ['@babel/preset-env'],
                        'plugins': [['babel-plugin-inferno', { 'imports': true }]]
                    }
                }
            },
            {
                'test': /\.css$/u,
                'use': [ExtractCssChunks.loader, 'css-loader']
            }
        ]
    },
    'devServer': {
        'host': '0.0.0.0',
        'historyApiFallback': true,
        'contentBase': './public',
        'publicPath': 'http://localhost:8080/'
    },
    'resolve': {
        'alias': {
            'inferno': (argv.mode === 'development')
                ? 'inferno/dist/index.dev.esm.js'
                : 'inferno/dist/index.esm.js',
            'react': 'inferno-compat',
            'react-dom': 'inferno-compat'
        }
    }
});