### 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.