Leo's take on security, eBPF, Linux, kernel, and whatever tech he meets Zola 2016-03-04T00:00:00+00:00 https://leodido.dev/tags/css/atom.xml 2016-03-04T00:00:00+00:00 2016-03-04T00:00:00+00:00 Unknown https://leodido.dev/projects/postcss-clean/ <p>Compression will be handled by <strong><a rel="external" href="http://github.com/jakubpawlowicz/clean-css">clean-css</a></strong>, which according to <a rel="external" href="http://goalsmashers.github.io/css-minification-benchmark">this benchmark</a> is one of the top (probably the best) libraries for minifying CSS.</p> <h2 id="install">Install<a class="zola-anchor" href="#install" aria-label="Anchor link for: install">§</a> </h2> <p>With <a rel="external" href="https://npmjs.org/package/postcss-clean">npm</a> do:</p> <pre class="giallo z-code"><code data-lang="plain"><span class="giallo-l"><span>npm install postcss-clean --save</span></span></code></pre><h2 id="example">Example<a class="zola-anchor" href="#example" aria-label="Anchor link for: example">§</a> </h2> <h3 id="input">Input<a class="zola-anchor" href="#input" aria-label="Anchor link for: input">§</a> </h3> <pre class="giallo z-code"><code data-lang="css"><span class="giallo-l"><span class="z-entity z-other z-attribute-name z-class z-css">.try</span><span> {</span></span> <span class="giallo-l"><span class="z-support z-type z-property-name"> color</span><span>:</span><span class="z-constant z-other z-color z-rgb-value"> #607d8b</span><span>;</span></span> <span class="giallo-l"><span class="z-support z-type z-property-name"> width</span><span>:</span><span class="z-constant z-numeric z-keyword z-other z-unit"> 32px</span><span>;</span></span> <span class="giallo-l"><span>}</span></span></code></pre><h3 id="output">Output<a class="zola-anchor" href="#output" aria-label="Anchor link for: output">§</a> </h3> <pre class="giallo z-code"><code data-lang="css"><span class="giallo-l"><span class="z-entity z-other z-attribute-name z-class z-css">.try</span><span>{</span><span class="z-support z-type z-property-name">color</span><span>:</span><span class="z-constant z-other z-color z-rgb-value">#607d8b</span><span>;</span><span class="z-support z-type z-property-name">width</span><span>:</span><span class="z-constant z-numeric z-keyword z-other z-unit">32px</span><span>}</span></span></code></pre><h3 id="input-1">Input<a class="zola-anchor" href="#input-1" aria-label="Anchor link for: input-1">§</a> </h3> <pre class="giallo z-code"><code data-lang="css"><span class="giallo-l"><span class="z-entity z-other z-attribute-name z-pseudo-class">:host</span><span> {</span></span> <span class="giallo-l"><span class="z-support z-type z-property-name"> display</span><span>:</span><span class="z-support z-constant z-property-value"> block</span><span>;</span></span> <span class="giallo-l"><span>}</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-entity z-other z-attribute-name z-pseudo-class z-entity z-other z-attribute-name z-pseudo-element z-css">:host ::content</span><span> {</span></span> <span class="giallo-l"><span> &amp; &gt; * {</span></span> <span class="giallo-l"><span class="z-support z-type z-property-name"> color</span><span>:</span><span class="z-support z-function"> var</span><span>(</span><span class="z-variable">--primary-color</span><span>);</span></span> <span class="giallo-l"><span> }</span></span> <span class="giallo-l"><span>}</span></span></code></pre><h3 id="output-1">Output<a class="zola-anchor" href="#output-1" aria-label="Anchor link for: output-1">§</a> </h3> <pre class="giallo z-code"><code data-lang="css"><span class="giallo-l"><span class="z-entity z-other z-attribute-name z-pseudo-class">:host</span><span>{</span><span class="z-support z-type z-property-name">display</span><span>:</span><span class="z-support z-constant z-property-value">block</span><span>}</span><span class="z-entity z-other z-attribute-name z-pseudo-class z-entity z-other z-attribute-name z-pseudo-element z-css">:host ::content</span><span class="z-keyword z-operator">&gt;</span><span class="z-entity z-name z-tag">*</span><span>{</span><span class="z-support z-type z-property-name">color</span><span>:</span><span class="z-support z-function">var</span><span>(</span><span class="z-variable">--my-color</span><span>)}</span></span></code></pre> <p><strong>Note</strong> this example assumes you combined postcss-clean with other plugins (e.g. <a rel="external" href="https://github.com/jonathantneal/postcss-nesting">postcss-nesting</a>).</p> <h2 id="api">API<a class="zola-anchor" href="#api" aria-label="Anchor link for: api">§</a> </h2> <h3 id="clean-options"><code>clean([options])</code><a class="zola-anchor" href="#clean-options" aria-label="Anchor link for: clean-options">§</a> </h3> <p>Note that <strong>postcss-clean</strong> is an asynchronous processor. It cannot be used like this:</p> <pre class="giallo z-code"><code data-lang="javascript"><span class="giallo-l"><span class="z-storage z-type">var</span><span class="z-variable"> out</span><span class="z-keyword z-operator"> =</span><span class="z-entity z-name z-function"> postcss</span><span>([</span><span class="z-entity z-name z-function"> clean</span><span>() ]).</span><span class="z-entity z-name z-function">process</span><span>(</span><span class="z-variable">css</span><span>).</span><span class="z-variable">css</span><span>;</span></span> <span class="giallo-l"><span class="z-variable">console</span><span>.</span><span class="z-entity z-name z-function">log</span><span>(</span><span class="z-variable">out</span><span>)</span></span></code></pre> <p>Instead make sure your runner uses the async APIs:</p> <pre class="giallo z-code"><code data-lang="javascript"><span class="giallo-l"><span class="z-entity z-name z-function">postcss</span><span>([</span><span class="z-entity z-name z-function"> clean</span><span>() ]).</span><span class="z-entity z-name z-function">process</span><span>(</span><span class="z-variable">css</span><span>).</span><span class="z-entity z-name z-function">then</span><span>(</span><span class="z-storage z-type">function</span><span>(</span><span class="z-variable">out</span><span>) {</span></span> <span class="giallo-l"><span class="z-variable"> console</span><span>.</span><span class="z-entity z-name z-function">log</span><span>(</span><span class="z-variable">out</span><span>.</span><span class="z-variable">css</span><span>);</span></span> <span class="giallo-l"><span>});</span></span></code></pre><h4 id="options">options<a class="zola-anchor" href="#options" aria-label="Anchor link for: options">§</a> </h4> <p>It simply proxies the <a rel="external" href="http://github.com/jakubpawlowicz/clean-css">clean-css</a> options. See the complete list of options <a rel="external" href="https://github.com/jakubpawlowicz/clean-css/tree/3.4#how-to-use-clean-css-api">here</a>.</p> <h2 id="usage">Usage<a class="zola-anchor" href="#usage" aria-label="Anchor link for: usage">§</a> </h2> <p>See the <a rel="external" href="https://github.com/postcss/postcss#usage">PostCSS documentation</a> for examples for your environment.</p> <h2 id="contributing">Contributing<a class="zola-anchor" href="#contributing" aria-label="Anchor link for: contributing">§</a> </h2> <p>Pull requests are welcome.</p> <h2 id="license">License<a class="zola-anchor" href="#license" aria-label="Anchor link for: license">§</a> </h2> <p>MIT © Leonardo Di Donato</p>