cssom Addon

March 26, 2019 ยท View on GitHub

Adds a utility createRule function that creates CSSRule objects. The .createRule function offers the following features:

  1. It creates plain CSSRules and ones that with media query.
  2. It places CSSRuless with media query into a different style sheet, because placing them in the same style sheet throws.
  3. It adds to the rule object index property rule.index, which is that rule's insertion index in the style sheet.
  4. In case rule has media query, the returned media query rule will still have top level .style and .styleMap properties, which can be used to set the styling.
nano.createRule(selector, mediaQueryAtRulePrelude?);

Usage

Create CSSRule object.

const rule = nano.createRule('.my-component');
const rule = nano.createRule('.my-component', '@media only screen and (max-width: 600px)');

Use rule object to set CSS.

rule.style.color = 'red';
rule.style.setProperty('color', 'green');

Installation

Simply install cssom addon.

Read more about the Addon Installation.