Dynamically style in Javascript during development, then export the generated styles as a static stylesheet.

After adding this script to the head-ele of the doc, the global variable styleToSheet will be available of which you can access all the properties defined below. The most important ones are:

Add a css-rule to stylesheet:

styleToSheet.addRule('div a', 'padding: 0; color: green;')

When you're done with styling, add this in your script and reload page to download the stylesheet for production:

styleToSheet.downloadStyles()

For comfortably reading the stylesheet at any point of development, display them in the body-ele:

styleToSheet.showStyles()

Optionally set a prefix for rule-selectors:

styleToSheet.prefix = '.prefixAllSelectorsWithThis'

1.) Share script-variables with stylesheets, because we can then set a className on an ele and use it furtheron as a selector for the styling, and bind functions to eles with that className.

Note: It is possible to share CSS-vars with scripts, but
then again a script needs to know the property-name of
the css-var.

2.) Do everything in Javascript, no CSS-preprocessors like LESS or SASS, so one doesn't need to know about yet another tool, which saves time.

3.) Have a programmatical way to write CSS, as human-written CSS is prone to inconsistencies, such as rules which are declared several times or properties which are declared several times within a rule. Won't happen with this tool.

Contain a rules-object and modification-functions for it. Insert rules into stylesheet in head-ele on any modification. Provide function for downloading stylesheet.

Ida Ebkes [email protected] 2017

MIT, a copy is attached in this folder.