Permalink
Switch branches/tags
Find file
Fetching contributors…
Cannot retrieve contributors at this time
50 lines (46 sloc) 17.2 KB
<!DOCTYPE html> <html> <head> <title>css2json.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> css2json.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> <p>css2json transform CSS to JSON.</p>
<p>css2json is a <a href="http://www.opensource.org/licenses/mit-license.php">open source</a>
library for <a href="http://nodejs.org">Node.js</a> (with browser
compability planned) hosted on <a href="https://github.com/kesla/css2json">github</a>
and written by <a href="http://davidbjorklund.se">David Björklund</a>.</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>Require <a href="http://documentcloud.github.com/underscore/">underscore</a>
for some utilities and browser support.</p> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">_</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;underscore&#39;</span><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>Main (only) method that parses a string with css to a json-object.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">exports</span><span class="p">.</span><span class="nx">parse</span> <span class="o">=</span> <span class="nx">parse</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">css</span><span class="p">)</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>Remove all comments from the css-file</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">while</span><span class="p">((</span><span class="nx">open</span> <span class="o">=</span> <span class="nx">css</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">&quot;/*&quot;</span><span class="p">))</span> <span class="o">!==</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&amp;&amp;</span>
<span class="p">(</span><span class="nx">close</span> <span class="o">=</span> <span class="nx">css</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">&quot;*/&quot;</span><span class="p">))</span> <span class="o">!==</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">css</span> <span class="o">=</span> <span class="nx">css</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nx">open</span><span class="p">)</span> <span class="o">+</span> <span class="nx">css</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="nx">close</span> <span class="o">+</span> <span class="mi">2</span><span class="p">);</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>Initialize the return value <em>json</em>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">json</span> <span class="o">=</span> <span class="p">{};</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>Each rule gets parsed and then removed from <em>css</em> until all rules have been
parsed.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">while</span><span class="p">(</span><span class="nx">css</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>Save the index of the first left bracket and first right bracket.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">lbracket</span> <span class="o">=</span> <span class="nx">css</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;{&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">rbracket</span> <span class="o">=</span> <span class="nx">css</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;}&#39;</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> <h2>Part 1: The declarations</h2>
<p>Transform the declarations to an object. For example, the declarations<br/>
<code>font: 'Times New Roman' 1em; color: #ff0000; margin-top: 1em;</code><br/>
result in the object<br/>
<code>{"font": "'Times New Roman' 1em", "color": "#ff0000", "margin-top": "1em"}</code>.</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>Helper method that transform an array to a object, by splitting each
declaration (<em>font: Arial</em>) into key (<em>font</em>) and value(<em>Arial</em>).</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">toObject</span><span class="p">(</span><span class="nx">array</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">array</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">elm</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">index</span> <span class="o">=</span> <span class="nx">elm</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">&quot;:&quot;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">property</span> <span class="o">=</span> <span class="nx">elm</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nx">index</span><span class="p">).</span><span class="nx">trim</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">elm</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="nx">index</span> <span class="o">+</span> <span class="mi">1</span><span class="p">).</span><span class="nx">trim</span><span class="p">();</span>
<span class="nx">ret</span><span class="p">[</span><span class="nx">property</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">ret</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>Split the declaration block of the first rule into an array and remove
whitespace from each declaration.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">declarations</span> <span class="o">=</span> <span class="nx">css</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="nx">lbracket</span> <span class="o">+</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">rbracket</span><span class="p">)</span>
<span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s2">&quot;;&quot;</span><span class="p">)</span>
<span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">declaration</span><span class="p">){</span>
<span class="k">return</span> <span class="nx">declaration</span><span class="p">.</span><span class="nx">trim</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>Remove any empty ("") values from the array</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">declarations</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">compact</span><span class="p">(</span><span class="nx">declarations</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><em>declaration</em> is now an array reado to be transformed into an object.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">declarations</span> <span class="o">=</span> <span class="nx">toObject</span><span class="p">(</span><span class="nx">declarations</span><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> <h2>Part 2: The selectors</h2>
<p>Each selector in the selectors block will be associated with the
declarations defined above. For example, <code>h1, p#bar {color: red}</code><br/>
result in the object<br/>
{"h1": {color: red}, "p#bar": {color: red}}</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>Split the selectors block of the first rule into an array and remove
whitespace, e.g. <code>"h1, p#bar, span.foo"</code> get parsed to
<code>["h1", "p#bar", "span.foo"]</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">selectors</span> <span class="o">=</span> <span class="nx">css</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nx">lbracket</span><span class="p">)</span>
<span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s2">&quot;,&quot;</span><span class="p">)</span>
<span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">selector</span><span class="p">){</span>
<span class="k">return</span> <span class="nx">selector</span><span class="p">.</span><span class="nx">trim</span><span class="p">();</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>Iterate through each selector from <em>selectors</em>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">selectors</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">selector</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>Initialize the json-object representing the declaration block of
<em>selector</em>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">json</span><span class="p">[</span><span class="nx">selector</span><span class="p">])</span> <span class="nx">json</span><span class="p">[</span><span class="nx">selector</span><span class="p">]</span> <span class="o">=</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>Save the declarations to the right selector</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">json</span><span class="p">[</span><span class="nx">selector</span><span class="p">],</span> <span class="nx">declarations</span><span class="p">);</span>
<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>Continue to next instance</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">css</span> <span class="o">=</span> <span class="nx">css</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="nx">rbracket</span> <span class="o">+</span> <span class="mi">1</span><span class="p">).</span><span class="nx">trim</span><span class="p">()</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <p>return the json data</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">json</span><span class="p">;</span>
<span class="p">}</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>