Registry / web-framework / postcss-rtlcss

postcss-rtlcss

library6.0.0jsnpmunverified

postcss-rtlcss is a PostCSS plugin designed to simplify the creation of Cascading Style Sheets (CSS) that support both Left-To-Right (LTR) and Right-To-Left (RTL) reading directions. It leverages the RTLCSS library internally to transform CSS rules. The current stable version is 6.0.0. The project maintains a regular release cadence, including minor versions for features and bug fixes, and major versions for significant underlying technical changes (such as transpilation target updates or Node.js engine requirements). Its key differentiators include the ability to generate a single CSS file containing rules for both directions (the recommended "combined mode") or a minimal override file, offering flexibility in implementing multilingual and internationalization efforts for web development. It integrates seamlessly into standard PostCSS workflows and build tools like Webpack.

web-framework

npm install postcss-rtlcss

github ↗package ↗

INSTALL

IMPORT

SIG · POSTCSS-RTLCSS

postcss-rtlcss

web-frameworkjavascriptv6.0.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.

postcssRTLCSS

✓ import postcssRTLCSS from 'postcss-rtlcss';

✗ const postcssRTLCSS = require('postcss-rtlcss');

As of v6.0.0, the package's bundle target is ES6, making ESM imports the preferred method in modern environments. While `require` might still work in some setups, ESM is recommended.

Mode

✓ import { Mode } from 'postcss-rtlcss/options';

✗ import { Mode } from 'postcss-rtlcss';

Enums like `Mode` and `Source` are exported as named exports from a dedicated subpath: `postcss-rtlcss/options`.

Source

✓ import { Source } from 'postcss-rtlcss/options';

✗ const { Source } = require('postcss-rtlcss');

Similar to `Mode`, the `Source` enum (and other options-related types) must be imported as a named export from the `postcss-rtlcss/options` subpath.

Demonstrates how to use `postcss-rtlcss` with PostCSS to transform LTR CSS into a combined LTR/RTL output, including option configuration for a practical example.

import postcss from 'postcss'; import postcssRTLCSS from 'postcss-rtlcss'; import { Mode, Source } from 'postcss-rtlcss/options'; const cssInput = ` .box { margin-left: 10px; text-align: left; border-right: 1px solid black; } .hero { direction: ltr; padding-right: 20px; } `; const options = { mode: Mode.combined, // Recommended: Generates both LTR and RTL rules with direction attributes source: Source.ltr, // Specifies that the input CSS is Left-To-Right override: { processOnHover: true // Example option, enables processing of hover states } }; async function processCss() { try { const result = await postcss([ postcssRTLCSS(options) ]).process(cssInput, { from: undefined }); // 'from: undefined' is good practice when processing a string console.log('Generated RTL CSS:\n', result.css); } catch (error) { console.error('Error processing CSS:', error); } } processCss();

Debug

Known issues

breakingVersion 6.0.0 changed the library's transpilation target from `es5` to `es6`. While this generally improves performance and compatibility with modern JS runtimes, environments requiring strict `es5` output or older JavaScript engines may experience compatibility issues.

fix

Ensure your project's JavaScript runtime environment or build configuration (e.g., Babel presets) supports ES6 (ECMAScript 2015) features. If not, consider locking to a `postcss-rtlcss` version prior to 6.0.0 or configuring your build process to transpile ES6 output further down.

affects: >=6.0.0

breakingThe minimum Node.js version required for `postcss-rtlcss` was updated to `18.0.0` or higher with the v6.0.0 release. Running on older Node.js versions will result in an error.

fix

Upgrade your Node.js environment to version 18.0.0 or newer. Alternatively, if upgrading Node.js is not feasible, downgrade `postcss-rtlcss` to a compatible version (e.g., `5.x.x`).

affects: >=6.0.0

gotchaAn incompatible version of `postcss` peer dependency can lead to runtime errors or unexpected behavior. `postcss-rtlcss` v6.0.0 specifies `postcss: ^8.4.21`.

fix

Ensure your project uses a `postcss` version compatible with the peer dependency range specified in `postcss-rtlcss`. Install `postcss@^8.4.21` if you encounter issues.

affects: >=6.0.0

Errors

Common errors & fixes

TypeError: require(...) is not a function

Attempting to use `require()` for `postcss-rtlcss` in an environment that enforces ESM, or when the package's CommonJS export isn't correctly resolved.

fix

Switch to ESM import syntax: `import postcssRTLCSS from 'postcss-rtlcss';`. Ensure your project's module system is configured for ESM.

Cannot find module 'postcss-rtlcss/options'

Incorrect import path for `Mode` or `Source` enums, or attempting to `require` them as a named CommonJS export from the main package path.

fix

Use the correct ESM named import from the subpath: `import { Mode, Source } from 'postcss-rtlcss/options';`.

Error: Minimum Node.js version 18.0.0 is required. You are running X.Y.Z.

Running `postcss-rtlcss` version 6.0.0 or higher on a Node.js environment older than version 18.

fix

Update your Node.js installation to version 18.0.0 or a later compatible version. Check your `package.json` `engines` field and CI/CD configurations.

Upgrade

Version history

6.0.0latest on npm

Audit

Dependencies

postcssrequiredCore functionality for processing CSS requires a PostCSS peer dependency.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/elchininet/postcss-rtlcss ↗

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