{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install rtlcss"],"cli":{"name":"rtlcss","version":null}},"imports":["import rtlcss from 'rtlcss';\n// Or for CommonJS:\nconst rtlcss = require('rtlcss');","import postcss from 'postcss';\n// Or for CommonJS:\nconst postcss = require('postcss');","postcss([rtlcss(/* options */)]).process(cssString, { from: undefined });"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}