Extending RTLCSS

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

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