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