Generate css with javascript
CSSOM-Lite is available as an npm package.
npm:
``sh`
npm i @mollahdev/cssom-lite
`jsx
import CSSOMLite from '@mollahdev/cssom-lite';
const sheet = new CSSOMLite();
// register devices
sheet.addDevice('mobile', 575);
sheet.addDevice('tablet', 768);
sheet.addDevice('laptop', 911);
`
jsx
sheet.addCSS()
`Add rule
CSSOM-lite ignores these properties/values, undefined, null, false, true, NaN, ''`jsx
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`jsx
sheet.addRule('.selector-a', 'background: orange');
sheet.addRule('.selector-a', );
`Add responsive rule
`jsx
sheet.addRule('.selector-a', 'text-decoration: underline', {max: 'mobile'});
sheet.addRule('.selector-heading', 'font-size: 24px', {min: 'mobile', max: 'tablet'});
`Clear everything
`jsx
sheet.clear();
`Get output
`jsx
sheet.output()
``