README
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.