Proof of concept non-component-based css prop.

homebound-team · Nov 9, 2022 · 0e29072 · 0e29072
1 parent da9ab14
commit 0e29072
Show file tree

Hide file tree

Showing 13 changed files with 697 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
     "packages/testing-tachyons",
     "packages/testing-tachyons-emotion",
     "packages/testing-tachyons-fela",
-    "packages/testing-tachyons-mui"
+    "packages/testing-tachyons-mui",
+    "packages/app-tachyons-fela-prop"
   ],
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.1",

diff --git a/packages/app-tachyons-fela-prop/.gitignore b/packages/app-tachyons-fela-prop/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/app-tachyons-fela-prop/index.html b/packages/app-tachyons-fela-prop/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/app-tachyons-fela-prop/package.json b/packages/app-tachyons-fela-prop/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "app-tachyons-fela-prop",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@homebound/truss-testing-tachyons": "workspace:*",
+    "fela": "^12.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-fela": "^12.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^2.2.0",
+    "typescript": "^4.6.4",
+    "vite": "^3.2.3"
+  }
+}
diff --git a/packages/app-tachyons-fela-prop/src/App.tsx b/packages/app-tachyons-fela-prop/src/App.tsx
@@ -0,0 +1,16 @@
+import { useState } from "react";
+import { Css } from "@homebound/truss-testing-tachyons";
+
+function App() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <h1 css={Css.lightGray.$}>Vite + React</h1>
+      <div>
+        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
+      </div>
+    </div>
+  );
+}
+
+export default App;
diff --git a/packages/app-tachyons-fela-prop/src/jsx-dev-runtime.js b/packages/app-tachyons-fela-prop/src/jsx-dev-runtime.js
@@ -0,0 +1,46 @@
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import { createRenderer } from "fela";
+import { render } from "fela-dom";
+
+// Create a renderer
+const renderer = createRenderer();
+// And then auto-inject any CSS it creates into the DOM
+render(renderer);
+
+/**
+ * Wraps React's JSX runtime (i.e. `createElement`) with `css` prop support.
+ *
+ * Unlike the Emotion or native Fela `css` props, we don't create a wrapping
+ * `EmotionCssPropInternal` or `FelaComponent` component, which adds another
+ * React component to the component tree.
+ *
+ * Instead, we just merge the `css` prop into the `className` prop, and hand
+ * it right back to React as a `createElement(div, ...)` etc.
+ *
+ * Emotion and Fela likely don't do this b/c they access their `renderer`
+ * instance via a React context, which we cannot access directly b/c it
+ * would surely cause "different number of hooks" errors due to conditional
+ * JSX rendering. Which is dumb b/c accessing a context has no side effect,
+ * so IMO contexts should be accessible w/o the hook API/restrictions.
+ *
+ * But, anyway, we avoid that by just accessing our `renderer` as a global
+ * variable.
+ */
+export function jsxDEV(type, props = {}, ...children) {
+  if (props) {
+    const { css, className, ...otherProps } = props;
+    if (css) {
+      // Convert `{ color: "blue" }` --> `a`
+      const cn = renderer.renderRule(() => css, {});
+      return _jsxDEV(
+        type,
+        {
+          ...otherProps,
+          className: className ? cn + " " + className : cn,
+        },
+        ...children,
+      );
+    }
+  }
+  return _jsxDEV(type, props, ...children);
+}
diff --git a/packages/app-tachyons-fela-prop/src/main.tsx b/packages/app-tachyons-fela-prop/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/packages/app-tachyons-fela-prop/src/vite-env.d.ts b/packages/app-tachyons-fela-prop/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/app-tachyons-fela-prop/tsconfig.json b/packages/app-tachyons-fela-prop/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/packages/app-tachyons-fela-prop/tsconfig.node.json b/packages/app-tachyons-fela-prop/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/packages/app-tachyons-fela-prop/vite.config.ts b/packages/app-tachyons-fela-prop/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react({ jsxImportSource: '.' })]
+})
diff --git a/packages/testing-tachyons/tsconfig.json b/packages/testing-tachyons/tsconfig.json
@@ -1,10 +1,9 @@
 {
   "extends": "@homebound/tsconfig/tsconfig.json",
   "compilerOptions": {
-    "module": "commonjs",
+    "module": "ES2022",
     "target": "es5",
     "sourceMap": true,
-    "downlevelIteration": true,
     "outDir": "build/",
     "jsx": "react"
   },