css-injector

Creates stylesheets out of strings

NOTE: As of v1.1.0, css-injector is now a simple node module. It is no longer a "modified node module" (containing its own extra closure for use directly in a browser).

Motivation

Bakes one or more baseline mandatory stylesheets into your JavaScript -- i.e., without having to depend on an external .css file. You supply css rules as strings and cssInjector creates <style>...</style> elements and inserts them into your <head>...</head> element (wherever else you want).

Synopsis

cssInjector(stylesheet [ , id [ , refereneceElement ] ] );

where:

stylesheet is a string or a list of strings containing css rules.
id is an optional string that will get assigned to the <style> tag's id attribute
referenceElement is an optional DOM Element or a string containing a css selector that resolves to a DOM element or null. Including this parameter forces the new <style>...</style> element to be inserted just before the given element. If omitted (or undefined), the new stylesheet is injected at top of <head>...</head> element. If null, it is inserted at the bottom of the <head>...</head> element.

Example

var stylesheet = [
    'div {',
    '    background-color: red;',
    '    color: yellow;'
    '}'
];

cssInjector(stylesheet);

API documentation

Detailed API docs can be found here.

Demo

A demo can be found here.

CDN versions

To use in a browser, you have two options:

Incorporate the node module into your own browserified project.
Use the browserified versions css-injector.js or css-injector.min.js available on the Github pages CDN.

Submodules

See the note Regarding submodules for important information on cloning this repo or re-purposing its build template.

joneit/css-injector