refactor: pnpm workspaces, rename fn & files

docs: add comments
fix: dts generation

src/components/Playground/Playground.constants.ts → demo-code-sample.ts

@@ -36,7 +36,7 @@ export const config = {
 
 export const initialInputList = {
   "tw-App.tsx": defaultCode,
-  "theme.ts": themeCode,
+  "tailwind.config.js": themeCode,
 };
 
 export const initialOutputList = {

package.json

@@ -1,76 +1,18 @@
 {
-  "name": "tailwind-to-panda",
+  "name": "tw2panda-root",
+  "private": true,
   "type": "module",
   "version": "0.0.1",
-  "bin": {
-    "tw2panda": "bin.js"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/astahmer/tw2panda.git"
   },
+  "author": "Alexandre Stahmer <[email protected]>",
+  "license": "MIT",
   "scripts": {
-    "prepare": "panda && panda codegen && pnpm gen:react-declaration",
-    "gen:react-declaration": "tsx ./get-ts-declarations.ts",
-    "cli:start": "node ./dist/cli.cjs",
-    "cli:dev": "tsup --watch",
-    "cli:build": "tsup",
-    "astro:dev": "astro dev",
-    "astro:start": "astro dev",
-    "astro:build": "astro build",
-    "astro:preview": "astro preview",
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "test": "vitest"
-  },
-  "dependencies": {
-    "@astrojs/react": "^2.2.1",
-    "@fontsource/inter": "^5.0.5",
-    "@monaco-editor/react": "4.5.1",
-    "@pandacss/config": "^0.6.0",
-    "@pandacss/core": "0.6.0",
-    "@pandacss/dev": "0.6.0",
-    "@pandacss/generator": "^0.6.0",
-    "@pandacss/parser": "^0.6.0",
-    "@pandacss/shared": "^0.6.0",
-    "@pandacss/types": "^0.6.0",
-    "@xstate/react": "^3.2.2",
-    "astro": "^2.8.1",
-    "cac": "^6.7.14",
-    "esbuild-wasm": "^0.18.11",
-    "hookable": "^5.5.3",
-    "lightningcss": "^1.21.5",
-    "magic-string": "^0.30.1",
-    "monaco-editor": "0.40.0",
-    "os-browserify": "^0.3.0",
-    "pastable": "^2.2.0",
-    "path-browserify": "^1.0.1",
-    "postcss": "^8.4.25",
-    "prettier": "2.8.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-resizable-panels": "^0.0.53",
-    "tailwindcss": "^3.3.2",
-    "ts-morph": "18.0.0",
-    "ts-pattern": "5.0.1",
-    "util": "^0.12.5",
-    "vite-node": "^0.33.0",
-    "xstate": "^4.38.0"
+    "format": "prettier --write \"./{src,tests}/**/*\""
   },
   "devDependencies": {
-    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "@pandacss/preset-base": "^0.6.0",
-    "@pandacss/preset-panda": "^0.6.0",
-    "@types/prettier": "2.7.3",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "rollup": "^3.26.2",
-    "rollup-plugin-dts": "^5.3.0",
-    "tsup": "^7.1.0",
-    "tsx": "^3.12.7",
-    "type-fest": "^3.13.0",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.3",
-    "vite-plugin-react-click-to-component": "^2.0.0",
-    "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^0.33.0"
+    "prettier": "^3.0.0"
   }
 }

packages/tw2panda/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "tw2panda",
+  "type": "module",
+  "version": "0.0.1",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "bin": {
+    "tw2panda": "bin.js"
+  },
+  "scripts": {
+    "start": "node ./dist/cli.cjs",
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@pandacss/config": "^0.6.0",
+    "@pandacss/generator": "^0.6.0",
+    "@pandacss/parser": "^0.6.0",
+    "@pandacss/preset-base": "^0.6.0",
+    "@pandacss/preset-panda": "^0.6.0",
+    "@pandacss/shared": "^0.6.0",
+    "@pandacss/types": "^0.6.0",
+    "cac": "^6.7.14",
+    "hookable": "^5.5.3",
+    "magic-string": "^0.30.1",
+    "pastable": "^2.2.0",
+    "postcss": "^8.4.25",
+    "prettier": "2.8.4",
+    "tailwindcss": "^3.3.2",
+    "ts-morph": "18.0.0"
+  },
+  "devDependencies": {
+    "@pandacss/core": "^0.6.0",
+    "@pandacss/token-dictionary": "^0.6.0",
+    "@types/node": "^20.4.1",
+    "@types/prettier": "2.7.3",
+    "tsup": "^7.1.0",
+    "typescript": "^5.1.6",
+    "vite-node": "^0.33.0",
+    "vitest": "^0.33.0"
+  },
+  "files": [
+    "bin.js",
+    "src",
+    "dist",
+    "cli",
+    "README.md"
+  ],
+  "keywords": [
+    "panda",
+    "css",
+    "pandacss",
+    "cli",
+    "tailwind",
+    "converter",
+    "migration"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  }
+}

src/cli.ts → packages/tw2panda/src/cli.ts

@@ -2,12 +2,12 @@ import { createMergeCss } from "@pandacss/shared";
 import { cac } from "cac";
 import { readFileSync } from "fs";
 import { join } from "path";
-import { initialInputList } from "./components/Playground/Playground.constants";
-import { createPandaContext } from "./converter/panda-context";
-import { createTailwindContext } from "./converter/tw-context";
-import { twClassListToPanda } from "./converter/tw-to-panda";
-import { extractTwFileClassList } from "./converter/extract-tw-class-list";
-import { rewriteTwFileContentToPanda } from "./converter/rewrite-tw-file-content-to-panda";
+import { initialInputList } from "../../../demo-code-sample";
+import { extractTwFileClassList } from "./extract-tw-class-list";
+import { createPandaContext } from "./panda-context";
+import { rewriteTwFileContentToPanda } from "./rewrite-tw-file-content-to-panda";
+import { createTailwindContext } from "./tw-context";
+import { twClassListToPanda } from "./tw-to-panda";
 
 const cli = cac("tw2panda");
 
@@ -19,7 +19,7 @@ cli
   .action((file) => {
     const content = readFileSync(join(process.cwd(), file), "utf-8");
 
-    const tw = createTailwindContext(initialInputList["theme.ts"]);
+    const tw = createTailwindContext(initialInputList["tailwind.config.js"]);
     const panda = createPandaContext();
     const { mergeCss } = createMergeCss(Object.assign(panda, { hash: false }));
 
@@ -41,11 +41,11 @@ cli
     console.log({ file });
     const content = readFileSync(join(process.cwd(), file), "utf-8");
     const panda = createPandaContext();
-    const tw = createTailwindContext(initialInputList["theme.ts"]);
+    const tw = createTailwindContext(initialInputList["tailwind.config.js"]);
     const { mergeCss } = createMergeCss(Object.assign(panda, { hash: false }));
 
-    const result = extractTwFileClassList(content, tw.context, panda, mergeCss);
-    console.log(result.resultList.map(({ node, ...item }) => item));
+    const list = extractTwFileClassList(content, tw.context, panda, mergeCss);
+    console.log(list.map(({ node, ...item }) => item));
   });
 
 cli

src/converter/extract-tw-class-list.ts → packages/tw2panda/src/extract-tw-class-list.ts

@@ -1,19 +1,25 @@
-import { extractClassCandidates } from "./extract-class-candidates";
+import { findTwClassCandidates } from "./find-tw-class-candidates";
 import { PandaContext } from "./panda-context";
 import { mapToShorthands } from "./panda-map-to-shorthands";
 import { TailwindContext } from "./tw-types";
 import { StyleObject, TwResultItem } from "./types";
 import { twClassListToPandaStyles } from "./tw-class-list-to-panda-styles";
 
+/**
+ *  Returns a list of `TwResultItem`, which is a mapping of:
+ * - `classList` - the original class list
+ * - `styles` - the classList converted to a Panda style object
+ * - `node` - the StringLiteral AST node that contains the class list
+ */
 export const extractTwFileClassList = (
   content: string,
   tailwind: TailwindContext,
   panda: PandaContext,
   mergeCss: (...styles: StyleObject[]) => StyleObject
 ) => {
-  const { sourceFile, nodes } = extractClassCandidates(content, panda);
+  const { nodes } = findTwClassCandidates(content, panda);
   const resultList = [] as TwResultItem[];
-  if (!nodes.size) return { sourceFile, nodes, resultList };
+  if (!nodes.size) return resultList;
 
   nodes.forEach((node) => {
     const string = node.getLiteralText();
@@ -26,5 +32,5 @@ export const extractTwFileClassList = (
     resultList.push({ classList: new Set(classList), styles: merged, node });
   });
 
-  return { sourceFile, nodes, resultList };
+  return resultList;
 };

src/converter/extract-class-candidates.ts → packages/tw2panda/src/find-tw-class-candidates.ts

@@ -1,9 +1,10 @@
 import { Node, SourceFile, StringLiteral } from "ts-morph";
 import { PandaContext } from "./panda-context";
 
-export function extractClassCandidates(content: string, panda: PandaContext) {
+/** Finds all tailwind class candidates in a file
+ * -> returns the list of all StringLiteral AST nodes */
+export function findTwClassCandidates(content: string, panda: PandaContext) {
   const nodes = new Set<StringLiteral>();
-  const candidates = new Set<string>();
 
   const sourceFile = panda.project.addSourceFile(
     "App.tsx",
@@ -22,7 +23,6 @@ export function extractClassCandidates(content: string, panda: PandaContext) {
       if (!string) return;
 
       nodes.add(node);
-      candidates.add(string);
     }
   });
 

packages/tw2panda/src/index.ts

@@ -0,0 +1,10 @@
+export * from "./panda-context";
+export * from "./find-tw-class-candidates";
+export * from "./extract-tw-class-list";
+export * from "./rewrite-tw-file-content-to-panda";
+export * from "./tw-class-list-to-panda-styles";
+export * from "./tw-parser";
+export * from "./tw-to-panda";
+export * from "./tw-context";
+export * from "./tw-types";
+export * from "./types";