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
Returns a reference to the injected <style>
element.
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>
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();
injectFromInternalRegistry.call(registry, 6 < hr || hr < 18 ? 'day' : 'eve');
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 }';
inject('day');
This is not recommended as it "pollutes the global namespace," but makes for simpler examples...
var box = 'div { background-color: ${0}; color: ${1} }';
inject('box', 'yellow', 'red'); // as resolved: body { background-color: yellow; color: red }
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)
The return value is useful here:
var styleEl = inject(...);
styleEl.remove(); // IE-unfriendly
styleEl.parentNode.removeChild(styleEl); // IE-friendly