/* |
|
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": [
|
|
{
|
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)"
]
}
]
|
} |
}
]
}
]
}
|