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

/*  Normal code */
.class {
  color: red;
} 

/*  => no change */

.class{
  border-left: 10px;
  color: red;
}

/*  Converts to: */
html[dir='ltr'] .class {
  border-left: 10px
}
html[dir='rtl'] .class {
  border-right: 10px
}
.class {
  color: red;
}

.class {
  margin-left: 10px;
}

/*  converts to: */
html[dir='ltr'] .class {
  margin-left: 10px
}
html[dir='rtl'] .class {
  margin-right: 10px
}

/*  Edge case (cancelling LTR/RTL values) */
.class {
  border-left: 10px;
  border: none; /*  Notice this doesn't change LTR-RTL */
}

/*  converts to: */
html[dir] .class {
  border: none;
}
html[dir='ltr'] .class {
  border-left: 10px;
}
html[dir='rtl'] .class {
  border-right: 10px;
}

/*  Edge case (RTL-invariant) + CSS modules */
.class {
  composes: otherClass;
  border: none; /*  Notice this doesn't change LTR-RTL */
}

/*  Converts to: */
.class {
    composes: otherClass;
}
html[dir] .class {
  border: none;
}

Usage

postcss([ require('postcss-inline-rtl') ])

Cred

+1 for rtlcss, as this wouldn't exist without it!

See PostCSS docs for examples for your environment.

0.9.8

Bumped the versions of dependencies, added a bunch of tests and fixed a bug with rtl animations.

0.9.2

Changed the initial test to check if the specific selector already contains dir values (and ignore that selector).

0.9.0

Now supporting rtlcss directives like /rtl: … /. Removed props to convert.

0.8.2

Updated rtlcss version and some props to convert.

0.8.0

Optimized to not generate too much noise

0.7.0

The initial commit