{"library":"postcss-rtlcss","title":"PostCSS RTLCSS Plugin","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install postcss-rtlcss"],"cli":null},"imports":["import postcssRTLCSS from 'postcss-rtlcss';","import { Mode } from 'postcss-rtlcss/options';","import { Source } from 'postcss-rtlcss/options';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import postcss from 'postcss';\nimport postcssRTLCSS from 'postcss-rtlcss';\nimport { Mode, Source } from 'postcss-rtlcss/options';\n\nconst cssInput = `\n.box {\n    margin-left: 10px;\n    text-align: left;\n    border-right: 1px solid black;\n}\n.hero {\n    direction: ltr;\n    padding-right: 20px;\n}\n`;\n\nconst options = {\n    mode: Mode.combined, // Recommended: Generates both LTR and RTL rules with direction attributes\n    source: Source.ltr,  // Specifies that the input CSS is Left-To-Right\n    override: {\n        processOnHover: true // Example option, enables processing of hover states\n    }\n};\n\nasync function processCss() {\n    try {\n        const result = await postcss([\n            postcssRTLCSS(options)\n        ]).process(cssInput, { from: undefined }); // 'from: undefined' is good practice when processing a string\n        console.log('Generated RTL CSS:\\n', result.css);\n    } catch (error) {\n        console.error('Error processing CSS:', error);\n    }\n}\n\nprocessCss();","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}