PostCSS-RTL
PostCSS-plugin for RTL-adaptivity
Generates RTL rules with flipped properties. Use one file for both directions!
Examples
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:
LTR+RTL output:
[ [ [ [
Animations
In case of flippable keyframes-animations it will be splitted to two
direction-based rules with -ltr
or -rtl
suffixes
LTR input:
@}
LTR+RTL output:
[ [ @} @}
Ignoring specific declarations
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 */
Block-syntax to ignore rules within scope:
/* rtl:begin:ignore *//* rtl:end:ignore */
Usage
-
Plug it to PostCSS
const postcss =const rtl =See PostCSS docs for examples for your environment.
-
Manage direction by switching between
dir="ltr"
anddir="rtl"
on<html>
element.
With Webpack:
moduleexports = module: rules: test: /\.css$/ use: loader: 'style-loader' loader: 'css-loader' loader: 'postcss-loader' options: { return options }
With Gulp:
gulp
Options
-
addPrefixToSelector
: Custom function for adding prefix to selector. Optional. Example:{return ` > ` // Make selectors like [dir=rtl] > .selector} -
prefixType
: Switches between adding attrinbutes and classes. Optional:attribute
(by default, recommended):.foo
=>[dir=rtl] .foo
class
(useful for IE6):.foo
=>.dir-rtl .foo
Thanks
Great thanks to projects: