This plugin is a PostCSS plugin that replaces supported horizontal direction properties (LTR/RTL) with logical CSS properties (start/end) to add RTL support.
npm install postcss-rtl-logical-propertiesleft, right, margin-left, padding-right, etc.) with logical CSS properties (start, end, margin-inline-start, etc.) for better RTL support with reduced CSS size.
postcss-rtl and rtlcss for comprehensive RTL support.
sh
npm install postcss-rtl-logical-properties --save-dev
`
š§ Usage
$3
Add the plugin to your PostCSS configuration:
`js
import postcss from "postcss";
import postcssRtlLogicalProperties from "postcss-rtl-logical-properties";
import postcssRTL from "postcss-rtl";
const css =
;
postcss([
plugin,
postcssRTL({
blacklist: plugin.ignoreDeclarationList,
}),
])
.process(css, { from: false })
.then((result) => {
console.log(result.css);
});
`
`js
const postcssRtlLogicalProperties = require("postcss-rtl-logical-properties");
module.exports = {
plugins: [postcssRtlLogicalProperties()],
};
`
$3
For multi-direction support (LTR + RTL) using the [dir] attribute:
`js
import postcss from "postcss";
import plugin from "postcss-rtl-logical-properties";
import postcssRTL from "postcss-rtl";
const css =
;
postcss([plugin, postcssRTL({ blacklist: plugin.ignoreDeclarationList })])
.process(css, { from: false })
.then((result) => console.log(result.css));
`
$3
`js
const postcssRtlLogicalProperties = require("postcss-rtl-logical-properties");
const rtlcss = require("rtlcss");
const postcss = require("postcss");
const result = postcss([postcssRtlLogicalProperties(), rtlcss()]).process(
);
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.