Installation

CSSOM-Lite

CSSOM-Lite is available as an npm package.

npm:

npm i @mollahdev/cssom-lite

Import and register device:

import CSSOMLite from '@mollahdev/cssom-lite';

const sheet = new CSSOMLite();

// register devices
sheet.addDevice('mobile', 575);
sheet.addDevice('tablet', 768);
sheet.addDevice('laptop', 911);

Add custom plain css text

sheet.addCSS(`
    @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
    * {
        margin: 0;
        padding: 0;
    }
`)

Add rule

CSSOM-lite ignores these properties/values, undefined, null, false, true, NaN, ''

sheet.addRule('.selector-a', 'background: orange');
sheet.addRule('.selector-a', 'color: white; text-decoration:none');

Add rule and remove old value

By using "remove" property like the example, you can remove already added value, note: remove property will be ignored in the final css ouput

sheet.addRule('.selector-a', 'background: orange');
sheet.addRule('.selector-a', `
    color: white; text-decoration:none;
    remove: background, border, fill;
`);

Add responsive rule

sheet.addRule('.selector-a', 'text-decoration: underline', {max: 'mobile'});
sheet.addRule('.selector-heading', 'font-size: 24px', {min: 'mobile', max: 'tablet'});

Clear everything

sheet.clear();

Get output

sheet.output()