Extract a fast-css-prop package.

package.json

@@ -9,6 +9,7 @@
     "codegen": "yarn workspaces foreach run codegen"
   },
   "workspaces": [
+    "packages/fast-css-prop",
     "packages/truss",
     "packages/template-tachyons",
     "packages/testing-tachyons",

packages/app-tachyons-fela-prop/package.json

@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@homebound/fast-css-prop": "workspace:*",
     "@homebound/truss-testing-tachyons": "workspace:*",
-    "fela": "^12.2.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

packages/app-tachyons-fela-prop/src/App.test.tsx

@@ -17,7 +17,7 @@ describe("App", () => {
         <div>
           <div>
             <h1
-              class="black top1"
+              class="a b"
             >
               Vite1
             </h1>

packages/app-tachyons-fela-prop/vite.config.ts

@@ -3,5 +3,5 @@ import react from "@vitejs/plugin-react-swc";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react({ jsxImportSource: "." })],
+  plugins: [react({ jsxImportSource: "@homebound/fast-css-prop" })],
 });

packages/app-tachyons-fela-prop/src/jsx-dev-runtime.js → packages/fast-css-prop/jsx-dev-runtime.js

@@ -1,5 +1,5 @@
 import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
-import { maybeExpandCssProp } from "./cssProp.ts";
+import { maybeExpandCssProp } from "./build/cssProp.js";
 
 export function jsxDEV(type, props, ...children) {
   return _jsxDEV(type, maybeExpandCssProp(props), ...children);

packages/app-tachyons-fela-prop/src/jsx-runtime.js → packages/fast-css-prop/jsx-runtime.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { maybeExpandCssProp } from "./cssProp.ts";
+import { maybeExpandCssProp } from "./build/cssProp.js";
 
 export function jsx(type, props, ...children) {
   return _jsx(type, maybeExpandCssProp(props), ...children);

packages/fast-css-prop/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@homebound/fast-css-prop",
+  "version": "1.136.0",
+  "main": "build/index.js",
+  "bin": "cli.js",
+  "scripts": {
+    "test": "jest"
+  },
+  "exports": {
+    ".": "./build/cssProp.js",
+    "./jsx-runtime": "./jsx-runtime.js",
+    "./jsx-dev-runtime": "./jsx-dev-runtime.js"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "fela": "^12.2.1"
+  },
+  "devDependencies": {
+    "@homebound/tsconfig": "^1.0.3",
+    "typescript": "^5.7.3"
+  }
+}

packages/app-tachyons-fela-prop/src/cssProp.ts → packages/fast-css-prop/src/cssProp.ts

@@ -1,17 +1,23 @@
 import { createRenderer } from "fela";
 import { render } from "fela-dom";
-import { names } from "@homebound/truss-testing-tachyons";
+// import { names } from "@homebound/truss-testing-tachyons";
 
 // Create a renderer
 const renderer = createRenderer();
 // Auto-inject any CSS it creates into the DOM
 render(renderer);
 
-const existingGenerateClassName = renderer.generateClassName.bind(renderer);
-renderer.generateClassName = (property: string, value: string, pseudo: string, media: string, support: string) => {
-  const ref = property + value + pseudo + media + support;
-  return names[ref] ?? existingGenerateClassName(property, value, pseudo, media, support);
-};
+// const existingGenerateClassName = (renderer as any).generateClassName.bind(renderer);
+// (renderer as any).generateClassName = (
+//   property: string,
+//   value: string,
+//   pseudo: string,
+//   media: string,
+//   support: string,
+// ) => {
+//   const ref = property + value + pseudo + media + support;
+//   return names[ref] ?? existingGenerateClassName(property, value, pseudo, media, support);
+// };
 
 /**
  * Wraps React's JSX runtime (i.e. `createElement`) with `css` prop support.

packages/fast-css-prop/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@homebound/tsconfig/tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "sourceMap": true,
+    "downlevelIteration": true,
+    "baseUrl": ".",
+    "outDir": "build/",
+    "plugins": [
+      { "transform": "typescript-transform-paths" },
+      { "transform": "typescript-transform-paths", "afterDeclarations": true }
+    ]
+  },
+  "include": ["./src"]
+}