Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
postcss-rtl
Advanced tools
Changelog
[2.0.0] - 2022-11-23 (#84)
Readme
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
}
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 )
}
}
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 valueSource
.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;
}
To transform declaration property name use property directives:
/* rtl:as:{prop} */
- to process the property as {prop}. Usable for custom properties (uses rtlcss aliases under the hood)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;
}
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 scopeIgnore 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
}
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"
and dir="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
}
note: the returned string must include prefix
to avoid an infinite recursion
onlyDirection
: generate only one-direction version: ltr
or rtl
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
'data-my-custom-dir'
(for attribute prefixType): .foo
=> [data-my-custom-dir=rtl] .foo
'my-custom-dir'
(for class prefixType): .foo
=> .my-custom-dir-rtl .foo
removeComments
(default: true
): remove rtl:*
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']
aliases
: check rtlcss aliases documentation
Example:
{
`--spacing`: 'padding'
}
Great thanks to projects:
FAQs
PostCSS plugin for RTL-optimizations
The npm package postcss-rtl receives a total of 26,662 weekly downloads. As such, postcss-rtl popularity was classified as popular.
We found that postcss-rtl demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.