JS » CSS

Write CSS with D3-style selection syntax.

select("h1")
	.style("color", "red")
	.style("font-size", "1.25rem");

//	h1 {
//		color: red;
//		font-size: 1.25rem;
//	}

How to use

Install js2css with NPM npm install -s @flourish/js2css.

Import and initialise js2css in your project, and create styles.

import Stylesheet from "@flourish/js2css";

var styles = new Stylesheet();

styles.select("h1") // h1 {...}
	.style("color", "red")
	.style("font-size", "1.2rem")
	.style("font-weight", "bold")
	.style("display", function() {
		return window.innerWidth < 400 ? "none" : null
	})
	.select("span") // h1 span {...}
	.style("font-weight", "normal");

document.head.querySelector("#my_style_container").innerHTML = styles.print(); // Add styles to <style> tag in head

styles.clear(); // Clear the styles

Functions

select(selector)

Create new CSS selection. Select can be called directly on the js2css object, or on an existing declaration to create nested CSS selection.

style(style_attribute, value)

Create new style for current selection. The value can be a string, number or a function.

print()

Returns the parsed CSS string

clear()

Clears the CSS string