/*


				

This illustrates the parsed tree created byTab Atkin's CSS Parser

{

based on the stylesheet shown below - in theory you could have a collection of these...

    "type": "stylesheet",

This will be a collection of everything described in this sheet.

    "value": [

Each of these rule becomes an entry of some kind in this array.


				

*/


				

html,body {

        {
            "type": "selector",
            "selector": [
                "IDENT(html)",
                "DELIM(,)",
                "IDENT(body)",
                "WS"
            ],
            "value": [

    height: 100%;

                {
                    "type": "declaration",
                    "name": "height",
                    "value": [
                        "WS",
                        "PERCENTAGE(100)"
                    ]
                },

    margin: 0px;

                {
                    "type": "declaration",
                    "name": "margin",
                    "value": [
                        "WS",
                        "DIM(0,px)"
                    ]
                },

    padding: 0px;

                {
                    "type": "declaration",
                    "name": "padding",
                    "value": [
                        "WS",
                        "DIM(0,px)"
                    ]
                },

    overflow: hidden;

                {
                    "type": "declaration",
                    "name": "overflow",
                    "value": [
                        "WS",
                        "IDENT(hidden)"
                    ]
                }
            ]

}

        },

/* next rule: splat with unofficial but conforming properties */


				

* {

        {
            "type": "selector",
            "selector": [
                "DELIM(*)",
                "WS"
            ],
            "value": [

    /* No problem... */


				

    -o-box-sizing: border-box;

                {
                    "type": "declaration",
                    "name": "-o-box-sizing",
                    "value": [
                        "WS",
                        "IDENT(border-box)"
                    ]
                }
            ]

}

        },

/* next rule: @ rule with lots of tricky bits: note the prelude / func


				

@document url("http://www.w3.org/"),

        {
            "type": "at",
            "name": "document",
            "prelude": [
                "WS",
                "URL(http://www.w3.org/)",
                "DELIM(,)",
                "WS",

    url-prefix("http://www.w3.org/Style/"),

                {
                    "type": "func",
                    "name": "url-prefix",
                    "value": [
                        [
                            "\"http://www.w3.org/Style/\""
                        ]
                    ]
                },
                "DELIM(,)",
                "WS",

    domain("mozilla.org"),

                {
                    "type": "func",
                    "name": "domain",
                    "value": [
                        [
                            "\"mozilla.org\""
                        ]
                    ]
                },
                "DELIM(,)",
                "WS",

    regexp("https:.*") {

                {
                    "type": "func",
                    "name": "regexp",
                    "value": [
                        [
                            "\"https:.*\""
                        ]
                    ]
                },
                "WS"
            ],
            "value": [
  • /* Now we'll have a collection of rules just like a sheet, but for the @ block... */

                {

    body {

                    "type": "selector",
                    "selector": [
                        "IDENT(body)",
                        "WS"
                    ],
                    "value": [

        color: purple;

                        {
                            "type": "declaration",
                            "name": "color",
                            "value": [
                                "WS",
                                "IDENT(purple)"
                            ]
                        },

        background: yellow;

                        {
                            "type": "declaration",
                            "name": "background",
                            "value": [
                                "WS",
                                "IDENT(yellow)"
                            ]
                        }
                    ]

    }

                }
            ]
        }
    ]
}