button config recipie

.husky/pre-commit

@@ -1 +1,12 @@
-pnpm biome check --apply --changed --since=$(git rev-parse --short HEAD~) --files-ignore-unknown=true
+#!/bin/sh
+set -eu
+
+if git status --short | grep --quiet '^MM'; then
+  printf '%s\n' "ERROR: Some staged files have unstaged changes" >&2
+  exit 1;
+fi
+
+git diff -z --staged --name-only --diff-filter=ACMR | \
+    xargs -0 pnpm biome check --apply --files-ignore-unknown=true --no-errors-on-unmatched
+
+git update-index --again

packages/css/project.json

@@ -10,6 +10,13 @@
 				"cwd": "packages/css",
 				"command": "pnpm panda codegen"
 			}
+		},
+		"dev": {
+			"executor": "nx:run-commands",
+			"options": {
+				"cwd": "packages/css",
+				"command": "pnpm panda codegen --watch"
+			}
 		}
 	},
 	"tags": []

packages/css/src/recipies/button.ts

@@ -1,6 +1,7 @@
-import { type RecipeVariantProps, cva } from "styled-system/css";
-
-export const buttonRecipie = cva({
+import { defineRecipe } from "@pandacss/dev";
+export const buttonRecipie = defineRecipe({
+	className: "button",
+	staticCss: ["*"],
 	base: {
 		display: "inline-flex",
 		alignItems: "center",
@@ -33,4 +34,4 @@ export const buttonRecipie = cva({
 	},
 });
 
-export type ButtonVariants = RecipeVariantProps<typeof buttonRecipie>;
+export type { ButtonVariant } from "styled-system/recipes";

packages/css/src/recipies/index.ts

@@ -1 +1,2 @@
-export { type ButtonVariants, buttonRecipie } from "./button";
+export * from "./button";
+export type * from "./button";

packages/qwik/project.json

@@ -11,6 +11,20 @@
 				"command": "pnpm panda codegen"
 			}
 		},
+		"dev": {
+			"executor": "nx:run-commands",
+			"options": {
+				"cwd": "packages/css",
+				"command": "pnpm panda codegen --watch"
+			}
+		},
+		"build:css": {
+			"executor": "nx:run-commands",
+			"options": {
+				"cwd": "packages/qwik",
+				"command": "mkdir -p ../../dist/qwik/css && pnpm panda cssgen --outfile ../../dist/qwik/css/styles.css"
+			}
+		},
 		"build": {
 			"executor": "@nx/vite:build",
 			"dependsOn": ["prepare-build"],

packages/qwik/src/components/button.tsx

@@ -2,3 +2,5 @@ import { buttonRecipie } from "@dui/css/recipies";
 import { styled } from "../styled-system/jsx";
 
 export const Button = styled("button", buttonRecipie);
+
+export const CssButton = () => <Button size="small">Hello</Button>;

packages/react/project.json

@@ -11,6 +11,13 @@
 				"command": "pnpm panda codegen"
 			}
 		},
+		"dev": {
+			"executor": "nx:run-commands",
+			"options": {
+				"cwd": "packages/css",
+				"command": "pnpm panda codegen --watch"
+			}
+		},
 		"build": {
 			"executor": "@nx/vite:build",
 			"dependsOn": ["prepare-build", "^build"],

packages/react/tsconfig.lib.json

@@ -4,9 +4,8 @@
 		"isolatedModules": true,
 		"esModuleInterop": true,
 		"jsx": "react-jsx",
-		"types": ["vite/client"],
-		"baseUrl": "./src"
+		"types": ["vite/client"]
 	},
-	"include": ["src/**/*.tsx", "src/components/Button/Button.mtsx"],
+	"include": ["src/**/*.tsx"],
 	"exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
 }

packages/solidjs/project.json

@@ -11,6 +11,13 @@
 				"command": "pnpm panda codegen"
 			}
 		},
+		"dev": {
+			"executor": "nx:run-commands",
+			"options": {
+				"cwd": "packages/css",
+				"command": "pnpm panda codegen --watch"
+			}
+		},
 		"build": {
 			"executor": "@nx/vite:build",
 			"dependsOn": ["prepare-build"],

panda.base.config.mjs

@@ -1,5 +1,6 @@
 import { resolve } from "path";
 import { defineConfig } from "@pandacss/dev";
+import { buttonRecipie } from "./packages/css/src/recipies";
 
 export const getDefaultConfig = (projectRoot) =>
 	defineConfig({
@@ -14,7 +15,11 @@ export const getDefaultConfig = (projectRoot) =>
 
 		// Useful for theme customization
 		theme: {
-			extend: {},
+			extend: {
+				recipes: {
+					button: buttonRecipie,
+				},
+			},
 		},
 
 		// The output directory for your css system

tsconfig.base.json

@@ -16,6 +16,7 @@
 		"emitDecoratorMetadata": true,
 		"experimentalDecorators": true,
 		"importHelpers": true,
+		"verbatimModuleSyntax": true,
 		"module": "ESNext",
 		"moduleResolution": "bundler",
 		"target": "ES2022",