{"id":11966,"library":"rtlcss","title":"RTLCSS: LTR to RTL CSS Transformer","description":"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.","status":"active","version":"4.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/MohammadYounes/rtlcss","tags":["javascript","rtl","css","ltr","rtlcss","framework","style","mirror","flip"],"install":[{"cmd":"npm install rtlcss","lang":"bash","label":"npm"},{"cmd":"yarn add rtlcss","lang":"bash","label":"yarn"},{"cmd":"pnpm add rtlcss","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"RTLCSS functions as a PostCSS plugin and requires PostCSS to process CSS files.","package":"postcss","optional":false}],"imports":[{"note":"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.","symbol":"rtlcss","correct":"import rtlcss from 'rtlcss';\n// Or for CommonJS:\nconst rtlcss = require('rtlcss');"},{"note":"PostCSS itself is imported as a default export in most configurations.","wrong":"import { postcss } from 'postcss';","symbol":"postcss","correct":"import postcss from 'postcss';\n// Or for CommonJS:\nconst postcss = require('postcss');"},{"note":"RTLCSS is a PostCSS plugin; it must be used as part of a PostCSS processing chain, not directly on a CSS string.","wrong":"rtlcss.process(cssString);","symbol":"PostCSS plugin usage","correct":"postcss([rtlcss(/* options */)]).process(cssString, { from: undefined });"}],"quickstart":{"code":"import postcss from 'postcss';\nimport rtlcss from 'rtlcss';\n\nconst ltrCss = `\n  .container {\n    text-align: left;\n    margin-left: 10px;\n    padding: 5px 10px 15px 20px;\n    border-radius: 5px 10px 0 0;\n  }\n  /*rtl:ignore*/\n  .no-flip {\n    left: 0; /* Should not be flipped */\n  }\n  /*rtl:begin:ignore*/\n  .block-ignore {\n    right: 0;\n    left: 10px;\n  }\n  /*rtl:end:ignore*/\n  .flex-justify {\n    justify-content: flex-start;\n  }\n`;\n\nasync function transformCss() {\n  try {\n    const result = await postcss([rtlcss({\n      autoRename: true, // Example option\n      processUrls: true // Example option\n    })]).process(ltrCss, { from: undefined });\n    console.log('LTR CSS:\\n', ltrCss);\n    console.log('\\nRTL CSS:\\n', result.css);\n  } catch (error) {\n    console.error('Error transforming CSS:', error);\n  }\n}\n\ntransformCss();","lang":"typescript","description":"Demonstrates how to use `rtlcss` as a PostCSS plugin to transform an LTR CSS string into an RTL equivalent, including basic options and directives."},"warnings":[{"fix":"Upgrade Node.js to version 12.0.0 or higher. Ensure PostCSS is installed at version 8 or later in your project dependencies.","message":"Version 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.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Refer to the RTLCSS v2.0 documentation for updated configuration schemas and option definitions when migrating from v1.x.","message":"When 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.","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"fix":"Always use `rtlcss` via `postcss([rtlcss()])` or similar PostCSS integration methods.","message":"RTLCSS 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Use `import postcss from 'postcss';` for ESM or `const postcss = require('postcss');` for CommonJS.","cause":"Attempting to import `postcss` incorrectly in an ESM context (e.g., `import { postcss } from 'postcss';`) when it's typically a default export.","error":"TypeError: (0, _postcss.default) is not a function"},{"fix":"Install PostCSS: `npm install postcss` or `yarn add postcss`.","cause":"The `postcss` package, a peer dependency for `rtlcss`, is not installed in the project.","error":"Error: Cannot find module 'postcss'"},{"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.","cause":"Running a build process involving `rtlcss` on an unsupported Node.js version, especially after upgrading to `rtlcss` v3.0 or later.","error":"Error: Command failed with exit code 1"}],"ecosystem":"npm"}