Usage with Webpack

[kikoanis]

It's not an issue but rather a question on how to use it with Webpack and postcss. My scenario is to produce two different packages one with RTL and the other is with LTR and to request one of them based on interface switching.

Any idea would be highly appreciated!

[MohammadYounes]

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

@ai Your input is highly appreciated!

[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]
        };
    }
}

[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.

[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]

Cool ... Thanks!

[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!

[MohammadYounes]

Awesome 👍

[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.

[Seb33300]

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