Directive `/* rtl:ignore */` not working

[Seb33300]

I am trying to build a custom RTL Bootstrap 5 (version 5 is compatible with RTLCSS) unsing webpack with your tool but it looks like the /*rtl:ignore*/ directive is ignored.

For example, this line: https://github.com/twbs/bootstrap/blob/f61a0218b36d915db80dc23635a9078e98e2e3e0/scss/_reboot.scss#L278

Should always render direction: ltr; but in my project, webpack-rtl-plugin converts it to direction: rtl;.

Am I missing something?

As indicated in the readme, in my project I added const WebpackRTLPlugin = require('webpack-rtl-plugin') at the top of my webpack.config.js. And then, added the plugin new WebpackRTLPlugin() to webpeck.

Please note that if I remove the line to add WebpackRTLPlugin plugin, the result is a css file containing: direction: ltr /* rtl:ignore */;

[Seb33300]

Just found the issue.

This is because Bootstrap use /* rtl:ignore */ instead of /*rtl:ignore*/ and this is a bug fixed in RTLCSS 2.4.1

This plugin is locked to RTLCSS 2.4.0 but if I force to use 2.4.1, the issue disappear.

You should consider to update your package.json to not use locked version of dependencies (^2.4.0 instead of 2.4.0).

[dubisoft-solutions]

I still have the same problem, any ideas how to fix it?