postcss-inline-rtl

PostCSS plugin to inline the minimal amount of RTL CSS you need.

Requirement

Always have a dir="ltr" or dir="rtl" in your HTML tag.

Examples

```css / Normal code / .class { color: red; } / => no change / ``` ```css .class{ border-left: 10px; color: red; } / Converts to: / htmldir='ltr' .class { border-left: 10px } htmldir='rtl' .class { border-right: 10px } .class { color: red; } ``` ```css .class { margin-left: 10px; } / converts to: / htmldir='ltr' .class { margin-left: 10px } htmldir='rtl' .class { margin-right: 10px } ``` ```css / Edge case (cancelling LTR/RTL values) / .class { border-left: 10px; border: none; / Notice this doesn't change LTR-RTL / } / converts to: / htmldir .class { border: none; } htmldir='ltr' .class { border-left: 10px; } htmldir='rtl' .class { border-right: 10px; } ``` ```css / Edge case (RTL-invariant) + CSS modules / .class { composes: otherClass; border: none; / Notice this doesn't change LTR-RTL / } / Converts to: / .class {

composes: otherClass;

} htmldir .class { border: none; } ```

Usage

```js postcss( require('postcss-inline-rtl') ) ```

Cred

+1 for rtlcss, as this wouldn't exist without it! See PostCSS docs for examples for your environment.