The Pipeline: Transforming CSS

To simplify the processing of stylesheets, both the in-line and global stylesheets are transformed to JSON objects. In the current release the transformation process is very simple. The transformation below occurs for the global style sheets:

  1. Compound CSS properties are expanded to their individual properties. For example, the margin property is expanded to margin-left, margin-top, margin-right, and margin-bottom.
  2. Compound selectors are split into unique rules. For example body, div {color: red} becomes two rules: body {color: red} and div {color: red}.
  3. Duplicate selectors are merged. For example body {color: red} and body {background: blue} will be combined to a single selector body {color: red, background: blue}.
  4. All rules are transformed to JSON where each selector creates a new entry in the object and each property is transformed into name-value pairs. For example, div {color: red, background: blue} becomes the following JSON object: 
    "div" : {"color" : "red", "background-color" : "blue"}

    Selectors that specify BODY or HTML element are provided a identifier %body% and %html% respectively as hints to the sandbox to preprocess these for scope.

  5. The resultant style block is provided as meta-data to the sandbox. For example: 
    var settings = 
{
    css : 
      { 
         "div .red" : {"color" : "red"},
         "%body% p" : {"background-color" : "blue", "margin-left: 10px"}
      }
}

Stylesheet JSON Processing

The Stylesheet JSON is processed by the sandbox. The processing occurs as follows:

  1. For each rule in the JSON object:
  2. Prepend the rule (or replace %body% and %html%) with an identifier to scope the sheet to the instance.
  3. If the selector references class names or id, modify the class name and/or id's to provide proper namespace isolation.
  4. Add a rule for the specified selector.
  5. For each property applied to the rule, set the property via the associated policy.

The isolated class names are specified so they can be shared if multiple instances of the code are instantiated. If a second instance of the content is created, only the rules that reference IDs need to be processed and added to the sheet. The sandbox keeps reference counts and will remove the shared rules only when no instances of the code remain.

In-line Styles

When processing the HTML stream, in-line styles are transformed into JSOn objects representing the name-value pairs of each property.

Work in Process

We will be further optimizing the transformation process as well as improve support for @ based selectors (e.g., @media, @print) and alternative style sheets.