@rolandjlevy/css-ghost 1.1.1 → 1.1.2
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 +26 -0
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -27,6 +27,31 @@ Scans one or more directories for style files, extracts every class selector def
|
|
|
27
27
|
**Dynamic class detection:**
|
|
28
28
|
Patterns where the class name is truly unknowable at parse time — `styles[variable]` or template literals containing `${}` — are flagged with a ⚠️ warning. All statically resolvable patterns (string literals, ternaries, object keys) are analysed without warnings.
|
|
29
29
|
|
|
30
|
+
## How is this different from PurgeCSS?
|
|
31
|
+
|
|
32
|
+
[PurgeCSS](https://www.npmjs.com/package/purgecss) is a **build-time bundler** — it hooks into webpack, PostCSS, or Gulp to strip unused CSS from your production output. It's designed for removing large framework utility classes (Bootstrap, Tailwind) that you never use.
|
|
33
|
+
|
|
34
|
+
css-ghost is a **source code auditor** — it finds dead selectors in your actual codebase, with no build step and no config file required. Just point it at a folder:
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
npx @rolandjlevy/css-ghost ./src
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
| | PurgeCSS | css-ghost |
|
|
41
|
+
|---|---|---|
|
|
42
|
+
| Works on source files | ❌ Build output only | ✅ |
|
|
43
|
+
| Zero config, no build step | ❌ Requires webpack / PostCSS | ✅ |
|
|
44
|
+
| CSS custom property orphans | ❌ | ✅ |
|
|
45
|
+
| Git history per orphan | ❌ | ✅ |
|
|
46
|
+
| Pre-commit hook | ❌ | ✅ |
|
|
47
|
+
| Deletes dead code for you | ❌ | ✅ |
|
|
48
|
+
| MUI / vanilla-extract aware | ❌ | ✅ |
|
|
49
|
+
| Safe with dynamic classes | ❌ Silently removes them | ✅ Flags with ⚠️ |
|
|
50
|
+
|
|
51
|
+
The two tools are complementary: PurgeCSS for trimming framework output at build time; css-ghost for auditing your own hand-written CSS throughout development.
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
30
55
|
## To enable AI features
|
|
31
56
|
|
|
32
57
|
css-ghost can generate a plain English summary of your orphaned selectors using a free [OpenRouter](https://openrouter.ai) API key. Run the setup wizard once:
|
|
@@ -266,6 +291,7 @@ Running `css-ghost ./src` prints a live summary to your terminal:
|
|
|
266
291
|
}
|
|
267
292
|
|
|
268
293
|
📁 1 style file scanned
|
|
294
|
+
💾 Potential savings: 3 selectors removed
|
|
269
295
|
```
|
|
270
296
|
|
|
271
297
|
Each orphan shows:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rolandjlevy/css-ghost",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "Find and remove unused CSS selectors and orphaned CSS custom properties — a CLI linter and auditor for React, Vue, Svelte, SCSS, and CSS Modules",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -36,7 +36,8 @@
|
|
|
36
36
|
"vue",
|
|
37
37
|
"svelte",
|
|
38
38
|
"scss",
|
|
39
|
-
"css-modules"
|
|
39
|
+
"css-modules",
|
|
40
|
+
"purgecss"
|
|
40
41
|
],
|
|
41
42
|
"author": "Roland Levy",
|
|
42
43
|
"license": "MIT",
|