PostCSS-plugin for RTL-adaptivity
Generates RTL rules with flipped properties. Use one file for both directions!
In most cases all you need is flip property name or value
from left to right or change values order in full-valued shorthand
from top-right-bottom-left to top-left-bottom-right.
LTR input:
.foo {
float: right;
margin-left: 13px;
text-align: right;
font-size: 13px;
border-color: lightgray;
border-width: 2px 0 2px 2px;
border-style: solid dashed solid solid
}
.foo {
text-align: center;
}LTR+RTL output:
.foo {
font-size: 13px
}
[dir] .foo {
border-color: lightgray
}
[dir="ltr"] .foo {
float: right;
margin-left: 13px;
text-align: right;
border-width: 2px 0 2px 2px;
border-style: solid dashed solid solid
}
[dir="rtl"] .foo {
float: left;
margin-right: 13px;
text-align: left;
border-width: 2px 2px 2px 0;
border-style: solid solid solid dashed
}
[dir] .foo {
text-align: center
}In case of flippable keyframes-animations it will be splitted to two
direction-based rules with -ltr or -rtl suffixes
LTR input:
.foo {
animation: 1s slide 0s ease-in-out
}
@keyframes slide {
from {
transform: translate( -1000px )
}
to {
transform: translate( 0 )
}
}LTR+RTL output:
[dir="ltr"] .foo {
animation: 1s slide-ltr 0s ease-in-out
}
[dir="rtl"] .foo {
animation: 1s slide-rtl 0s ease-in-out
}
@keyframes slide-ltr {
from {
transform: translate( -1000px )
}
to {
transform: translate( 0 )
}
}
@keyframes slide-rtl {
from {
transform: translate( 1000px )
}
to {
transform: translate( 0 )
}
}To skip flipping specific declarations use some of supported directives:
/* rtl:ignore */- to ignore the following rule/* rtl:begin:ignore */and/* rtl:end:ignore */- to ignore rules within scope
Ignore one rule:
/* rtl:ignore */
.foo {
padding-left: 0
}Block-syntax to ignore rules within scope:
/* rtl:begin:ignore */
.foo {
padding-left: 0
}
.bar {
direction: ltr
}
/* rtl:end:ignore */-
Plug it to PostCSS
const postcss = require('postcss') const rtl = require('postcss-rtl') postcss([ rtl( options ) ])
See PostCSS docs for examples for your environment.
-
Manage direction by switching between
dir="ltr"anddir="rtl"on<html>element.
module.exports = {
module: {
rules: [ {
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'postcss-loader',
options: {
plugins: function () {
return [ require( 'postcss-rtl' )( options ) ]
}
}
}
]
} ]
}
}gulp.src( 'style.css' )
.pipe( postcss( [ rtl( options ) ]) )
.pipe( gulp.dest( './dest' ) )-
addPrefixToSelector: Custom function for adding prefix to selector. Optional. Example:function addPrefixToSelector ( selector, prefix ) { return `${prefix} > ${selector}` // Make selectors like [dir=rtl] > .selector }
-
prefixType: Switches between adding attrinbutes and classes. Optional:attribute(by default, recommended):.foo=>[dir=rtl] .fooclass(useful for IE6):.foo=>.dir-rtl .foo
Great thanks to projects:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent