Resolve registered CSS stylesheet template & inject strategically into head.

Downloads in past


001.0.26 years ago6 years agoMinified + gzip package size for inject-stylesheet-template in KB


Resolve registered CSS stylesheet template & inject strategically into head.


resolve: uses automat to merge values of optional parameters into stylesheet
registered: dereferenced from the "registry" (i.e., the calling context)
strategically: inserts each stylesheet consecutively into <head> either before first stylesheet loaded with page or at end of <head> if nonesuch

Return value

Returns a reference to the injected <style> element.


Stylesheet registry in a separate file

File: myCssRegistry.js
module.exports = {
    day: 'body { background-color: #ffe }',
    eve: 'body { background-color: #666; color: #eee; }'

In your app layer:
var injectFromExternalRegistry = require('inject-stylesheet-template').bind(require('./myCssRegistry'));
injectFromExternalRegistry('day'); // inject <style id="day">body { background-color: #ffe }</style> into <head>

Stylesheet registry in same file

var var injectFromInternalRegistry = require('inject-stylesheet-template');
var registry = {
    day: 'body { background-color: #ffe }',
    eve: 'body { background-color: #666; color: #eee; }'
var hr = (new Date).getHours();, 6 < hr || hr < 18 ? 'day' : 'eve');

Non-strict mode

In non-strict mode, you can use the global object as your registry by taking advantage of the default calling context:
var inject = ...; // expose the module somehow
var day = 'body { background-color: #ffe }';

This is not recommended as it "pollutes the global namespace," but makes for simpler examples...

Merge parameter values

var box = 'div { background-color: ${0}; color: ${1} }';
inject('box', 'yellow', 'red'); // as resolved: body { background-color: yellow; color: red }

Inject strategically

inject(true, 'day'); // before first stylesheet in <head> loaded with page
inject(false, 'day'); // end of <head>
inject('day'); // per inject.before (true by default)

Remove injected stylesheet

The return value is useful here:
var styleEl = inject(...);
styleEl.remove(); // IE-unfriendly
styleEl.parentNode.removeChild(styleEl); // IE-friendly