Your guide on how to use and make the most out of RTLCSS
RTLCSS operates with the following options:
Option | Type | Default | Description |
---|---|---|---|
autoRename | boolean | false | Applies to CSS rules containing no directional properties, it will update the selector by applying String Map. |
autoRenameStrict | boolean | false | Ensures autoRename is applied only if pair exists. |
blacklist | object | {} | An object map of disabled plugins directives, where keys are plugin names and value are object hash of disabled directives. e.g. {"rtlcss":{"config":true}} . |
clean | boolean | true | Removes directives comments from output CSS. |
greedy | boolean | false | Fallback value for String Map options. |
processUrls | boolean or object | false | Applies String Map to URLs. You can also target specific node types using an object literal. e.g. {"atrule": true, "decl": false} . |
stringMap | array | The default array of String Map | |
useCalc | boolean | false | When enabled, flips background-position , background-position-x and transform-origin expressed in length units using calc . |
aliases | object | {} | An object map of property-name Aliases, where keys are variable names and values are property names. e.g. {"aliases": {"--small-padding": "padding"}} . |
processEnv | boolean | true | When disabled, prevents flipping agent-defined environment variables safe-area-inset-left , safe-area-inset-right . |
The following represents the complete options object:
{
"autoRename": false,
"autoRenameStrict": false,
"blacklist":{},
"clean": true,
"greedy": false,
"processUrls": false,
"stringMap": [
{
"name" : "left-right",
"priority": 100,
"search" : ["left", "Left", "LEFT"],
"replace" : ["right", "Right", "RIGHT"],
"options" : {
"scope" : "*",
"ignoreCase" : false
}
},
{
"name" : "ltr-rtl",
"priority": 100,
"search" : ["ltr", "Ltr", "LTR"],
"replace" : ["rtl", "Rtl", "RTL"],
"options" : {
"scope" : "*",
"ignoreCase" : false
}
}
],
"useCalc": false,
"aliases": {},
"processEnv": true
}