<!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">¶</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">¶</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">¶</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">"type"</span><span class="o">:</span> <span class="s2">"stylesheet"</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">¶</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">"value"</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">¶</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">¶</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">¶</a></div>
<p>html,body { </p>
</td>
<td class="code">
<div class="highlight">
<pre> <span class="p">{</span>
<span class="s2">"type"</span><span class="o">:</span> <span class="s2">"selector"</span><span class="p">,</span>
<span class="s2">"selector"</span><span class="o">:</span> <span class="p">[</span>
<span class="s2">"IDENT(html)"</span><span class="p">,</span>
<span class="s2">"DELIM(,)"</span><span class="p">,</span>
<span class="s2">"IDENT(body)"</span><span class="p">,</span>
<span class="s2">"WS"</span>
<span class="p">],</span>
<span class="s2">"value"</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">¶</a></div>
<p> height: 100%;</p>
</td>
<td class="code">
<div class="highlight">
<pre> <span class="p">{</span>
<span class="s2">"type"</span><span class="o">:</span> <span class="s2">"declaration"</span><span class="p">,</span>
<span class="s2">"name"</span><span class="o">:</span> <span class="s2">"height"</span><span class="p">,</span>
<span class="s2">"value"</span><span class="o">:</span> <span class="p">[</span>
<span class="s2">"WS"</span><span class="p">,</span>
<span class="s2">"PERCENTAGE(100)"</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">¶</a></div>
<p> margin: 0px;</p>
</td>
<td class="code">
<div class="highlight">
<pre> <span class="p">{</span>
<span class="s2">"type"</span><span class="o">:</span> <span class="s2">"declaration"</span><span class="p">,</span>
<span class="s2">"name"</span><span class="o">:</span> <span class="s2">"margin"</span><span class="p">,</span>
<span class="s2">"value"</span><span class="o">:</span> <span class="p">[</span>
<span class="s2">"WS"</span><span class="p">,</span>
<span class="s2">"DIM(0,px)"</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">¶</a></div>
<p> padding: 0px;</p>
</td>
<td class="code">
<div class="highlight">
<pre> <span class="p">{</span>
<span class="s2">"type"</span><span class="o">:</span> <span class="s2">"declaration"</span><span class="p">,</span>
<span class="s2">"name"</span><span class="o">:</span> <span class="s2">"padding"</span><span class="p">,</span>
<span class="s2">"value"</span><span class="o">:</span> <span class="p">[</span>
<span class="s2">"WS"</span><span class="p">,</span>
<span class="s2">"DIM(0,px)"</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">¶</a></div>
<p> overflow: hidden;</p>
</td>
<td class="code">
<div class="highlight">
<pre> <span class="p">{</span>
<span class="s2">"type"</span><span class="o">:</span> <span class="s2">"declaration"</span><span class="p">,</span>
<span class="s2">"name"</span><span class="o">:</span> <span class="s2">"overflow"</span><span class="p">,</span>
<span class="s2">"value"</span><span class="o">:</span> <span class="p">[</span>
<span class="s2">"WS"</span><span class="p">,</span>
<span class="s2">"IDENT(hidden)"</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">¶</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">¶</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">¶</a></div>
<p>* {</p>
</td>
<td class="code">
<div class="highlight">
<pre> <span class="p">{</span>
<span class="s2">"type"</span><span class="o">:</span> <span class="s2">"selector"</span><span class="p">,</span>
<span class="s2">"selector"</span><span class="o">:</span> <span class="p">[</span>
<span class="s2">"DELIM(*)"</span><span class="p">,</span>
<span class="s2">"WS"</span>
<span class="p">],</span>
<span class="s2">"value"</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">¶</a></div>
<p class="c"> /* 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">¶</a></div>
<p> -o-box-sizing: border-box;</p>
</td>
<td class="code">
<div class="highlight">
<pre> <span class="p">{</span>
<span class="s2">"type"</span><span class="o">:</span> <span class="s2">"declaration"</span><span class="p">,</span>
<span class="s2">"name"</span><span class="o">:</span> <span class="s2">"-o-box-sizing"</span><span class="p">,</span>
<span class="s2">"value"</span><span class="o">:</span> <span class="p">[</span>
<span class="s2">"WS"</span><span class="p">,</span>
<span class="s2">"IDENT(border-box)"</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">¶</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">¶</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">¶</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">"type"</span><span class="o">:</span> <span class="s2">"at"</span><span class="p">,</span>
<span class="s2">"name"</span><span class="o">:</span> <span class="s2">"document"</span><span class="p">,</span>
<span class="s2">"prelude"</span><span class="o">:</span> <span class="p">[</span>
<span class="s2">"WS"</span><span class="p">,</span>
<span class="s2">"URL(http://www.w3.org/)"</span><span class="p">,</span>
<span class="s2">"DELIM(,)"</span><span class="p">,</span>
<span class="s2">"WS"</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">¶</a></div>
<p> url-prefix("http://www.w3.org/Style/"),</p>
</td>
<td class="code">
<div class="highlight">
<pre> <span class="p">{</span>
<span class="s2">"type"</span><span class="o">:</span> <span class="s2">"func"</span><span class="p">,</span>
<span class="s2">"name"</span><span class="o">:</span> <span class="s2">"url-prefix"</span><span class="p">,</span>
<span class="s2">"value"</span><span class="o">:</span> <span class="p">[</span>
<span class="p">[</span>
<span class="s2">"\"http://www.w3.org/Style/\""</span>
<span class="p">]</span>
<span class="p">]</span>
<span class="p">},</span>
<span class="s2">"DELIM(,)"</span><span class="p">,</span>
<span class="s2">"WS"</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">¶</a></div>
<p> domain("mozilla.org"),</p>
</td>
<td class="code">
<div class="highlight">
<pre> <span class="p">{</span>
<span class="s2">"type"</span><span class="o">:</span> <span class="s2">"func"</span><span class="p">,</span>
<span class="s2">"name"</span><span class="o">:</span> <span class="s2">"domain"</span><span class="p">,</span>
<span class="s2">"value"</span><span class="o">:</span> <span class="p">[</span>
<span class="p">[</span>
<span class="s2">"\"mozilla.org\""</span>
<span class="p">]</span>
<span class="p">]</span>
<span class="p">},</span>
<span class="s2">"DELIM(,)"</span><span class="p">,</span>
<span class="s2">"WS"</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">¶</a></div>
<p> regexp("https:.*") {</p>
</td>
<td class="code">
<div class="highlight">
<pre> <span class="p">{</span>
<span class="s2">"type"</span><span class="o">:</span> <span class="s2">"func"</span><span class="p">,</span>
<span class="s2">"name"</span><span class="o">:</span> <span class="s2">"regexp"</span><span class="p">,</span>
<span class="s2">"value"</span><span class="o">:</span> <span class="p">[</span>
<span class="p">[</span>
<span class="s2">"\"https:.*\""</span>
<span class="p">]</span>
<span class="p">]</span>
<span class="p">},</span>
<span class="s2">"WS"</span>
<span class="p">],</span>
<span class="s2">"value"</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">¶</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">¶</a></div>
<p> body {</p>
</td>
<td class="code">
<div class="highlight">
<pre> <span class="s2">"type"</span><span class="o">:</span> <span class="s2">"selector"</span><span class="p">,</span>
<span class="s2">"selector"</span><span class="o">:</span> <span class="p">[</span>
<span class="s2">"IDENT(body)"</span><span class="p">,</span>
<span class="s2">"WS"</span>
<span class="p">],</span>
<span class="s2">"value"</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">¶</a></div>
<p>
<p> color: purple;</p></p>
</td>
<td class="code">
<div class="highlight">
<pre> <span class="p">{</span>
<span class="s2">"type"</span><span class="o">:</span> <span class="s2">"declaration"</span><span class="p">,</span>
<span class="s2">"name"</span><span class="o">:</span> <span class="s2">"color"</span><span class="p">,</span>
<span class="s2">"value"</span><span class="o">:</span> <span class="p">[</span>
<span class="s2">"WS"</span><span class="p">,</span>
<span class="s2">"IDENT(purple)"</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">¶</a></div>
<p>
<p> background: yellow;</p></p>
</td>
<td class="code">
<div class="highlight">
<pre> <span class="p">{</span>
<span class="s2">"type"</span><span class="o">:</span> <span class="s2">"declaration"</span><span class="p">,</span>
<span class="s2">"name"</span><span class="o">:</span> <span class="s2">"background"</span><span class="p">,</span>
<span class="s2">"value"</span><span class="o">:</span> <span class="p">[</span>
<span class="s2">"WS"</span><span class="p">,</span>
<span class="s2">"IDENT(yellow)"</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">¶</a></div>
<p> }</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>