dynamic-stylesheet-js

@macu/dynamic-stylesheet-js

Dynamically render a document stylesheet.

Make sure you sanitize all user-supplied input that is included in stylesheet output.

Rules

Rulesets are objects containing hierarchical CSS with selectors as keys to objects, and rules represented as 'propertyName': 'value' entries.

If a nested selector does not begin with a combinator (>, +, or ~) or pseudo class/element syntax (:, ::), it is rendered with a descendent combinator ( ). Selectors can also begin with the optional & cursor to append to the current selector target component (example below).

Arrays are supported; entries may be either 'propertyName: value' strings, /* comments */, or nested rulesets.

Comments may also appear as keys in object rulesets, where the value indicates whether to output the comment.

Usage

See demo

var color = 'blue';
var rules = [
	'/* comments appear in innerHTML output */',
	'',
	{'#app': {
		'>header': {
			'/* conditional comment 1 */': true,
			'/* conditional comment 2 */': false, // omitted
			'padding': '10px 0',
			'background-color': 'aquamarine',
			'>h1': {
				'color': 'white',
			},
		},
		'p': {
			'color': color,
			'&.demo': {
				'font-weight': 'bold',
				'text-decoration': 'underline wavy',
				'test': null, // omitted
			},
		},
	}},
];

Using stylesheet API:

var style = document.createElement('style');
style.type = 'text/css';
document.head.appendChild(style);
// style node must be present in the document before calling
DynamicStylesheet.addStylesheetRules(style, rules);

Using innerHTML:

var style = document.createElement('style');
style.type = 'text/css';
// can set innerHTML before style node is present in the document
style.innerHTML = DynamicStylesheet.buildStylesheetCSS(rules);
document.head.appendChild(style);

Using convenience method:

var style = DynamicStylesheet.appendStylesheet(document.head, rules);

Rendered stylesheet:

<style type="text/css">
/* comments appear in innerHTML output */

#app>header {
	/* conditional comment 1 */
	padding: 10px 0;
	background-color: aquamarine;
}
#app>header>h1 {
	color: white;
}
#app p {
	color: blue;
}
#app p.demo {
	font-weight: bold;
	text-decoration: underline wavy;
}
</style>

Testing

Build, start server, and access http://localhost:8080/demo.html

npm run prod
python -m http.server 8080

This site is open source. Improve this page.