update doc #116

Author: tbela99

docs/assets/hierarchy.js

@@ -204,11 +204,11 @@ <h2 id="class-composition" class="tsd-anchor-link">Class composition<a href="#cl
 </code><button type="button">Copy</button></pre>
 
 <p>generated css code</p>
-<pre><code class="css"><br/><span class="hl-15">.r7bhp_goal</span><span class="hl-1"> </span><span class="hl-15">.bg-indigo_gy28g</span><span class="hl-1"> {</span><br/><span class="hl-1">    </span><span class="hl-6">background</span><span class="hl-1">: </span><span class="hl-16">indigo</span><br/><span class="hl-1">}</span><br/><span class="hl-15">.indigo-white_wims0</span><span class="hl-1"> {</span><br/><span class="hl-1">    </span><span class="hl-6">color</span><span class="hl-1">: </span><span class="hl-16">#fff</span><br/><span class="hl-1">}</span>
+<pre><code class="css"><span class="hl-15">.goal_r7bhp</span><span class="hl-1"> </span><span class="hl-15">.bg-indigo_gy28g</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">background</span><span class="hl-1">: </span><span class="hl-16">indigo</span><br/><span class="hl-1">}</span><br/><span class="hl-15">.indigo-white_wims0</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">color</span><span class="hl-1">: </span><span class="hl-16">#fff</span><br/><span class="hl-1">}</span>
 </code><button type="button">Copy</button></pre>
 
 <p>generated class mapping</p>
-<pre><code class="json"><br/><span class="hl-1">{</span><br/><span class="hl-1">    </span><span class="hl-18">&quot;goal&quot;</span><span class="hl-1">: </span><span class="hl-2">&quot;r7bhp_goal&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-18">&quot;bg-indigo&quot;</span><span class="hl-1">: </span><span class="hl-2">&quot;bg-indigo_gy28g&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-18">&quot;indigo-white&quot;</span><span class="hl-1">: </span><span class="hl-2">&quot;indigo-white_wims0 bg-indigo_gy28g qw06e_title&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-18">&quot;title&quot;</span><span class="hl-1">: </span><span class="hl-2">&quot;qw06e_title&quot;</span><br/><span class="hl-1">}</span>
+<pre><code class="json"><br/><span class="hl-1">{</span><br/><span class="hl-1">    </span><span class="hl-18">&quot;goal&quot;</span><span class="hl-1">: </span><span class="hl-2">&quot;goal_r7bhp&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-18">&quot;bg-indigo&quot;</span><span class="hl-1">: </span><span class="hl-2">&quot;bg-indigo_gy28g&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-18">&quot;indigo-white&quot;</span><span class="hl-1">: </span><span class="hl-2">&quot;indigo-white_wims0 bg-indigo_gy28g title_qw06e&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-18">&quot;title&quot;</span><span class="hl-1">: </span><span class="hl-2">&quot;title_qw06e&quot;</span><br/><span class="hl-1">}</span>
 </code><button type="button">Copy</button></pre>
 
 <p>classes can be composed from other files as well as the global scope</p>
@@ -280,7 +280,7 @@ <h3 id="dash-case-only" class="tsd-anchor-link">Dash case only<a href="#dash-cas
 <pre><code class="json"><span class="hl-1">{</span><br/><span class="hl-1">    </span><span class="hl-18">&quot;class-name&quot;</span><span class="hl-1">: </span><span class="hl-2">&quot;class-name_vjnt1&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-18">&quot;sub-class&quot;</span><span class="hl-1">: </span><span class="hl-2">&quot;sub-class_sgkqy class-name_vjnt1&quot;</span><br/><span class="hl-1">}</span>
 </code><button type="button">Copy</button></pre>
 
-<h2 id="pattern" class="tsd-anchor-link">Pattern<a href="#pattern" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>the <code>pattern</code> option is used to configure the pattern of the generated scoped names.</p>
+<h2 id="pattern" class="tsd-anchor-link">Pattern<a href="#pattern" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>the <code>pattern</code> option is used to configure the generated scoped names.</p>
 <pre><code class="typescript"><br/><span class="hl-8">import</span><span class="hl-1"> {</span><span class="hl-9">transform</span><span class="hl-1">, </span><span class="hl-9">ModulePatternEnum</span><span class="hl-1">} </span><span class="hl-8">from</span><span class="hl-1"> </span><span class="hl-2">&#39;@tbela99/css-parser&#39;</span><span class="hl-1">;</span><br/><span class="hl-8">import</span><span class="hl-1"> </span><span class="hl-8">type</span><span class="hl-1"> {</span><span class="hl-9">TransformResult</span><span class="hl-1">} </span><span class="hl-8">from</span><span class="hl-1"> </span><span class="hl-2">&#39;@tbela99/css-parser&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-10">const</span><span class="hl-1"> </span><span class="hl-11">css</span><span class="hl-1"> = </span><span class="hl-2">`</span><br/><span class="hl-2">.className {</span><br/><span class="hl-2">  background: red;</span><br/><span class="hl-2">  color: yellow;</span><br/><span class="hl-2">}</span><br/><br/><span class="hl-2">.subClass {</span><br/><span class="hl-2">  composes: className;</span><br/><span class="hl-2">  background: blue;</span><br/><span class="hl-2">}</span><br/><span class="hl-2">`</span><span class="hl-1">;</span><br/><br/><span class="hl-10">let</span><span class="hl-1"> </span><span class="hl-9">result</span><span class="hl-1">: </span><span class="hl-13">TransformResult</span><span class="hl-1"> = </span><span class="hl-8">await</span><span class="hl-1"> </span><span class="hl-0">transform</span><span class="hl-1">(</span><span class="hl-9">css</span><span class="hl-1">, {</span><br/><br/><span class="hl-1">    </span><span class="hl-9">beautify:</span><span class="hl-1"> </span><span class="hl-10">true</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-9">module:</span><span class="hl-1"> {</span><br/><span class="hl-1">        </span><span class="hl-9">pattern:</span><span class="hl-1"> </span><span class="hl-2">&#39;[local]-[hash:sha256]&#39;</span><br/><span class="hl-1">    }</span><br/><br/><span class="hl-1">});</span><br/><br/><span class="hl-9">console</span><span class="hl-1">.</span><span class="hl-0">log</span><span class="hl-1">(</span><span class="hl-9">result</span><span class="hl-1">.</span><span class="hl-9">code</span><span class="hl-1">);</span>
 </code><button type="button">Copy</button></pre>