rework-css2js

Inline CSS into JavaScript calls

Usage no npm install needed!

<script type="module">
  import reworkCss2js from 'https://cdn.skypack.dev/rework-css2js';
</script>

README

rework-css2js

Inline CSS into JavaScript calls

Installation

$ npm install rework-css2js

Usage

// dependencies
var fs = require("fs");
var rework = require("rework");
var css2js = require("rework-css2js");

// css to be processed
var css = fs.readFileSync("build/build.css", "utf8").toString();

// process css using rework-vars
var fn = "importCss($1, $2)";
var out = rework(css).use(css2js(options)).toString();

Example

/* my comment */
summary ~ * {
    display: none;
}

details[open] > * {
    display: block;
}

details > summary {
    display: block;
    overflow: hidden; /* fix focus outline borders in open state */
}

yields:

/* my comment */
importCss("summary ~ *", "display:none");
importCss("details[open] > *", "display:block");
importCss("details > summary", "display:block;overflow:hidden");