Installation
CSSOM-Lite
CSSOM-Lite is available as an npm package.
npm:
npm i @mollahdev/cssom-liteImport 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()