2.0.1 • Published 4 months ago

postcss-rtl-logical-properties v2.0.1

Weekly downloads
-
License
ISC
Repository
github
Last release
4 months ago

šŸŒ postcss-rtl-logical-properties

NPM Version License GitHub

✨ 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 and rtlcss 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

OptionDescriptionDefault
hDirectionSets the horizontal writing direction (LTR/RTL)LeftToRight
vDirectionSets 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

2.0.1

4 months ago

2.0.0

4 months ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago