1import{_ as a,c as e,a as n,o as t}from"./app-C6GmB-_k.js";const o={};function i(p,s){return t(),e("div",null,[...s[0]||(s[0]=[n(`<h1 id="extractors" tabindex="-1"><a class="header-anchor" href="#extractors"><span>Extractors</span></a></h1><p>PurgeCSS can be adapted to suit your need. If you notice a lot of unused css is not being removed, you might want to use a specific extractor.</p><p>PurgeCSS relies on extractors to get the list of selector used in a file. There are multiples types of files that can contains selectors such as html files, templating files like pug, or even javascript file.</p><h2 id="default-extractor" tabindex="-1"><a class="header-anchor" href="#default-extractor"><span>Default extractor</span></a></h2><p>PurgeCSS provides a default extractor that is working with all types of files but can be limited and not fit exactly the type of files or css framework that you are using.</p><p>The default extractor considers every word of a file as a selector. The default extractor has a few limitations:</p><ul><li>Does not consider special characters such as <code>@</code>, <code>:</code>, <code>/</code></li></ul><h2 id="using-an-extractor" tabindex="-1"><a class="header-anchor" href="#using-an-extractor"><span>Using an extractor</span></a></h2><p>Using an extractor can be useful if you notice that PurgeCSS does not remove enough unused css or removes used ones.</p><p>Using a specific extractor for an extension should provide you with the best accuracy. If you want to purge exclusively html files you might want to consider the <code>purgecss-from-html</code> extractor.</p><p>You can use an extractor by settings the extractors option in the PurgeCSS config file.</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> purgeCSSFromPug <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"purgecss-from-pug"</span><span class="token punctuation">;</span></span> 2<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> purgeCSSFromHtml <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"purgecss-from-html"</span><span class="token punctuation">;</span></span> 3<span class="line"></span> 4<span class="line"><span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span></span> 5<span class="line"> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// files to extract the selectors from</span></span> 6<span class="line"> <span class="token literal-property property">css</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// css</span></span> 7<span class="line"> <span class="token literal-property property">extractors</span><span class="token operator">:</span> <span class="token punctuation">[</span></span> 8<span class="line"> <span class="token punctuation">{</span></span> 9<span class="line"> <span class="token literal-property property">extractor</span><span class="token operator">:</span> purgeCSSFromPug<span class="token punctuation">,</span></span> 10<span class="line"> <span class="token literal-property property">extensions</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"pug"</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span> 11<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 12<span class="line"> <span class="token punctuation">{</span></span> 13<span class="line">
13 <span class="token literal-property property">extractor</span><span class="token operator">:</span> purgeCSSFromHtml<span class="token punctuation">,</span></span> 14<span class="line"> <span class="token literal-property property">extensions</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"html"</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span> 15<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 16<span class="line"> <span class="token punctuation">]</span><span class="token punctuation">,</span></span> 17<span class="line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span> 18<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> options<span class="token punctuation">;</span></span> 19<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="creating-an-extractor" tabindex="-1"><a class="header-anchor" href="#creating-an-extractor"><span>Creating an extractor</span></a></h2><p>An extractor is a simple function that takes the content of a file as a string and returns an array of selectors. By convention, the name of the npm package is <code>purgecss-from-[typefile]</code> (e.g. purgecss-from-pug). Using this convention will allow users to look at the list of extractor on npm by searching <code>purgecss-from</code>.</p><p>The function can returns either an array of selectors (tags, classes, ids) or the object below for better accuracy:</p><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts"><pre><code class="language-typescript"><span class="line"><span class="token keyword">interface</span> <span class="token class-name">ExtractorResultDetailed</span> <span class="token punctuation">{</span></span> 20<span class="line"> attributes<span class="token operator">:</span> <span class="token punctuation">{</span></span> 21<span class="line"> names<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span> 22<span class="line"> values<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span> 23<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span> 24<span class="line"> classes<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span> 25<span class="line"> ids<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span> 26<span class="line"> tags<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span> 27<span class="line"> undetermined<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span> 28<span class="line"><span class="token punctuation">}</span></span> 29<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">const</span> <span class="token function-variable function">purgeFromJs</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">content</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span> 30<span class="line"> <span class="token comment">// return array of css selectors</span></span> 31<span class="line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span> 32<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="list-of-available-extractors-in-progress" tabindex="-1"><a class="header-anchor" href="#list-of-available-extractors-in-progress"><span>List of available extractors (in progress)</span></a></h2><div class="hint-container warning"><p class="hint-container-title">Warning</p><p>Those extractors are still a work in progress. It is not encouraged to use them in production yet.</p></div><ul><li><a href="https://github.com/FullHuman/purgecss/blob/main/packages/purgecss-from-html" target="_blank" rel="noopener noreferrer">purgecss-from-html</a>: HTML files (.html)</li><li><a href="https://github.com/FullHuman/purgecss/blob/main/packages/purgecss-from-jsx" target="_blank" rel="noopener noreferrer">purgecss-from-jsx</a>: JSX files</li><li><a href="https://github.com/FullHuman/purgecss/blob/main/packages/purgecss-from-pug" target="_blank" rel="noopener noreferrer">purgecss-from-pug</a>: Pug files (.pug)</li></ul>`,20)])])}const l=a(o,[["render",i]]),c=JSON.parse('{"path":"/extractors.html","title":"Extractors","lang":"en-US","frontmatter":{"title":"Extractors","lang":"en-US","meta":[{"name":"description","content":"PurgeCSS relies on extractors to get the list of selector used in a file. There are multiples types of files that can contains selectors such as html files, templating files like pug, or even javascript file."},{"itemprop":"description","content":"PurgeCSS relies on extractors to get the list of selector used in a file. There are multiples types of files that can contains selectors such as html files, templating files like pug, or even javascript file."},{"property":"og:url","content":"https://purgecss.com/extractors"},{"property":"og:site_name","content":"purgecss.com"},{"property":"og:image","content":"https://i.imgur.com/UEiUiJ0.png"},{"property":"og:locale","content":"en_US"},{"property":"og:title","content":"Remove unused CSS - PurgeCSS"},{"property":"og:description","content":"PurgeCSS relies on extractors to get the list of selector used in a file. There are multiples types of files that can contains selectors such as html files, templating files like pug, or even javascript file."}]}
32,"git":{"updatedTime":1727851149000,"contributors":[{"name":"Ffloriel","username":"Ffloriel","email":"[email protected]","commits":5,"url":"https://github.com/Ffloriel"},{"name":"Tanmay Rajani","username":"","email":"[email protected]","commits":1},{"name":"bartveneman","username":"bartveneman","email":"[email protected]","commits":1,"url":"https://github.com/bartveneman"},{"name":"Kevin Ramharak","username":"","email":"[email protected]","commits":1},{"name":"Floriel","username":"Floriel","email":"[email protected]","commits":4,"url":"https://github.com/Floriel"},{"name":"Daniel Diekmeier","username":"","email":"[email protected]","commits":1}],"changelog":[{"hash":"797400db10689b46ead1feeb4a4820701e40eb7c","time":1727851149000,"email":"[email protected]","author":"Floriel","message":"docs: add documentation for purgecss-from-pug"},{"hash":"c078c415b5851b797adb36b31e834f93e24d51fa","time":1680440447000,"email":"[email protected]","author":"Floriel","message":"refactor: remove unimplemented purgecss-from-twig"},{"hash":"8d28e2a167eaf02e005b9d3e1831d9dab8ca9846","time":1670089630000,"email":"[email protected]","author":"Daniel Diekmeier","message":"docs: Point to new extractor package names (#1024)"},{"hash":"cc515ac6e14c30c7f838d1dc6f177ae867bf91da","time":1645193462000,"email":"[email protected]","author":"Floriel","message":"docs: change page titles"},{"hash":"54fd7cffd160086b25944051ae26d20e895b7627","time":1641054426000,"email":"[email protected]","author":"Floriel","message":"docs: update to vuepress 2"},{"hash":"b77a4ddbe978291604c2dfdc2f6917fbffd17ed4","time":1627930464000,"email":"[email protected]","author":"Ffloriel","message":"docs: remove badges"},{"hash":"a3f163b26cf74af7eb1c3820b8a59af53a8360ec","time":1607897797000,"email":"[email protected]","author":"Ffloriel","message":"docs: update docs 3.1"},{"hash":"c8d4b15d3d29639c7a6ac5220b5f65178900597e","time":1602340283000,"email":"[email protected]","author":"Kevin Ramharak","message":"fix example code to reflect the correct package names"},{"hash":"72cf2b751dddd9beb55ebfc33045433155e29244","time":1597036258000,"email":"[email protected]","author":"Bart Veneman","message":"fix typo: encourage -> encouraged"},{"hash":"3305398106a6f486cf3c67f77402f0164f235aca","time":1588954260000,"email":"[email protected]","author":"Tanmay Rajani","message":"updates URLs of extractors"},{"hash":"1a5a88e7170bdec3b29852e92fa13dfaa46e0b6e","time":1575231434000,"email":"[email protected]","author":"Ffloriel","message":"docs: add guides and work on theme purgecss"},{"hash":"8e6fa52e3e60e0ba3ffebcf516e15c80ad773355","time":1516003661000,"email":"[email protected]","author":"Ffloriel","message":"remove docs"},{"hash":"1b17127d426d7d55ea0102a7d26673d208086447","time":1515570579000,"email":"[email protected]","author":"Ffloriel","message":"add documentation files"}]},"filePathRelative":"extractors.md"}');export{l as comp,c as data};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.