Extending RTLCSS

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

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

Writing an RTLCSS Plugin

Add more functionality to RTLCSS, or even change it’s entire behavior. In fact, RTLCSS core functionailty is written as a plugin, and it can be replaced by adding your own plugin with the same name.

A plugin is an object, that defines the plugin properties :

// minimal plugin definition
  'name': 'sample plugin',
  'priority': 100,
  'directives': {
    'control': {},
    'value': []
  'processors': []

The attributes are:

  • name {string}

    Name of the plugin

  • priority {number}

    The priority is used to sort the plugins array before processing input CSS, the core RTLCSS plugin has a priority value of 100.

  • directives {object}

    The object holding both control & value directives.

    • control {object}

      An object map of control directives where keys are the names and values are the control directives definition object.

      The key itself act as the trigger of the directive.

      'control': {
        // triggered via /*rtl:custom*/ or /*rtl:begin:custom*/ ... /*rtl:end:custom*/
        'custom': {
    • value {array}

      An array of value directives where items are value directive definition object.

      The name itself act as the trigger of the directive.

      'value': [
            // triggered via /*rtl:custom*/ inside declaration values
            'name': 'custom',
            'action': function (decl, expr, context) { ... }
  • processors {array}

An array of declaration processors where items are declaration processor definition object.

These are triggered by matching CSS properties against processor expr attribute.

'processors': [
     // triggered via content property
     'expr': /content/i,
     'action': function (prop, value, context) { ... }