Usage with Webpack about rtlcss

[romainberger]

Hi, I've started a webpack plugin to produce a second bundle processed with rtlcss: https://github.com/romainberger/webpack-rtl-plugin (available on npm). It's meant to be used with the extract-text-webpack-plugin.

Hope this helps you, feedback appreciated!

[romainberger]

Small update if people are still interested, I've made a rtl-css-loader for webpack to replace the basic css-loader so you can have rtl css with the style-loader. Can be useful if you're using the style-loader for dev.

[ai]

OK. For example, you have two bundles: main.css and main.rtl.css.

Then, import main.css in main.rtl.css:

@import "../main.css";

And process *.rtl.css throw PostCSS with RTLCSS:

module.exports = {
    module: {
        loaders: [
            {
                test:   /\.rtl\.css$/,
                loader: "style-loader!css-loader!postcss-loader?pack=rtl"
            },
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    postcss: function () {
        return {
            defaults: [autoprefixer, precss],
            rtl:  [rtlcss, autoprefixer, precss]
        };
    }
}

[loick]

I have the exact same question actually but the answer of creating another rtl file is a bit weird actually. By using the extract-text-webpack-plugin, we should be able to generate the main.ltr.css file and the main.rtl.css file without even duplicating anything.

I will digg into it

[MohammadYounes]

I haven't used Webpack before! Did you consider https://github.com/postcss/postcss-loader ?

@ai Your input is highly appreciated!

[ai]

But I am not really webpack user (for now, I prefer Browserify, because webpack API is ugly). So I can only show you a start point.

[MohammadYounes]

Thanks @ai

[kikoanis]

Thanks. I get the idea except I feel that importing main.css within main.rtl is a bit redundant and I guess it is a work around webpack that will only generate one file per entry. I will try to play with this a little bit and see how it goes and report back here. thanks again both.

[MohammadYounes]

Closing this as it's out of scope, but feel free to post here if you figure out a solution.

[MohammadYounes]

Cool ... Thanks!

[MohammadYounes]

Awesome 👍

[Seb33300]

Hello, anything new related to rtlcss usage with webpack?
Any easy way to do it without installing a third party plugin?