vcssom Addon #

Adds VRule and VSheet classes, which can be used for rendering and diffing virtual CSS. Both classes have .diff() methods. The .diff() method will compute differences with the previous render and add or remove only necessary CSS rules/declarations.

Usage #

Create a virtual CSS rule.

const rule = new nano.VRule('.my-class');

Apply styles to it.

rule.diff({
    color: 'red',
    'font-weight': 'bold',
});

rule.diff({
    color: 'blue',
});

Remove the rule from CSSOM (you cannot call .diff after this anymore).

rule.del();

Create virtual CSS style sheet.

const sheet = new nano.VSheet();

Render CSS.

sheet.diff({
    '': {
        '.my-class': {
            color: 'red',
        },
        '.my-class:hover': {
            color: 'blue',
        },
    },
    '@media only screen and (max-width: 600px)': {
        '.my-class': {
            fontWeight: 'bold',
        },
    },
});

Remove all rendered CSS.

sheet.diff({});

Installation #

Simply install vcssom addon and its dependencies:

• cssom

Read more about the Addon Installation.