@fullhuman/purgecss-from-tsx 8.0.0 → 9.0.0

package/README.md

@@ -15,7 +15,7 @@ npm install @fullhuman/purgecss-from-tsx --save-dev
 ### With PurgeCSS
 
 ```js
-import PurgeCSS from "purgecss";
+import { PurgeCSS } from "purgecss";
 import purgeFromTsx from "@fullhuman/purgecss-from-tsx";
 
 const result = await new PurgeCSS().purge({
@@ -105,10 +105,12 @@ This extractor works in two steps:
 
 The extractor parses TSX and extracts:
 
-1. **Component names** - JSX element names (e.g., `div`, `Header`, `MyComponent`)
-2. **className values** - String values from `className` attributes, split by spaces
+1. **Component names** - JSX element names (e.g., `div`, `Header`, `MyComponent`), including elements inside the value of another attribute (e.g., `icon={<Icon />}`)
+2. **className values** - String values from `className` attributes, split by whitespace
 3. **id values** - String values from `id` attributes
 
+When `className` or `id` is an expression, its static parts are extracted the same way as by the [JSX extractor](https://github.com/FullHuman/purgecss/tree/main/packages/purgecss-from-jsx#what-it-extracts): for example, `className={active ? "on" : "off"}` gives `on` and `off`, and ``className={`card ${size}`}`` gives `card`. The TypeScript syntax is stripped first, so `className={"card" as string}` gives `card`.
+
 ### Example
 
 ```tsx
@@ -129,7 +131,7 @@ Extracted selectors: `["article", "card", "card-hover", "featured", "CardHeader"
 ## Limitations
 
 - Only extracts static string values from `className` and `id`
-- Dynamic expressions like `className={styles.container}` or template literals are not fully supported
+- Values computed at runtime, like `className={styles.container}` or the `size` of ``className={`btn-${size}`}``, are not extracted
 - For dynamic class names, consider using PurgeCSS's [safelist](https://purgecss.com/safelisting.html) option
 
 ## License

package/lib/purgecss-from-tsx.esm.js

@@ -14,6 +14,7 @@ function purgeFromTsx(options) {
         return purgeFromJsx(options === null || options === void 0 ? void 0 : options.acornOptions)(ts.transpileModule(content, {
             compilerOptions: {
                 jsx: ts.JsxEmit.Preserve,
+                module: ts.ModuleKind.CommonJS,
                 ...options === null || options === void 0 ? void 0 : options.tsOptions,
             },
         }).outputText);

package/lib/purgecss-from-tsx.js

@@ -35,6 +35,7 @@ function purgeFromTsx(options) {
         return purgeFromJsx(options === null || options === void 0 ? void 0 : options.acornOptions)(ts__namespace.transpileModule(content, {
             compilerOptions: {
                 jsx: ts__namespace.JsxEmit.Preserve,
+                module: ts__namespace.ModuleKind.CommonJS,
                 ...options === null || options === void 0 ? void 0 : options.tsOptions,
             },
         }).outputText);

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@fullhuman/purgecss-from-tsx",
-  "version": "8.0.0",
+  "version": "9.0.0",
   "description": "TSX extractor for PurgeCSS",
   "author": "Ffloriel",
   "homepage": "https://github.com/FullHuman/purgecss#readme",
   "license": "MIT",
+  "engines": {
+    "node": ">=22.12.0"
+  },
   "main": "./lib/purgecss-from-tsx.js",
   "module": "./lib/purgecss-from-tsx.esm.js",
   "types": "./lib/purgecss-from-tsx.d.ts",
@@ -19,21 +22,20 @@
     "type": "git",
     "url": "git+https://github.com/FullHuman/purgecss.git"
   },
-  "scripts": {
-    "build": "ts-node build.ts",
-    "test": "jest"
-  },
   "bugs": {
     "url": "https://github.com/FullHuman/purgecss/issues"
   },
   "dependencies": {
-    "@fullhuman/purgecss-from-jsx": "^8.0.0",
-    "acorn": "^8.7.0",
-    "typescript": "^5.6.2"
+    "@fullhuman/purgecss-from-jsx": "^9.0.0",
+    "acorn": "^8.19.0",
+    "typescript": "^6.0.3"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "859266ccb4ea80e0911fa32f1e215397978b3c89"
-}
+  "scripts": {
+    "build": "ts-node build.ts",
+    "test": "jest"
+  }
+}