postcss-onlyrtl v1.0.6
PostCSS-ONLY-RTL
PostCSS-plugin for RTL-adaptivity
Generates RTL rules with flipped properties. Use one file for both directions!
Originally forked from PostCSS-RTL
Examples
#processing-directives
Simple properties
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:
LTR will remain same, only RTL will have a new attribute.
[dir="rtl"] .foo {
float: left;
text-align: right;
}
Animations
Flippable keyframes-animations 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 )
}
}
Value directives
To transform declaration values use value directives:
/* rtl:prepend:{value} */
- to prepend the {value} before the current value/* rtl:append:{value} */
- to append the {value} after the current value/* rtl:{value} */
- to replace the current value with the supplied value
Source
.foo {
font-weight: bold;
font-family: "Droid Sans", "Helvetica Neue", Arial, sans-serif/*rtl:prepend:"Droid Arabic Kufi",*/;
transform: rotate(45deg)/* rtl:append: scaleX(-1) */;
flex-direction: row/* rtl: row-reverse */;
}
Result
.foo {
font-weight: bold;
}
[dir=ltr] .foo {
font-family: "Droid Sans", "Helvetica Neue", Arial, sans-serif/*rtl:prepend:"Droid Arabic Kufi",*/;
transform: rotate(45deg)/* rtl:append: scaleX(-1) */;
flex-direction: row/* rtl: row-reverse */;
}
[dir=rtl] .foo {
font-family: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
transform: rotate(45deg) scaleX(-1);
flex-direction: row-reverse;
}
Property directives
To transform declaration property name use property directives:
/* rtl:as:{prop} */
- to process the property as {prop}. Usable for custom properties
Source
:root {
--padding /* rtl:as:padding */: 1rem 2rem 3rem 4rem;
}
Result
[dir=ltr]:root {
--padding /* rtl:as:padding */: 1rem 2rem 3rem 4rem;
}
[dir=rtl]:root {
--padding /* rtl:as:padding */: 1rem 4rem 3rem 2rem;
}
Ignoring specific declarations
To skip flipping specific declarations use some of supported directives:
/* rtl:ignore */
- to ignore the following rule or the containing declaration/* 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 */
Value-syntax to ignore a single CSS declaration:
.foo {
margin-left: 20px;
padding-right: 20px /* rtl:ignore */;
}
/*!
notation will work too:
/*! rtl:ignore */
.foo {
padding-left: 0
}
Usage
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.
With Webpack:
module.exports = {
module: {
rules: [ {
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'postcss-loader',
options: {
plugins: function () {
return [ require( 'postcss-rtl' )( options ) ]
}
}
}
]
} ]
}
}
With Gulp:
gulp.src( 'style.css' )
.pipe( postcss( [ rtl( options ) ]) )
.pipe( gulp.dest( './dest' ) )
Options
addPrefixToSelector
: Custom function for adding prefix to selector. Optional. Example:function addPrefixToSelector ( selector, prefix ) { return `${prefix} > ${selector}` // Make selectors like [dir=rtl] > .selector }
note: the returned string must include
prefix
to avoid an infinite recursiononlyDirection
: generate only one-direction version:ltr
orrtl
prefixType
: Switches between adding attributes and classes. Optional:attribute
(by default, recommended):.foo
=>[dir=rtl] .foo
class
(useful for IE6):.foo
=>.dir-rtl .foo
prefix
: Uses a custom string, instead of 'dir', for the added attribute and class selectors- e.g.
'data-my-custom-dir'
(for attribute prefixType):.foo
=>[data-my-custom-dir=rtl] .foo
- e.g.
'my-custom-dir'
(for class prefixType):.foo
=>.my-custom-dir-rtl .foo
- e.g.
removeComments
(default:true
): removertl:*
comments after process themfromRTL
(default:false
): assume all styles are written in RTL direction and generate corresponding LTR styles for themblacklist
: the array of css properties which processing will be ignored Example:['padding-left', 'padding-right']
whitelist
: the array of css properties which (and only them) will be processed Example:['margin', 'border-color']
Thanks
Great thanks to projects and my dear friend:
#processing-directives