purgecss-from-html 8.0.0 → 9.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +87 -4
- package/package.json +12 -10
package/README.md
CHANGED
|
@@ -1,11 +1,94 @@
|
|
|
1
|
-
#
|
|
1
|
+
# purgecss-from-html
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/purgecss-from-html)
|
|
4
|
+
|
|
5
|
+
HTML extractor for [PurgeCSS](https://purgecss.com). This extractor parses HTML files and extracts used selectors with detailed information about tags, classes, IDs, and attributes.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install purgecss-from-html --save-dev
|
|
11
|
+
```
|
|
4
12
|
|
|
5
13
|
## Usage
|
|
6
14
|
|
|
15
|
+
### With PurgeCSS
|
|
16
|
+
|
|
17
|
+
```js
|
|
18
|
+
import { PurgeCSS } from "purgecss";
|
|
19
|
+
import purgeFromHtml from "purgecss-from-html";
|
|
20
|
+
|
|
21
|
+
const result = await new PurgeCSS().purge({
|
|
22
|
+
content: ["**/*.html"],
|
|
23
|
+
css: ["**/*.css"],
|
|
24
|
+
extractors: [
|
|
25
|
+
{
|
|
26
|
+
extractor: purgeFromHtml,
|
|
27
|
+
extensions: ["html"],
|
|
28
|
+
},
|
|
29
|
+
],
|
|
30
|
+
});
|
|
7
31
|
```
|
|
8
|
-
const purgecssFromHtml = require('purgecss-from-html');
|
|
9
32
|
|
|
10
|
-
|
|
33
|
+
### Standalone
|
|
34
|
+
|
|
35
|
+
You can also use the extractor standalone to extract selectors from HTML content:
|
|
36
|
+
|
|
37
|
+
```js
|
|
38
|
+
import purgeFromHtml from "purgecss-from-html";
|
|
39
|
+
|
|
40
|
+
const html = `
|
|
41
|
+
<div class="container">
|
|
42
|
+
<h1 id="title" data-section="hero">Hello World</h1>
|
|
43
|
+
<button class="btn btn-primary">Click me</button>
|
|
44
|
+
</div>
|
|
45
|
+
`;
|
|
46
|
+
|
|
47
|
+
const result = purgeFromHtml(html);
|
|
48
|
+
|
|
49
|
+
console.log(result);
|
|
50
|
+
// {
|
|
51
|
+
// attributes: {
|
|
52
|
+
// names: ["class", "id", "data-section", "class"],
|
|
53
|
+
// values: ["container", "title", "hero", "btn", "btn-primary"]
|
|
54
|
+
// },
|
|
55
|
+
// classes: ["container", "btn", "btn-primary"],
|
|
56
|
+
// ids: ["title"],
|
|
57
|
+
// tags: ["html", "head", "body", "div", "h1", "button"],
|
|
58
|
+
// undetermined: []
|
|
59
|
+
// }
|
|
11
60
|
```
|
|
61
|
+
|
|
62
|
+
## API
|
|
63
|
+
|
|
64
|
+
### `purgeFromHtml(content: string): ExtractorResultDetailed`
|
|
65
|
+
|
|
66
|
+
Parses HTML content and returns detailed selector information.
|
|
67
|
+
|
|
68
|
+
#### Parameters
|
|
69
|
+
|
|
70
|
+
- `content` - HTML code as a string
|
|
71
|
+
|
|
72
|
+
#### Returns
|
|
73
|
+
|
|
74
|
+
An `ExtractorResultDetailed` object containing:
|
|
75
|
+
|
|
76
|
+
- `attributes.names` - Array of attribute names found in the HTML
|
|
77
|
+
- `attributes.values` - Array of attribute values (split by spaces)
|
|
78
|
+
- `classes` - Array of class names extracted from `class` attributes
|
|
79
|
+
- `ids` - Array of IDs extracted from `id` attributes
|
|
80
|
+
- `tags` - Array of HTML tag names used
|
|
81
|
+
- `undetermined` - Array of selectors that couldn't be categorized
|
|
82
|
+
|
|
83
|
+
## How It Works
|
|
84
|
+
|
|
85
|
+
This extractor uses [parse5](https://github.com/inikulin/parse5) to parse the HTML into an AST and then walks through the tree to extract:
|
|
86
|
+
|
|
87
|
+
1. **Tag names** - All HTML elements (e.g., `div`, `span`, `button`)
|
|
88
|
+
2. **Classes** - Values from `class` attributes, split by spaces
|
|
89
|
+
3. **IDs** - Values from `id` attributes
|
|
90
|
+
4. **Attributes** - Both attribute names and values, useful for attribute selectors like `[data-theme]` or `[class*=foo]`
|
|
91
|
+
|
|
92
|
+
## License
|
|
93
|
+
|
|
94
|
+
MIT License
|
package/package.json
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "purgecss-from-html",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "9.0.0",
|
|
4
4
|
"description": "HTML extractor for PurgeCSS",
|
|
5
5
|
"author": "Ffloriel",
|
|
6
6
|
"homepage": "https://github.com/FullHuman/purgecss#readme",
|
|
7
|
-
"license": "
|
|
7
|
+
"license": "MIT",
|
|
8
|
+
"engines": {
|
|
9
|
+
"node": ">=22.12.0"
|
|
10
|
+
},
|
|
8
11
|
"main": "lib/purgecss-from-html.js",
|
|
9
12
|
"directories": {
|
|
10
13
|
"lib": "lib",
|
|
@@ -17,20 +20,19 @@
|
|
|
17
20
|
"type": "git",
|
|
18
21
|
"url": "git+https://github.com/FullHuman/purgecss.git"
|
|
19
22
|
},
|
|
20
|
-
"scripts": {
|
|
21
|
-
"build": "ts-node build.ts",
|
|
22
|
-
"test": "jest"
|
|
23
|
-
},
|
|
24
23
|
"bugs": {
|
|
25
24
|
"url": "https://github.com/FullHuman/purgecss/issues"
|
|
26
25
|
},
|
|
27
26
|
"dependencies": {
|
|
28
|
-
"parse5": "^
|
|
29
|
-
"parse5-htmlparser2-tree-adapter": "^
|
|
27
|
+
"parse5": "^8.0.1",
|
|
28
|
+
"parse5-htmlparser2-tree-adapter": "^8.0.1"
|
|
30
29
|
},
|
|
31
30
|
"publishConfig": {
|
|
32
31
|
"access": "public",
|
|
33
32
|
"registry": "https://registry.npmjs.org/"
|
|
34
33
|
},
|
|
35
|
-
"
|
|
36
|
-
|
|
34
|
+
"scripts": {
|
|
35
|
+
"build": "ts-node build.ts",
|
|
36
|
+
"test": "jest"
|
|
37
|
+
}
|
|
38
|
+
}
|