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) { ... }
}
]

PREVNEXT