lazabogdan/postcss-inline-rtl

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

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.