JSS 0.1 - Nested CSS using Javascript

Why isn't CSS nested?

I guess it's not supposed to be used as a nested style system really, otherwise it would already be like that... Wouldn't it?, but I like the idea of it being nested, so now it can be!

This script parses JSON of nested CSS and returns or applies CSS to the page.

For example:

      JSS({
        'html': {
          'body': {
            background: '#fff',

            'div#header': {
              height: '100px',
              background: '#00f'
            },

            'div#footer': {
              height: '40px',

              'span#copyright': {
                color: '#0f0'
              },
              'span#testing': {
                color: 'black',
                background: '#eeccff'
              }
            }
          },
          width: '800px'
        }
      });
    

would become:

      html {
        width: 800px;
      }

      html body {
        background: #fff;
      }

      html body div#header {
        height: 100px;
        background: #00f;
      }

      html body div#footer {
        height: 40px;
      }

      html body div#footer span#copyright {
        color: #0f0;
      }

      html body div#footer span#testing {
        color: black;
        background: #eeccff;
      }
    

or optionally passing an option of minified: true (which is the default behaviour), this:

      html{width:800px;}html body{background:#fff;}html body div#header{height:100px;background:#00f;}html body div#footer{height:40px;}html body div#footer span#copyright{color:#0f0;}html body div#footer span#testing{color:#000;background:#ecf;}
    

which replaces 6 char hex codes with 3 char codes where applicable, oh and shortening longer colour names if possible.

Usage:

To use, first add the jss.js (or jss-min.js) to your document, probably in the <head> and then add another <script> line linking to a JS file like this:

      JSS({
        'html': {
          'body': {
            background: '#fff',

            'div#header': {
              height: '100px',
              background: '#00f'
            },

            'div#footer': {
              height: '40px',

              'span#copyright': {
                color: '#0f0'
              },
              'span#testing': {
                color: 'black',
                background: '#eeccff'
              }
            }
          },
          width: '800px'
        }
      });
    

Done!