Control Directives

Control directives are placed between declarations or statements (rules and at-rules). They can target a single node (self-closing) or a set of nodes (block-syntax).

§Remarks

• ¹ Config is evaluated using eval, and it can be disabled by adding it to the blacklist.
• ² Options parsing is done via JSON.parse, and requires a valid json. The new options will override the defaults (not the current context). Plugins will be carried over from the current context.
• ³ Due to the nature of RAW directive, block-syntax is not supported.

§Ignore

§Example

• Self-closing

.code {
  /*rtl:ignore*/
  direction:ltr;
  /*rtl:ignore*/
  text-align:left;
}

• Block-syntax

.code {
  /*rtl:begin:ignore*/
  direction:ltr;
  text-align:left;
  /*rtl:end:ignore*/
}

§Config

The {OBJ} parameter is evaluated using javascript eval, if you with to disable it, simply add it to the blacklist.

§Example

• Self-closing

/*rtl:config:
{
    "options":{
        "autoRename": true,
    },
    "plugins":[...]
}
*/
.example {
  ...
 }

• Block-syntax

/*rtl:begin:config:
{
    "options":{
        "autoRename": true,
    },
    "plugins":[...]
}
*/
.example {
  ...
 }
/*rtl:end:config*/

§Options

Options parsing is done via JSON.parse, and requires a valid json object.
The new options will override the defaults (not the current context). Plugins will be carried over from the current context.

§Example

• Self-closing

/* empty options forces defaults. */
/*rtl:options:{}*/
.demo-left { content: 'left'; }
.demo-right { content: 'right'; }

Self-closing options will remain active from this point forward.

• Block-syntax

/*rtl:begin:options:
{
  "autoRename": true,
  "stringMap":[
      {
      "name"    : "prev-next",
      "search"  : ["prev", "Prev", "PREV"],
      "replace" : ["next", "Next", "NEXT"],
      "options" : {"ignoreCase":false}
      }
  ]
}
*/
.demo-prev, .demo-Prev, .demo-PREV { content: '<'; }
.demo-next, .demo-Next, .demo-NEXT { content: '>'; }
/*rtl:end:options*/

§Raw

§Example

• Self-closing

/*rtl:raw:
#example {
    border-radius: 25px 0 0 25px;
}
*/

Due to the nature of RAW directive, block-syntax is not supported.

§Remove

§Example

• Self-closing

div {
  /*rtl:remove*/
  direction: rtl;
  /*rtl:remove*/
  text-align: right;
  padding: 10px;
}

• Block-syntax

div {
  /*rtl:begin:remove*/
  direction: rtl;
  text-align: right;
  /*rtl:end:remove*/
  padding: 10px;
}

§Rename

§Example

• Self-closing

/*rtl:rename*/
.float-right {
    float: right;
}

• Block-syntax

/*rtl:begin:rename*/
.float-right {
    float: right;
}
.float-left {
    float: left;
}
/*rtl:end:rename*/