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.