Usage Guide

Your guide on how to use and make the most out of RTLCSS

Time is Priceless, Caffeine is Not! Buy Me a Coffee ☕


RTLCSS operates with the following options:

autoRenamebooleanfalseApplies to CSS rules containing no directional properties, it will update the selector by applying String Map.
autoRenameStrictbooleanfalseEnsures autoRename is applied only if pair exists.
blacklistobject{}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}}.
cleanbooleantrueRemoves directives comments from output CSS.
greedybooleanfalseFallback value for String Map options.
processUrlsboolean or objectfalseApplies String Map to URLs. You can also target specific node types using an object literal. e.g. {"atrule": true, "decl": false}.
stringMaparrayThe default array of String Map
useCalcbooleanfalseWhen enabled, flips background-position, background-position-x and transform-origin expressed in length units using calc.
aliasesobject{}An object map of property-name Aliases, where keys are variable names and values are property names. e.g. {"aliases": {"--small-padding": "padding"}}.
processEnvbooleantrueWhen 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,
  "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