### RTLCSS Configuration File Example Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Example of a .rtlcssrc or .rtlcss.json configuration file for persistent settings. ```json { "options": { "autoRename": true, "autoRenameStrict": false, "blacklist": {}, "clean": true, "greedy": false, "processUrls": true, "processEnv": true, "useCalc": false, "stringMap": [ { "name": "left-right", "priority": 100, "exclusive": false, "search": ["left", "Left", "LEFT"], "replace": ["right", "Right", "RIGHT"], "options": { "scope": "*", "ignoreCase": false } }, { "name": "ltr-rtl", "priority": 100, "exclusive": false, "search": ["ltr", "Ltr", "LTR"], "replace": ["rtl", "Rtl", "RTL"], "options": { "scope": "*", "ignoreCase": false } } ], "aliases": { "inset-inline-start": "left", "inset-inline-end": "right" } }, "plugins": [], "map": false } ``` -------------------------------- ### Show version Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Display the installed version of rtlcss. ```bash rtlcss --version ``` -------------------------------- ### HTML Structure for RTL Example Source: https://github.com/mohammadyounes/rtlcss/wiki/Why-make-a-complete-RTL-version-? The HTML structure used to demonstrate RTL CSS transformations. This includes a div with an image and a horizontal rule. ```html
Title

Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents
``` -------------------------------- ### CSS with Prefixed Rules Maintaining Order Source: https://github.com/mohammadyounes/rtlcss/wiki/Why-make-a-complete-RTL-version-? This CSS example shows the recommended approach of prefixing all rules with 'html[dir]' while maintaining their original order. This strategy ensures correct specificity, as the last rule with the same specificity wins. ```css html[dir="ltr"] body h1 { border-style: dashed dotted solid double; border-color: red green blue black; border-width: 1px 2px 3px 4px } html[dir="rtl"] body h1 { border-style: dashed double solid dotted; border-color: red black blue green; border-width: 1px 4px 3px 2px } html[dir="ltr"] body h1:not(:last-child) { border-color: green } html[dir="rtl"] body h1:not(:last-child) { border-color: green } ``` -------------------------------- ### Original CSS for Specificity Example Source: https://github.com/mohammadyounes/rtlcss/wiki/Why-make-a-complete-RTL-version-? The initial CSS rules used to illustrate specificity issues when combining LTR and RTL rules. It includes rules for 'body h1' and 'div h1'. ```css body h1 { border-style:dashed dotted solid double; border-color:red green blue black; border-width: 1px 2px 3px 4px; } div h1 { border-color:green; } ``` -------------------------------- ### Combined CSS with Prefixed RTL Rules Source: https://github.com/mohammadyounes/rtlcss/wiki/Why-make-a-complete-RTL-version-? A combined CSS example where RTL rules are prefixed with 'html[dir="rtl"]'. This method can lead to specificity problems, potentially overriding intended styles. ```css body h1 { border-style: dashed dotted solid double; border-color: red green blue black; border-width: 1px 2px 3px 4px } div h1{ border-color: green } html[dir="rtl"] body h1 { border-style: dashed double solid dotted; border-color: red black blue green; border-width: 1px 4px 3px 2px } ``` -------------------------------- ### Using RTLCSS as a PostCSS Plugin Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Integrate RTLCSS into your build tools by using it as a PostCSS plugin within a processing pipeline. This example demonstrates basic usage with options. ```javascript const postcss = require('postcss'); const rtlcss = require('rtlcss'); const ltrCSS = ` .card { float: left; margin-left: 1rem; padding: 10px 20px 10px 5px; border-radius: 4px 8px 8px 4px; box-shadow: 5px 0 10px rgba(0,0,0,0.1); text-align: left; } `; // Use as PostCSS plugin with options const options = { autoRename: false, clean: true }; postcss([rtlcss(options)]) .process(ltrCSS, { from: 'input.css', to: 'output.rtl.css' }) .then(result => { console.log(result.css); // Output: // .card { // float: right; // margin-right: 1rem; // padding: 10px 5px 10px 20px; // border-radius: 8px 4px 4px 8px; // box-shadow: -5px 0 10px rgba(0,0,0,0.1); // text-align: right; // } // Access warnings result.warnings().forEach(warn => { console.warn(warn.text); }); }); ``` -------------------------------- ### Modified CSS for Specificity Example Source: https://github.com/mohammadyounes/rtlcss/wiki/Why-make-a-complete-RTL-version-? This CSS snippet modifies the previous example by introducing a pseudo-class ':not(:last-child)' to demonstrate further specificity challenges in combined LTR/RTL CSS. ```css body h1 { border-style: dashed dotted solid double; border-color: red green blue black; border-width: 1px 2px 3px 4px } body h1:not(:last-child) { border-color: green } ``` -------------------------------- ### Create a Custom RTLCSS Plugin for Content Property Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Develop custom plugins to extend RTLCSS functionality. This example demonstrates a plugin that swaps arrow characters within the 'content' CSS property. ```javascript const rtlcss = require('rtlcss'); const postcss = require('postcss'); const contentPlugin = { name: 'content-arrows', priority: 50, directives: { control: {}, value: [] }, processors: [ { name: 'content-arrows', expr: /^content$/i, action(prop, value, context) { const arrowMap = { '\u2190': '\u2192', '\u2192': '\u2190', '\u21D0': '\u21D2', '\u21D2': '\u21D0', '\u25C0': '\u25B6', '\u25B6': '\u25C0' }; let newValue = value; for (const [search, replace] of Object.entries(arrowMap)) { newValue = newValue.split(search).join(replace); } return { prop, value: newValue }; } } ] }; const css = ` .arrow-left::before { content: "\2190"; } .arrow-right::after { content: "\2192"; } .nav { float: left; } `; const result = rtlcss.process(css, {}, [contentPlugin]); console.log(result); ``` -------------------------------- ### CSS Directional Auto Rename Example Source: https://github.com/mohammadyounes/rtlcss/wiki/Why-Auto-Rename? Demonstrates how RTLCSS transforms directional CSS selectors when the auto-rename option is enabled. ```CSS i.icon.angle.left:before { content: "\f104"; } i.icon.angle.right:before { content: "\f105"; } ``` ```CSS i.icon.angle.right:before { content: "\f104"; } i.icon.angle.left:before { content: "\f105"; } ``` -------------------------------- ### Show help Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Display the help message for the rtlcss CLI tool. ```bash rtlcss --help ``` -------------------------------- ### Configuring a Reusable PostCSS Processor with rtlcss.configure() Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Use `configure()` to create a PostCSS processor instance with predefined options, plugins, and hooks for processing multiple CSS files with consistent configuration. ```javascript const rtlcss = require('rtlcss'); const postcss = require('postcss'); // Create configured processor const processor = rtlcss.configure({ options: { autoRename: true, autoRenameStrict: true, processUrls: true, stringMap: [ { name: 'prev-next', priority: 100, search: ['prev', 'Prev', 'PREV'], replace: ['next', 'Next', 'NEXT'], options: { scope: '*', ignoreCase: false } } ] }, plugins: [], hooks: { pre(root, postcss) { console.log('Starting RTL transformation...'); }, post(root, postcss) { console.log('RTL transformation complete!'); } } }); // Process multiple CSS files const css1 = '.btn-prev { float: left; }'; const css2 = '.nav-left { margin-left: 10px; }'; const result1 = processor.process(css1); const result2 = processor.process(css2); console.log(result1.css); // .btn-next { float: right; } console.log(result2.css); // .nav-right { margin-right: 10px; } ``` -------------------------------- ### rtlcss.configure() Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Creates a reusable PostCSS processor instance with predefined options, plugins, and hooks for consistent processing across multiple files. ```APIDOC ## rtlcss.configure(config) ### Description Initializes a processor instance with specific configuration settings, plugins, and lifecycle hooks. ### Parameters #### Request Body - **config** (object) - Required - Configuration object containing options, plugins, and hooks. ### Request Example ```javascript const processor = rtlcss.configure({ options: { autoRename: true }, hooks: { pre: (root) => { console.log('Starting'); } } }); ``` ### Response #### Success Response (200) - **processor** (object) - A configured RTLCSS processor instance. ``` -------------------------------- ### Process directory with custom extension Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Use the CLI to process a directory of CSS files, specifying a custom extension for output files. ```bash rtlcss -d -e ".ar.css" ./src ./dist ``` -------------------------------- ### CSS Transformation with rtlcss.process() and Options Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Configure the `process()` function with options to control transformation behavior, such as auto-renaming selectors, URL processing, and greedy string matching. ```javascript const rtlcss = require('rtlcss'); const ltrCSS = ` .nav-left { float: left; } .ltr-content { direction: ltr; text-align: left; } .icon { background-image: url('/images/arrow-left.png'); } `; // With options const options = { autoRename: true, // Auto-rename selectors containing left/right/ltr/rtl greedy: true, // Match substrings (not just whole words) processUrls: true, // Process URLs for string map replacements clean: true, // Remove processing directives from output useCalc: false // Use calc() for flipping pixel values }; const rtlCSS = rtlcss.process(ltrCSS, options); console.log(rtlCSS); ``` -------------------------------- ### Basic CSS Transformation with rtlcss.process() Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Use the `process()` function to convert LTR CSS to RTL. It automatically handles directional properties, values, and transformations. ```javascript const rtlcss = require('rtlcss'); // Basic CSS transformation const ltrCSS = ` .sidebar { float: left; margin-left: 20px; padding: 10px 15px 10px 5px; text-align: left; border-left: 1px solid #ccc; } .arrow { transform: translateX(10px) rotate(45deg); background-position: left center; } `; const rtlCSS = rtlcss.process(ltrCSS); console.log(rtlCSS); ``` -------------------------------- ### Remove declarations and inject raw CSS Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Use /*rtl:remove*/ to delete content and /*rtl:raw:*/ to inject custom CSS into the RTL output. ```css /* Input LTR CSS */ /* Remove rule from RTL output */ /*rtl:remove*/ .ltr-exclusive { float: left; display: block; } /* Remove declaration from RTL output */ .partial-remove { display: block; /*rtl:remove*/ animation: slide-left 1s; padding: 10px; } /* Block-style remove */ .block-remove { /*rtl:begin:remove*/ animation: slide-left 1s; transform: translateX(100px); /*rtl:end:remove*/ color: blue; } /* Inject raw CSS for RTL only */ /*rtl:raw: .rtl-exclusive { float: right; direction: rtl; } */ .normal-rule { display: block; } /* Output RTL CSS */ /* .partial-remove { display: block; padding: 10px; } .block-remove { color: blue; } .rtl-exclusive { float: right; direction: rtl; } .normal-rule { display: block; } */ ``` -------------------------------- ### Basic RTLCSS CLI Usage Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Process CSS files using the RTLCSS command-line interface. Supports basic conversion, specifying output files, and using custom configuration files. ```bash rtlcss input.css ``` ```bash rtlcss input.css output.rtl.css ``` ```bash rtlcss -c .rtlcssrc.json input.css output.rtl.css ``` ```bash rtlcss -d ./src/styles ./dist/styles ``` -------------------------------- ### Rename selectors and override options Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Use /*rtl:rename*/ to force selector changes and /*rtl:options:{}*/ to modify transformation settings for specific blocks. ```css /* Input LTR CSS */ /* Force rename selectors */ /*rtl:rename*/ .icon-left, .text-ltr { display: inline-block; } /* Override options for specific section */ /*rtl:begin:options:{"autoRename":false}*/ .keep-left-name { float: left; /* Property flipped, selector preserved */ } /*rtl:end:options*/ /* Nested options override */ /*rtl:begin:options:{"autoRename":true}*/ .nav-left { margin-left: 10px; } /*rtl:begin:options:{"autoRename":true, "greedy":true}*/ .ultra-left { padding-left: 5px; } /*rtl:end:options*/ /*rtl:end:options*/ /* Output RTL CSS */ /* .icon-right, .text-rtl { display: inline-block; } .keep-left-name { float: right; } .nav-right { margin-right: 10px; } .urtla-right { padding-right: 5px; } */ ``` -------------------------------- ### RTLCSS Configuration Options Reference Source: https://context7.com/mohammadyounes/rtlcss/llms.txt JavaScript object defining common RTLCSS configuration options and their default values. ```javascript const rtlcss = require('rtlcss'); const options = { // Auto-rename selectors containing directional words // when no directional properties exist in the rule autoRename: false, // Only rename selectors if a matching pair exists // e.g., .nav-left renamed only if .nav-right also exists autoRenameStrict: false, // Disable specific directives // e.g., { rtlcss: { rename: true } } blocks /*rtl:rename*/ blacklist: {}, // Remove processing directives from output clean: true, // Match strings within words (not just whole words) // e.g., "ultra" matches "ltr" when true greedy: false, // Process URLs in string map replacements // Can be boolean or { atrule: true, decl: true } processUrls: false, // Process CSS environment variables (safe-area-inset-*) processEnv: true, // Use calc() when flipping length values // e.g., transform-origin: 10px → transform-origin: calc(100% - 10px) useCalc: false, // Define property aliases for non-standard property names aliases: {}, // Custom string replacement maps stringMap: [] }; const css = "\n.example {\n transform-origin: 10px center;\n left: 20px;\n}\n"; // With useCalc: true const result = rtlcss.process(css, { useCalc: true }); console.log(result); // Output: // .example { // transform-origin: calc(100% - 10px) center; // right: 20px; // } ``` -------------------------------- ### Configure String Map Replacements in RTLCSS Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Use string maps to define custom search and replace pairs for selectors and URLs. Configure priority, exclusivity, scope, and case sensitivity for replacements. ```javascript const rtlcss = require('rtlcss'); const css = ` .icon-prev { background: url('/icons/prev-arrow.png'); } .icon-next { background: url('/icons/next-arrow.png'); } .slide-forward { transform: translateX(10px); } .slide-backward { transform: translateX(-10px); } `; const options = { autoRename: true, processUrls: true, stringMap: [ { name: 'prev-next', priority: 100, exclusive: false, search: ['prev', 'Prev', 'PREV'], replace: ['next', 'Next', 'NEXT'], options: { scope: '*', ignoreCase: false } }, { name: 'forward-backward', priority: 90, search: 'forward', replace: 'backward', options: { scope: 'selector', greedy: true } } ] }; const rtlCSS = rtlcss.process(css, options); console.log(rtlCSS); ``` -------------------------------- ### Read from stdin Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Pipe CSS content to rtlcss via stdin for processing, redirecting the output to a file. ```bash cat input.css | rtlcss --stdin > output.rtl.css ``` -------------------------------- ### Silent mode (no warnings) Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Run rtlcss in silent mode to suppress warnings during processing. ```bash rtlcss -s input.css output.rtl.css ``` -------------------------------- ### Combined CSS with Separate Directional Rules Source: https://github.com/mohammadyounes/rtlcss/wiki/Why-make-a-complete-RTL-version-? This CSS demonstrates combining rules by separating directional declarations into distinct LTR and RTL rules. It highlights how specificity can still cause issues if not managed carefully. ```css body h1:not(:last-child) { border-color: green } html[dir="ltr"] body h1 { border-style: dashed dotted solid double; border-color: red green blue black; border-width: 1px 2px 3px 4px } html[dir="rtl"] body h1 { border-style: dashed double solid dotted; border-color: red black blue green; border-width: 1px 4px 3px 2px } ``` -------------------------------- ### PostCSS Plugin Usage Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Integrates RTLCSS into a PostCSS pipeline, allowing it to be used alongside other PostCSS plugins. ```APIDOC ## PostCSS Plugin Integration ### Description Use RTLCSS as a plugin within a PostCSS processing chain. ### Parameters #### Request Body - **options** (object) - Optional - Configuration options for the RTLCSS plugin. ### Request Example ```javascript postcss([rtlcss(options)]).process(ltrCSS, { from: 'input.css', to: 'output.rtl.css' }); ``` ### Response #### Success Response (200) - **result** (object) - PostCSS result object containing the transformed CSS and warnings. ``` -------------------------------- ### rtlcss.process() Source: https://context7.com/mohammadyounes/rtlcss/llms.txt The primary method for converting a CSS string from LTR to RTL. It handles directional properties, values, and transformations automatically. ```APIDOC ## rtlcss.process(css, [options]) ### Description Converts an LTR CSS string into an RTL CSS string. ### Parameters #### Request Body - **css** (string) - Required - The LTR CSS string to be transformed. - **options** (object) - Optional - Configuration object for transformation behavior (e.g., autoRename, greedy, processUrls, clean, useCalc). ### Request Example ```javascript const rtlCSS = rtlcss.process('.sidebar { float: left; }', { autoRename: true }); ``` ### Response #### Success Response (200) - **result** (string) - The transformed RTL CSS string. ``` -------------------------------- ### Original CSS for LTR Direction Source: https://github.com/mohammadyounes/rtlcss/wiki/Why-make-a-complete-RTL-version-? The base CSS rules for the HTML structure in a Left-to-Right (LTR) layout. Note the margin and float properties. ```css hr { margin:10px; } img { float:right; clear:both; } div { border:solid 10px gray; width:200px; height:200px; padding:2px; } div hr { margin-right:40px; } ``` -------------------------------- ### Implement Pre and Post Processing Hooks in RTLCSS Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Utilize hooks to modify the CSS Abstract Syntax Tree (AST) before and after RTLCSS processing. This allows for custom transformations, comment injection, or rule additions. ```javascript const rtlcss = require('rtlcss'); const pkg = require('rtlcss/package.json'); const css = ` .sidebar { float: left; margin-left: 20px; } `; const config = { options: { autoRename: true }, hooks: { pre(root, postcss) { root.walkRules(rule => { if (!rule.selector.includes(':')) { rule.parent.insertBefore( rule, postcss.comment({ text: 'rtl:rename' }) ); } }); }, post(root, postcss) { const header = postcss.comment({ text: `Generated by RTLCSS v${pkg.version} | RTL Stylesheet` }); root.prepend(header); const charset = postcss.atRule({ name: 'charset', params: '"UTF-8"' }); root.prepend(charset); } } }; const processor = rtlcss.configure(config); const result = processor.process(css); console.log(result.css); ``` -------------------------------- ### Ignore CSS rules and declarations Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Use /*rtl:ignore*/ to prevent specific rules or declarations from being flipped during transformation. ```css /* Input LTR CSS */ /* Ignore entire rule */ /*rtl:ignore*/ .ltr-only { float: left; text-align: left; margin-left: 10px; } /* Ignore specific declaration */ .mixed { float: left; /* Will be flipped to right */ /*rtl:ignore*/ text-align: left; /* Will remain left */ margin-left: 10px; /* Will be flipped to margin-right */ } /* Block-style ignore */ .code-block { /*rtl:begin:ignore*/ direction: ltr; text-align: left; unicode-bidi: embed; /*rtl:end:ignore*/ padding-left: 20px; /* Will be flipped */ } /* Output RTL CSS */ /* .ltr-only { float: left; text-align: left; margin-left: 10px; } .mixed { float: right; text-align: left; margin-right: 10px; } .code-block { direction: ltr; text-align: left; unicode-bidi: embed; padding-right: 20px; } */ ``` -------------------------------- ### Basic RTL CSS Overrides Source: https://github.com/mohammadyounes/rtlcss/wiki/Why-make-a-complete-RTL-version-? A straightforward approach to RTL transformation by overriding specific LTR properties. This method might not cover all cases, especially those involving cascaded or complex margin values. ```css /*override*/ body { direction:rtl; } img { float:left; } div hr { margin-left:40px; } ``` -------------------------------- ### Manipulate CSS property values Source: https://context7.com/mohammadyounes/rtlcss/llms.txt Use value directives to replace, prepend, append, or insert values specifically for RTL output. ```css /* Input LTR CSS */ /* Replace entire value */ .font-stack { font-family: /*rtl:"Droid Arabic Kufi", Tahoma*/"Helvetica", Arial; } /* Prepend to value */ .arabic-first { font-family: /*rtl:prepend:"Droid Arabic Kufi", */"Helvetica", Arial; } /* Append to value */ .arabic-fallback { font-family: /*rtl:append:, "Droid Arabic Kufi"*/"Helvetica", Arial; } /* Insert at position */ .font-insert { font-family: "Primary"/*rtl:insert:, "Arabic Font"*/, "Fallback"; } /* Output RTL CSS */ /* .font-stack { font-family: "Droid Arabic Kufi", Tahoma; } .arabic-first { font-family: "Droid Arabic Kufi", "Helvetica", Arial; } .arabic-fallback { font-family: "Helvetica", Arial, "Droid Arabic Kufi"; } .font-insert { font-family: "Primary", "Arabic Font", "Fallback"; } */ ``` -------------------------------- ### RTL CSS Override with Fixed Margin Reset Source: https://github.com/mohammadyounes/rtlcss/wiki/Why-make-a-complete-RTL-version-? This CSS snippet provides a fixed reset for the margin-right property, ensuring it matches the original LTR value. This approach aims for an exact mirror of the LTR version. ```css div hr { margin-left:40px; margin-right:10px; } ``` -------------------------------- ### RTL CSS Override with Margin Reset Source: https://github.com/mohammadyounes/rtlcss/wiki/Why-make-a-complete-RTL-version-? An attempt to correct RTL transformation by resetting the right margin. This demonstrates that simply setting margin-right to 0 might not be sufficient if a specific cascaded value is needed. ```css div hr { margin-left:40px; margin-right:0 /*or inherit*/; } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.