rtlcss

library4.3.0jsnpmunverified

RTLCSS is a robust framework for transforming Left-To-Right (LTR) Cascading Style Sheets (CSS) into Right-To-Left (RTL) stylesheets. It enables developers to internationalize web interfaces for RTL languages with minimal manual effort by automatically flipping directional properties (e.g., `left` to `right`, `margin-left` to `margin-right`). The current stable version is 4.3.0, with a focus on stability and compatibility. It operates as a PostCSS plugin, leveraging PostCSS's AST manipulation capabilities, and supports various control directives and a plugin architecture for custom transformations. Key differentiators include its extensive directive support for fine-grained control over transformations, a flexible plugin API, and a clear upgrade path across major versions, primarily driven by PostCSS updates.

serialization

npm install rtlcss

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · RTLCSS

rtlcss

serializationjavascriptv4.3.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

rtlcss

✓ import rtlcss from 'rtlcss'; // Or for CommonJS: const rtlcss = require('rtlcss');

The primary export is a function that returns a PostCSS plugin. RTLCSS itself is typically imported as a default, or the direct result of a CommonJS require.

postcss

✓ import postcss from 'postcss'; // Or for CommonJS: const postcss = require('postcss');

✗ import { postcss } from 'postcss';

PostCSS itself is imported as a default export in most configurations.

PostCSS plugin usage

✓ postcss([rtlcss(/* options */)]).process(cssString, { from: undefined });

✗ rtlcss.process(cssString);

RTLCSS is a PostCSS plugin; it must be used as part of a PostCSS processing chain, not directly on a CSS string.

Demonstrates how to use `rtlcss` as a PostCSS plugin to transform an LTR CSS string into an RTL equivalent, including basic options and directives.

import postcss from 'postcss'; import rtlcss from 'rtlcss'; const ltrCss = ` .container { text-align: left; margin-left: 10px; padding: 5px 10px 15px 20px; border-radius: 5px 10px 0 0; } /*rtl:ignore*/ .no-flip { left: 0; /* Should not be flipped */ } /*rtl:begin:ignore*/ .block-ignore { right: 0; left: 10px; } /*rtl:end:ignore*/ .flex-justify { justify-content: flex-start; } `; async function transformCss() { try { const result = await postcss([rtlcss({ autoRename: true, // Example option processUrls: true // Example option })]).process(ltrCss, { from: undefined }); console.log('LTR CSS:\n', ltrCss); console.log('\nRTL CSS:\n', result.css); } catch (error) { console.error('Error transforming CSS:', error); } } transformCss();

rtlcss --version

Debug

Known issues

breakingVersion 3.0.0 introduced a breaking change by upgrading to PostCSS 8 and dropping support for Node.js versions 6.x, 8.x, 11.x, and 13.x. Users on these Node.js versions or older PostCSS versions will experience compatibility issues.

fix

Upgrade Node.js to version 12.0.0 or higher. Ensure PostCSS is installed at version 8 or later in your project dependencies.

affects: >=3.0.0

breakingWhen upgrading from version 1.0.0 to 2.0.0, the options and configuration settings underwent significant changes. While CSS directives remain backward-compatible, direct programmatic configuration will likely need updates.

fix

Refer to the RTLCSS v2.0 documentation for updated configuration schemas and option definitions when migrating from v1.x.

affects: >=2.0.0 <3.0.0

gotchaRTLCSS is a PostCSS plugin. Attempting to use it directly on CSS strings without integrating it into a PostCSS processing pipeline will result in errors or unexpected behavior.

fix

Always use `rtlcss` via `postcss([rtlcss()])` or similar PostCSS integration methods.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: (0, _postcss.default) is not a function

Attempting to import `postcss` incorrectly in an ESM context (e.g., `import { postcss } from 'postcss';`) when it's typically a default export.

fix

Use `import postcss from 'postcss';` for ESM or `const postcss = require('postcss');` for CommonJS.

Error: Cannot find module 'postcss'

The `postcss` package, a peer dependency for `rtlcss`, is not installed in the project.

fix

Install PostCSS: `npm install postcss` or `yarn add postcss`.

Error: Command failed with exit code 1

Running a build process involving `rtlcss` on an unsupported Node.js version, especially after upgrading to `rtlcss` v3.0 or later.

fix

Ensure your Node.js environment meets the minimum requirement of `node >=12.0.0` as specified in `rtlcss` v3.0.0 and above. Upgrade Node.js if necessary.

Upgrade

Version history

4.3.0latest on npm

Audit

Dependencies

postcssrequiredRTLCSS functions as a PostCSS plugin and requires PostCSS to process CSS files.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/MohammadYounes/rtlcss ↗

packagehttps://www.npmjs.com/package/rtlcss ↗

homepagehttp://rtlcss.com/ ↗