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 }

§Example

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