jscss-lite

Write Javascript-ish things in your CSS. Or call it Embedded CSS - write CSS in your Javascript!

Install

npm i jscss-lite --save
npm test

Usage

For more use-cases see the tests

var fs = require('fs')
var jscssLite = require('jscss-lite')
 
var input = fs.readFileSync('./test/fixture.css', 'utf8')
var css = jscssLite(input)
 
// or callback api
jscssLite(input, function (err, css) {
  console.log(err, css)
})

Example input

var cool_colour = "rgb(39, 192, 129)";
 
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
 
html {
  background-color: rgba(3, 4, 5, 0.6);
}
 
html[lang|="en"] {
  color: rgb(238 , 23, 12);
  font-family: Open Sans;
}
 
for (var i = 0; i < 5; i++) {
  div .hello:nth-child(|i|) {
    color: rgb(| i * 10 |, 20, |i * 20|);
  }
}
 
var i = 0;
 
p > li {
  background-color: |cool_colour|;
}
 
while (i < 4) {
  p > li.number-|i| {
    width: |i * 10|;
  }
 
  i++;
}

Related

• catchy: Promise-like async parallel control flow library, without so much abstraction.
• dual-emitter: 🍹 EventEmitter done right and no dependencies. For nodejs and the browser (>= IE8). Can emit custom or DOM events.
• dush: Minimalist 1.5kb event delegation for the browser (IE8+) and nodejs.
• j140: Javascript template engine in just 140 bytes, for browser and node - by Jed Schmidt
• jscss: CSS embedded in JavaScript
• minigrid: Minimal 2kb zero dependency cascading grid layout
• octet: 1kb template engine for the browser and nodejs. Support helpers, partials and more.

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
But before doing anything, please read the CONTRIBUTING.md guidelines.

Charlike Make Reagent