postcss-inline-rtl

0.9.8 • Public • Published

PostCSS Inline Rtl Build Status

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.

Package Sidebar

Install

npm i postcss-inline-rtl

Weekly Downloads

448

Version

0.9.8

License

MIT

Last publish

Collaborators

  • jakob101