Extending RTLCSS

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

Declaration Processors

Declaration processors are triggered by CSS property names, like padding, border-width …etc.

.example {
padding:5px 10px 15px 20px;
margin:5px 10px 15px 20px;
border-style:dotted dashed double solid;
border-width:1px 2px 3px 4px;
border-color:red green blue black;
box-shadow: -1em 0 0.4em gray, 3px 3px 30px black;

§Declaration processor definition object

The definition of a property processor has the following attributes:

  • expr {RegExp}

    A Regular expression object that will be matched against the declaration property name.

    // match content property
    'expr': /content/i
  • action {function}

    The action function is responsible for processing the declaration. It is executed each time a match is found.

    'action': function (prop, value, context) { ... }
    • prop {string}: The CSS property name.
    • value {string}: The CSS property raw value, Note that comments in the raw value will be replaced by the Unicode Character 'REPLACEMENT CHARACTER' (U+FFFD) � (this is to preserve original formatting and simplify pattern matching).
    • context {context}: The current RTLCSS context object.

    It must return an object containing two keys (prop and value).

    return { 'prop': prop, 'value': value }


// match any CSS property ending in 'transition' or 'transition-property'
'expr': /transition(-property)?$/i,
// simply swap left/right
'action': function (prop, value, context) {
return { 'prop': prop, 'value': context.util.swapLeftRight(value) }