feat: add purgecss-from-tsx (#716)

package.json

@@ -9,6 +9,7 @@
     "purgecss-from-jsx",
     "purgecss-from-pug",
     "purgecss-from-twig",
+    "purgecss-from-tsx",
     "purgecss-webpack-plugin",
     "purgecss-with-wordpress",
     "vue-cli-plugin-purgecss"

packages/purgecss-from-jsx/src/index.ts

@@ -5,7 +5,7 @@ import {extend} from "acorn-jsx-walk";
 
 extend(walk.base);
 
-function purgeFromJsx(options: acorn.Options) {
+function purgeFromJsx(options?: acorn.Options) {
   return (content: string): string[] => {
     // Will be filled during walk
     const state = {selectors: []};

packages/purgecss-from-tsx/README.md

@@ -0,0 +1,11 @@
+# `purgecss-from-tsx`
+
+> TODO: description
+
+## Usage
+
+```
+const purgecssFromTsx = require('purgecss-from-tsx');
+
+// TODO: DEMONSTRATE API
+```

packages/purgecss-from-tsx/__tests__/data.ts

@@ -0,0 +1,40 @@
+export const TEST_1_CONTENT = `
+import PropTypes from "prop-types";
+import React from "react";
+
+type MyComponentProps = {
+  login: any;
+};
+
+type MyComponentState = {
+  username: string;
+  password: string;
+};
+
+class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
+  static propTypes: any;
+
+  render() {
+    return (
+      <React.Fragment>
+        <div className="test-container">Well</div>
+        <div className="test-footer" id="an-id"></div>
+        <a href="#" id="a-link" className="a-link"></a>
+        <input id="blo" type="text" disabled/>
+      </React.Fragment>
+    );
+  }
+}
+
+MyComponent.propTypes = {
+    login: PropTypes.func.isRequired
+};
+
+export default MyComponent;
+`;
+
+export const TEST_1_TAG = ["div", "a", "input"];
+
+export const TEST_1_CLASS = ["test-container", "test-footer", "a-link"];
+
+export const TEST_1_ID = ["a-link", "blo"];

packages/purgecss-from-tsx/__tests__/index.test.ts

@@ -0,0 +1,38 @@
+import purgeTsx from "../src/index";
+
+import { TEST_1_CONTENT, TEST_1_TAG, TEST_1_CLASS, TEST_1_ID } from "./data";
+
+const plugin = purgeTsx();
+
+describe("purgeTsx", () => {
+  describe("from a normal html document", () => {
+    it("finds tag selectors", () => {
+      const received = plugin(TEST_1_CONTENT);
+      for (const item of TEST_1_TAG) {
+        expect(received.includes(item)).toBe(true);
+      }
+    });
+
+    it("finds classes selectors", () => {
+      const received = plugin(TEST_1_CONTENT);
+      for (const item of TEST_1_CLASS) {
+        expect(received.includes(item)).toBe(true);
+      }
+    });
+
+    it("finds id selectors", () => {
+      const received = plugin(TEST_1_CONTENT);
+      for (const item of TEST_1_ID) {
+        expect(received.includes(item)).toBe(true);
+      }
+    });
+
+    it("finds all selectors", () => {
+      const received = plugin(TEST_1_CONTENT);
+      const selectors = [...TEST_1_TAG, ...TEST_1_CLASS, ...TEST_1_ID];
+      for (const item of selectors) {
+        expect(received.includes(item)).toBe(true);
+      }
+    });
+  });
+});

packages/purgecss-from-tsx/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "purgecss-from-tsx",
+  "version": "4.0.3",
+  "description": "TSX extractor for PurgeCSS",
+  "author": "Ffloriel",
+  "homepage": "https://github.com/FullHuman/purgecss#readme",
+  "license": "ISC",
+  "main": "./lib/purgecss-from-tsx.js",
+  "module": "./lib/purgecss-from-tsx.esm.js",
+  "types": "./lib/purgecss-from-tsx.d.ts",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/FullHuman/purgecss.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "bugs": {
+    "url": "https://github.com/FullHuman/purgecss/issues"
+  },
+  "dependencies": {
+    "acorn": "^7.4.0",
+    "purgecss-from-jsx": "^4.0.3",
+    "typescript": "^4.3.2"
+  }
+}

packages/purgecss-from-tsx/src/index.ts

@@ -0,0 +1,21 @@
+import acorn from "acorn";
+import * as ts from "typescript";
+import purgeFromJsx from "purgecss-from-jsx";
+
+function purgeFromTsx(options?: {
+  acornOptions?: acorn.Options,
+  tsOptions?: ts.CompilerOptions
+}): (content: string) => string[] {
+  return (content: string): string[] => {
+    return purgeFromJsx(options?.acornOptions)(
+      ts.transpileModule(content, {
+        compilerOptions: {
+          jsx: ts.JsxEmit.Preserve,
+          ...options?.tsOptions
+        }
+      }).outputText
+    );
+  };
+}
+
+export default purgeFromTsx;

scripts/build.ts

@@ -45,6 +45,10 @@ const packages = [
   {
     name: "purgecss-from-jsx",
     external: ["acorn", "acorn-walk", "acorn-jsx", "acorn-jsx-walk"],
+  },
+  {
+    name: "purgecss-from-tsx",
+    external: ["acorn", "purgecss-from-jsx", "typescript"],
   }
 ];
 

tsconfig.json

@@ -22,7 +22,8 @@
       "purgecss": ["packages/purgecss/src"],
       "@fullhuman/purgecss-from-html": ["packages/purgecss-from-html/src"],
       "@fullhuman/purgecss-from-pug": ["packages/purgecss-from-pug/src"],
-      "@fullhuman/purgecss-from-jsx": ["packages/purgecss-from-jsx/src"]
+      "@fullhuman/purgecss-from-jsx": ["packages/purgecss-from-jsx/src"],
+      "@fullhuman/purgecss-from-tsx": ["packages/purgecss-from-tsx/src"]
     }
   },
   "include": [