CSS.JS

Create importable JS files from CSS files and JS files.

Usage

$ cssjs --file <CSS file> [--jsFile <JS file for extra functionality>] [--out <output file (preferably with .css.js extension)>]

If out is not specified, it will print the generated JS to stdout.

Example

app.css:

h1 {
    display: inline;
    font-weight: bold;
}
button {
    border-radius: 25px;
}
.cls {
    background-color: crimson;
}

app.css-extensions.js:

export function applyCls(elem) {
    elem.classList.add('cls');
}

app.css.js (generated with cssjs --file app.css --jsFile app.css-extensions.js --out app.css.js):

// Created by css.js
// JavaScript Template
export function applyCls(elem) {
    elem.classList.add('cls');
}
// CSS Loader
const styles = [`h1 {
    display: inline;
    font-weight: bold;
}`,`
button {
    border-radius: 25px;
}`,`
.cls {
    background-color: crimson;
}`];
const styleElem = document.createElement('style');
styleElem.setAttribute('data-cssjs-stylesheet-file', "app.css");
document.head.appendChild(styleElem);
styles.forEach(rule => {
    styleElem.sheet.insertRule(rule, styleElem.sheet.cssRules.length);
});