Separate RTL css file using postcss-loader and RTLCSS in webpack

Question

How can I create a separate RTL css file using postcss-loader and rtlcss? I added to postcss.config.js but I can't find any information about defining the output file. I would like to use {name}.rtl.{ext} format, just don't know how to define it within the webpack or postcss config files.

webpack.config.js

 module.exports = {
        module: {
            rules: [
                {
                    test: /\.(sass|scss)$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader
                        }, {
                            loader: 'css-loader',
                            options: {
                                url: false,
                                importLoaders: 1
                            }
                        }, {
                            loader: 'sass-loader'
                        }, {
                            loader: 'postcss-loader'
                        }
                    ]
                }
            ]
        },
    };

postcss.config.js

module.exports = ({ file, options, env }) => ({
    plugins: {
        autoprefixer: {
            cascade: false
        },
        rtlcss: {}
    }
});

score 0 · Answer 1 · answered Nov 05 '22 at 00:42

You can create two Webpack configurations, one with all the rules that you need and a second one only for the CSS files, including the postcss-loader using the rtlcss plugin. Later on, in the webpack.config.js, you should return an array with these configurations.

Here you have an example. With this configuration two CSS will be generated, [name].ltr.css and [name].rtl.css. The last one is the CSS file with all the rules flipped using rtlcss:

Note: getCommon is a utility function to return the common configuration to avoid repeating the same code twice.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const rtlcss = require('rtlcss');

const getCommon = (dir) => ({
    mode: 'production',
    entry: './index.js',
    plugins: [
        new MiniCssExtractPlugin({
            filename: `styles/[name].${dir}.css`
        }),
    ]
});

module.exports = [
    {
        ...getCommon('ltr'),
        module: {
            rules: [
                /**
                 ** Here you can place the rules
                 ** for all the files that you want to process
                 ** apart from CSSs
                 **/
                {
                    test: /\.s(a|c)ss$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                        },
                        'css-loader',
                        'sass-loader'
                    ]
                }
            ]
        }     
    },
    {
        ...getCommon('rtl'),
        module: {
            rules: [
                {
                    test: /\.s(a|c)ss$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                        },
                        'css-loader',
                        {
                            loader: 'postcss-loader',
                            options: {
                                postcssOptions: {
                                    plugins: [
                                        rtlcss()
                                    ]
                                }
                            }
                        },
                        'sass-loader'
                    ]
                }
            ]
        }
        
    }
];

Separate RTL css file using postcss-loader and RTLCSS in webpack

1 Answers1