docs/parser-info.html

<!DOCTYPE html>
<title>CSS Parsing Example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" media="all" href="docco.css" />
<div id="container">
	<div id="background">
	</div>
	<table>
		<thead>
			<tr>
				<th class="docs"></th>
				<th class="code"></th>
			</tr>
		</thead>
		<tr id="section-1">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-1">&#182;</a></div>
				<p class="c">/* </p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre></pre>
				</div>
			</td>
		</tr>
		<tr id="section-2">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-2">&#182;</a></div>
				<p class="c">This illustrates the parsed tree created by<a href="https://github.com/tabatkins/css-parser">Tab Atkin's CSS Parser</a></p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre><span class="p">{</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-3">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-3">&#182;</a></div>
				<p class="c">based on the stylesheet shown below - in theory you could have a collection of these...</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>    <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;stylesheet&quot;</span><span class="p">,</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-4">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-4">&#182;</a></div>
				<p class="c">This will be a collection of everything described in this sheet.</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>    <span class="s2">&quot;value&quot;</span><span class="o">:</span> <span class="p">[</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-5">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-5">&#182;</a></div>
				<p class="c">Each of these rule becomes an entry of some kind in this array.</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre></pre>
				</div>
			</td>
		</tr>
		<tr id="section-6">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-6">&#182;</a></div>
				<p class="c">*/</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre></pre>
				</div>
			</td>
		</tr>
		<tr id="section-7">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-7">&#182;</a></div>
				<p>html,body { </p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>        <span class="p">{</span>
            <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;selector&quot;</span><span class="p">,</span>
            <span class="s2">&quot;selector&quot;</span><span class="o">:</span> <span class="p">[</span>
                <span class="s2">&quot;IDENT(html)&quot;</span><span class="p">,</span>
                <span class="s2">&quot;DELIM(,)&quot;</span><span class="p">,</span>
                <span class="s2">&quot;IDENT(body)&quot;</span><span class="p">,</span>
                <span class="s2">&quot;WS&quot;</span>
            <span class="p">],</span>
            <span class="s2">&quot;value&quot;</span><span class="o">:</span> <span class="p">[</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-8">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-8">&#182;</a></div>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;height: 100%;</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>                <span class="p">{</span>
                    <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;declaration&quot;</span><span class="p">,</span>
                    <span class="s2">&quot;name&quot;</span><span class="o">:</span> <span class="s2">&quot;height&quot;</span><span class="p">,</span>
                    <span class="s2">&quot;value&quot;</span><span class="o">:</span> <span class="p">[</span>
                        <span class="s2">&quot;WS&quot;</span><span class="p">,</span>
                        <span class="s2">&quot;PERCENTAGE(100)&quot;</span>
                    <span class="p">]</span>
                <span class="p">},</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-9">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-9">&#182;</a></div>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;margin: 0px;</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>                <span class="p">{</span>
                    <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;declaration&quot;</span><span class="p">,</span>
                    <span class="s2">&quot;name&quot;</span><span class="o">:</span> <span class="s2">&quot;margin&quot;</span><span class="p">,</span>
                    <span class="s2">&quot;value&quot;</span><span class="o">:</span> <span class="p">[</span>
                        <span class="s2">&quot;WS&quot;</span><span class="p">,</span>
                        <span class="s2">&quot;DIM(0,px)&quot;</span>
                    <span class="p">]</span>
                <span class="p">},</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-10">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-10">&#182;</a></div>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;padding: 0px;</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>                <span class="p">{</span>
                    <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;declaration&quot;</span><span class="p">,</span>
                    <span class="s2">&quot;name&quot;</span><span class="o">:</span> <span class="s2">&quot;padding&quot;</span><span class="p">,</span>
                    <span class="s2">&quot;value&quot;</span><span class="o">:</span> <span class="p">[</span>
                        <span class="s2">&quot;WS&quot;</span><span class="p">,</span>
                        <span class="s2">&quot;DIM(0,px)&quot;</span>
                    <span class="p">]</span>
                <span class="p">},</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-11">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-11">&#182;</a></div>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;overflow: hidden;</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>                <span class="p">{</span>
                    <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;declaration&quot;</span><span class="p">,</span>
                    <span class="s2">&quot;name&quot;</span><span class="o">:</span> <span class="s2">&quot;overflow&quot;</span><span class="p">,</span>
                    <span class="s2">&quot;value&quot;</span><span class="o">:</span> <span class="p">[</span>
                        <span class="s2">&quot;WS&quot;</span><span class="p">,</span>
                        <span class="s2">&quot;IDENT(hidden)&quot;</span>
                    <span class="p">]</span>
                <span class="p">}</span>
            <span class="p">]</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-12">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-12">&#182;</a></div>
				<p>}</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>        <span class="p">},</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-13">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-13">&#182;</a></div>
				<p class="c">/* next rule: splat with unofficial but conforming properties */</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre></pre>
				</div>
			</td>
		</tr>
		<tr id="section-14">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-14">&#182;</a></div>
				<p>* {</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>        <span class="p">{</span>
            <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;selector&quot;</span><span class="p">,</span>
            <span class="s2">&quot;selector&quot;</span><span class="o">:</span> <span class="p">[</span>
                <span class="s2">&quot;DELIM(*)&quot;</span><span class="p">,</span>
                <span class="s2">&quot;WS&quot;</span>
            <span class="p">],</span>
            <span class="s2">&quot;value&quot;</span><span class="o">:</span> <span class="p">[</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-15">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-15">&#182;</a></div>
				<p class="c">&nbsp;&nbsp;&nbsp;&nbsp;/* No problem... */</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre></pre>
				</div>
			</td>
		</tr>
		<tr id="section-16">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-16">&#182;</a></div>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;-o-box-sizing: border-box;</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>                <span class="p">{</span>
                    <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;declaration&quot;</span><span class="p">,</span>
                    <span class="s2">&quot;name&quot;</span><span class="o">:</span> <span class="s2">&quot;-o-box-sizing&quot;</span><span class="p">,</span>
                    <span class="s2">&quot;value&quot;</span><span class="o">:</span> <span class="p">[</span>
                        <span class="s2">&quot;WS&quot;</span><span class="p">,</span>
                        <span class="s2">&quot;IDENT(border-box)&quot;</span>
                    <span class="p">]</span>
                <span class="p">}</span>
            <span class="p">]</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-17">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-17">&#182;</a></div>
				<p>}</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>        <span class="p">},</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-18">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-18">&#182;</a></div>
				<p class="c">/* next rule: @ rule with lots of tricky bits: note the prelude / func</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre></pre>
				</div>
			</td>
		</tr>
		<tr id="section-19">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-19">&#182;</a></div>
				<p>@document url("http://www.w3.org/"),</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>        <span class="p">{</span>
            <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;at&quot;</span><span class="p">,</span>
            <span class="s2">&quot;name&quot;</span><span class="o">:</span> <span class="s2">&quot;document&quot;</span><span class="p">,</span>
            <span class="s2">&quot;prelude&quot;</span><span class="o">:</span> <span class="p">[</span>
                <span class="s2">&quot;WS&quot;</span><span class="p">,</span>
                <span class="s2">&quot;URL(http://www.w3.org/)&quot;</span><span class="p">,</span>
                <span class="s2">&quot;DELIM(,)&quot;</span><span class="p">,</span>
                <span class="s2">&quot;WS&quot;</span><span class="p">,</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-20">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-20">&#182;</a></div>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;url-prefix("http://www.w3.org/Style/"),</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>                <span class="p">{</span>
                    <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;func&quot;</span><span class="p">,</span>
                    <span class="s2">&quot;name&quot;</span><span class="o">:</span> <span class="s2">&quot;url-prefix&quot;</span><span class="p">,</span>
                    <span class="s2">&quot;value&quot;</span><span class="o">:</span> <span class="p">[</span>
                        <span class="p">[</span>
                            <span class="s2">&quot;\&quot;http://www.w3.org/Style/\&quot;&quot;</span>
                        <span class="p">]</span>
                    <span class="p">]</span>
                <span class="p">},</span>
                <span class="s2">&quot;DELIM(,)&quot;</span><span class="p">,</span>
                <span class="s2">&quot;WS&quot;</span><span class="p">,</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-21">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-21">&#182;</a></div>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;domain("mozilla.org"),</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>                <span class="p">{</span>
                    <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;func&quot;</span><span class="p">,</span>
                    <span class="s2">&quot;name&quot;</span><span class="o">:</span> <span class="s2">&quot;domain&quot;</span><span class="p">,</span>
                    <span class="s2">&quot;value&quot;</span><span class="o">:</span> <span class="p">[</span>
                        <span class="p">[</span>
                            <span class="s2">&quot;\&quot;mozilla.org\&quot;&quot;</span>
                        <span class="p">]</span>
                    <span class="p">]</span>
                <span class="p">},</span>
                <span class="s2">&quot;DELIM(,)&quot;</span><span class="p">,</span>
                <span class="s2">&quot;WS&quot;</span><span class="p">,</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-22">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-22">&#182;</a></div>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;regexp("https:.*") {</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>                <span class="p">{</span>
                    <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;func&quot;</span><span class="p">,</span>
                    <span class="s2">&quot;name&quot;</span><span class="o">:</span> <span class="s2">&quot;regexp&quot;</span><span class="p">,</span>
                    <span class="s2">&quot;value&quot;</span><span class="o">:</span> <span class="p">[</span>
                        <span class="p">[</span>
                            <span class="s2">&quot;\&quot;https:.*\&quot;&quot;</span>
                        <span class="p">]</span>
                    <span class="p">]</span>
                <span class="p">},</span>
                <span class="s2">&quot;WS&quot;</span>
            <span class="p">],</span>
            <span class="s2">&quot;value&quot;</span><span class="o">:</span> <span class="p">[</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-23">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-23">&#182;</a></div>
				<ul>
					<li class="c">/* Now we'll have a collection of rules just like a sheet, but for the @ block... */</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>                <span class="p">{</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-24">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-24">&#182;</a></div>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;body {</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>                    <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;selector&quot;</span><span class="p">,</span>
                    <span class="s2">&quot;selector&quot;</span><span class="o">:</span> <span class="p">[</span>
                        <span class="s2">&quot;IDENT(body)&quot;</span><span class="p">,</span>
                        <span class="s2">&quot;WS&quot;</span>
                    <span class="p">],</span>
                    <span class="s2">&quot;value&quot;</span><span class="o">:</span> <span class="p">[</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-25">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-25">&#182;</a></div>
				<p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: purple;</p></p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>                        <span class="p">{</span>
                            <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;declaration&quot;</span><span class="p">,</span>
                            <span class="s2">&quot;name&quot;</span><span class="o">:</span> <span class="s2">&quot;color&quot;</span><span class="p">,</span>
                            <span class="s2">&quot;value&quot;</span><span class="o">:</span> <span class="p">[</span>
                                <span class="s2">&quot;WS&quot;</span><span class="p">,</span>
                                <span class="s2">&quot;IDENT(purple)&quot;</span>
                            <span class="p">]</span>
                        <span class="p">},</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-26">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-26">&#182;</a></div>
				<p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: yellow;</p></p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>                        <span class="p">{</span>
                            <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;declaration&quot;</span><span class="p">,</span>
                            <span class="s2">&quot;name&quot;</span><span class="o">:</span> <span class="s2">&quot;background&quot;</span><span class="p">,</span>
                            <span class="s2">&quot;value&quot;</span><span class="o">:</span> <span class="p">[</span>
                                <span class="s2">&quot;WS&quot;</span><span class="p">,</span>
                                <span class="s2">&quot;IDENT(yellow)&quot;</span>
                            <span class="p">]</span>
                        <span class="p">}</span>
                    <span class="p">]</span></pre>
				</div>
			</td>
		</tr>
		<tr id="section-27">
			<td class="docs">
				<div class="pilwrap"><a class="pilcrow" href="#section-27">&#182;</a></div>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;}</p>
			</td>
			<td class="code">
				<div class="highlight">
					<pre>                <span class="p">}</span>
            <span class="p">]</span>
        <span class="p">}</span>
    <span class="p">]</span>
<span class="p">}</span></pre>
				</div>
			</td>
		</tr>
	</table>
</div>