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:
LTR+RTL output:
Animations
Flippable keyframes-animations will be splitted to two
direction-based rules with -ltr
or -rtl
suffixes
LTR input:
@}
LTR+RTL output:
[ [ @} @}
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
Result
[ [
Property directives
To transform declaration property name use property directives:
/* rtl:as:{prop} */
- to process the property as {prop}. Usable for custom properties
Source
Result
[ [
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 */
Block-syntax to ignore rules within scope:
/* rtl:begin:ignore *//* rtl:end:ignore */
Value-syntax to ignore a single CSS declaration:
/*!
notation will work too:
/*! rtl: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}note: the returned string must include
prefix
to avoid an infinite recursion -
onlyDirection
: 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 them -
fromRTL
(default:false
): assume all styles are written in RTL direction and generate corresponding LTR styles for them -
blacklist
: 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: