Skip to content

Commit

Permalink
docs: add documentation for purgecss-from-pug
Browse files Browse the repository at this point in the history
  • Loading branch information
Ffloriel committed Oct 2, 2024
1 parent 39a855c commit 797400d
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 8 deletions.
25 changes: 20 additions & 5 deletions docs/extractors.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,19 +43,19 @@ Using a specific extractor for an extension should provide you with the best acc
You can use an extractor by settings the extractors option in the PurgeCSS config file.

```js
import purgeJs from "purgecss-from-js";
import purgeHtml from "purgecss-from-html";
import { purgeCSSFromPug } from "purgecss-from-pug";
import { purgeCSSFromHtml } from "purgecss-from-html";

const options = {
content: [], // files to extract the selectors from
css: [], // css
extractors: [
{
extractor: purgeJs,
extensions: ["js"],
extractor: purgeCSSFromPug,
extensions: ["pug"],
},
{
extractor: purgeHtml,
extractor: purgeCSSFromHtml,
extensions: ["html"],
},
],
Expand All @@ -67,6 +67,21 @@ export default options;

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 `purgecss-from-[typefile]` \(e.g. purgecss-from-pug\). Using this convention will allow users to look at the list of extractor on npm by searching `purgecss-from`.

The function can returns either an array of selectors (tags, classes, ids) or the object below for better accuracy:

```ts
interface ExtractorResultDetailed {
attributes: {
names: string[];
values: string[];
};
classes: string[];
ids: string[];
tags: string[];
undetermined: string[];
}
```

```js
const purgeFromJs = (content) => {
// return array of css selectors
Expand Down
17 changes: 14 additions & 3 deletions packages/purgecss-from-pug/README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,22 @@
# `purgecss-from-pug`

> TODO: description
A PurgeCSS extractor for PUG files that automatically generates a list of used CSS selectors from your PUG files. This extractor can be used with PurgeCSS to eliminate unused CSS and reduce the size of your production builds.

## Usage

```
const purgecssFromPug = require('purgecss-from-pug');
import { PurgeCSS } from 'purgecss'
import { purgeCSSFromPug } from 'purgecss-from-pug'
const options = {
content: [], // files to extract the selectors from
css: [], // css
extractors: [
{
extractor: purgeCSSFromPug,
extensions: ['pug']
},
]
}
// TODO: DEMONSTRATE API
const purgecss = await new PurgeCSS().purge();
```
10 changes: 10 additions & 0 deletions packages/purgecss-from-pug/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
/**
* Pug extractor for PurgeCSS
*
* A PurgeCSS extractor for PUG files that automatically generates a list of
* used CSS selectors. This extractor can be used with PurgeCSS to eliminate
* unused CSS and reduce the size of your production builds.
*
* @packageDocumentation
*/

import lex from "pug-lexer";
import type { ExtractorResultDetailed } from "purgecss";

Expand Down

0 comments on commit 797400d

Please sign in to comment.