postcss-rtl-logical-properties v2.0.1
š postcss-rtl-logical-properties
⨠postcss-rtl-logical-properties is a PostCSS plugin that replaces physical CSS properties (left
, right
, margin-left
, padding-right
, etc.) with logical CSS properties (start
, end
, margin-inline-start
, etc.) for better RTL support with reduced CSS size.
š Features
- Converts physical direction properties to logical properties automatically.
- Reduces final CSS size by eliminating redundant LTR/RTL selector duplication.
- Compatible with
postcss-rtl
andrtlcss
for comprehensive RTL support. - ESM & CommonJS support for modern environments.
- Zero dependencies ā lightweight and fast.
š¦ Installation
npm install postcss-rtl-logical-properties --save-dev
š§ Usage
ESM Example
Add the plugin to your PostCSS configuration:
import postcss from "postcss";
import postcssRtlLogicalProperties from "postcss-rtl-logical-properties";
import postcssRTL from "postcss-rtl";
const css = `
.foo {
margin-left: 10px;
margin-right: 20px;
border-radius: 5px 10px 15px 20px;
}
`;
postcss([
plugin,
postcssRTL({
blacklist: plugin.ignoreDeclarationList,
}),
])
.process(css, { from: false })
.then((result) => {
console.log(result.css);
});
const postcssRtlLogicalProperties = require("postcss-rtl-logical-properties");
module.exports = {
plugins: [postcssRtlLogicalProperties()],
};
š Usage with postcss-rtl
For multi-direction support (LTR + RTL) using the [dir]
attribute:
import postcss from "postcss";
import plugin from "postcss-rtl-logical-properties";
import postcssRTL from "postcss-rtl";
const css = `
.foo {
margin-left: 10px;
margin-right: 20px;
border-radius: 5px 10px 15px 20px;
}
`;
postcss([plugin, postcssRTL({ blacklist: plugin.ignoreDeclarationList })])
.process(css, { from: false })
.then((result) => console.log(result.css));
ā” CommonJS Example (One-Way Direction Support)
const postcssRtlLogicalProperties = require("postcss-rtl-logical-properties");
const rtlcss = require("rtlcss");
const postcss = require("postcss");
const result = postcss([postcssRtlLogicalProperties(), rtlcss()]).process(`
.test {
padding-left: 10px;
border-right: 20px;
margin: 10px 1px 10px 29px;
}
`);
console.log(result.css);
š Plugin Options
Option | Description | Default |
---|---|---|
hDirection | Sets the horizontal writing direction (LTR/RTL) | LeftToRight |
vDirection | Sets the vertical writing direction (TTB/BTB) | TopToBottom |
šÆ Supported Properties
This plugin replaces the following physical properties with their logical counterparts:
- Padding:
padding-left
,padding-right
- Margin:
margin-left
,margin-right
- Border:
border-left
,border-right
,border-left-width
,border-right-width
,border-left-color
,border-right-color
,border-left-style
,border-right-style
- Radius:
border-bottom-left-radius
,border-bottom-right-radius
,border-top-left-radius
,border-top-right-radius
- Positioning:
left
,right
- Float & Clear:
float
,clear
- Text Alignment:
text-align
š Browser Support
ā Global support: ~89% (Can I Use)
ā Note: This plugin does not transform complex properties like transform
, background-position
, or border-radius
. For these, use rtlcss
.
š¤ Why Use This Plugin?
Many RTL processors like postcss-rtlcss
generate duplicate selectors with [dir]
attributes, significantly increasing CSS file size. This plugin eliminates redundant rules by leveraging native logical properties, reducing final CSS size while maintaining full RTL support.
š License
MIT License Ā© Artyom Gorlovetskiy
š Links
- š¦ NPM: postcss-rtl-logical-properties
- š GitHub: unbywyd/postcss-rtl-logical-properties