CODEWITHSUNDEEP
angularright-to-leftwebpack-2
Sean12
Sean12

Reputation: 847

Webpack 2 Flipping css from LTR to RTL not working

I have an Angular2 application and use npm scripts and Webpack2 for my AOT builds and to create language specific bundles. I have tried using:

{ test: /\.css$/, loader: 'style-loader!rtl-css-loader', exclude: /node_modules/ }

in my webpack Arabic configuration file. My components set the viewEncapsulation to Emulated. The "rtl-css-loader" does flip the css rules in my components CSS files, however when checking in the browser, I see two sets of style rules (CSS classes) being applied. The emulated shadow DOM (original LTR) and the RTL non shadow DOM, which was generated by the rtl loader. The shadow DOM class takes precedence and overrides the RTL class which was generated by rtl-css-loader.

Is there a way to:

I also tried using "ExtractTextPlugin" in conjunction with "WebpackRTLPlugin" to create an external RTL css file and while I can generate an external RTL style file, the original styles for the component (LTR) are still attached to the HTML page and override the generated styles in the rtl.css file as they have higher precedence.

I'm wondering if anyone else has run into these issues and has come up with a solution?

Any help will be appreciated.

Upvotes: 0

Views: 1148

Answers (1)

Sean12
Sean12

Reputation: 847

After spending sometime on finding the solution I came up with the following approach. I'm posting it here so if someone has a similar issue, this can be of help.

  • Remove rtl-css-loader from webpack.config file and just use "css-loader" as it is used for LTR builds and bundle creation

  • During the build process (using npm scripts), use rtlcss npm package to generate the rtl.css files. (https://github.com/MohammadYounes/rtlcss)

  • Rename the original css files to something with no ".css" extension so webpack "css-loader" would ignore them during build and bundling process

  • Run RTL Angular2 build as you would LTR builds (using webpack and css-loader) to generate the desired bundles.

  • After the build is done, do a clean up by removing the rtl-css files (which were renamed as .css). You can use an npm package such as "del-cli". (https://www.npmjs.com/package/del-cli)

  • Restore the original css files' names to the names that they had when we started the process. This is so if another build is run after the RTL build, it will use the original LTR css files.

Essentially, in this process we do the flipping of the css using npm packages as oppose to using webpack RTL loaders and plugins. This approach also allows us to have proper viewEncapsulation in our Angular 2 components.

Upvotes: 1

Related Questions