setup panda

apps/web/app/index.css

@@ -0,0 +1,2 @@
+@layer reset, base, tokens, recipes, utilities;
+

apps/web/app/layout.tsx

@@ -1,3 +1,4 @@
+import "./index.css";
 export default function RootLayout({
   children,
 }: {

apps/web/app/page.tsx

@@ -1,9 +1,16 @@
 import { Button, Header } from "ui";
+import { hstack } from "../styled-system/patterns";
+import { css, cx } from "../styled-system/css";
 
 export default function Page() {
   return (
     <>
       <Header text="Web" />
+      <div className={cx(hstack({gap: "12"}), css({color: "red"}))}>
+        <span>Hi</span>
+        <span>Hi</span>
+        <span>Hi</span>
+      </div>
       <Button />
     </>
   );

apps/web/package.json

@@ -3,7 +3,8 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "prepare": "panda codegen",
+    "dev": "rm -rf .next && next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -15,6 +16,7 @@
     "ui": "workspace:*"
   },
   "devDependencies": {
+    "@pandacss/dev": "^0.5.0",
     "@types/node": "^17.0.12",
     "@types/react": "^18.0.22",
     "@types/react-dom": "^18.0.7",

apps/web/panda.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from "@pandacss/dev"
+
+export default defineConfig({
+    // Whether to use css reset
+    preflight: true,
+
+    // Where to look for your css declarations
+    include: ["./src/components/**/*.{ts,tsx,js,jsx}", "./src/app/**/*.{ts,tsx,js,jsx}"],
+
+    // Files to exclude
+    exclude: [],
+
+    // Useful for theme customization
+    theme: {
+      extend: {}
+    },
+
+    // The output directory for your css system
+    outdir: "styled-system",
+
+
+})

apps/web/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@pandacss/dev/postcss': {},
+  },
+}

apps/web/styled-system/css/conditions.mjs

@@ -0,0 +1,33 @@
+import { withoutSpace } from '../helpers.mjs';
+
+const conditions = new Set(["_hover","_focus","_focusWithin","_focusVisible","_disabled","_active","_visited","_target","_readOnly","_readWrite","_empty","_checked","_enabled","_expanded","_highlighted","_before","_after","_firstLetter","_firstLine","_marker","_selection","_file","_backdrop","_first","_last","_only","_even","_odd","_firstOfType","_lastOfType","_onlyOfType","_peerFocus","_peerHover","_peerActive","_peerFocusWithin","_peerFocusVisible","_peerDisabled","_peerChecked","_peerInvalid","_peerExpanded","_peerPlaceholderShown","_groupFocus","_groupHover","_groupActive","_groupFocusWithin","_groupFocusVisible","_groupDisabled","_groupChecked","_groupExpanded","_groupInvalid","_indeterminate","_required","_valid","_invalid","_autofill","_inRange","_outOfRange","_placeholder","_placeholderShown","_pressed","_selected","_default","_optional","_open","_fullscreen","_loading","_currentPage","_currentStep","_motionReduce","_motionSafe","_print","_landscape","_portrait","_dark","_light","_osDark","_osLight","_highConstrast","_lessContrast","_moreContrast","_ltr","_rtl","_scrollbar","_scrollbarThumb","_scrollbarTrack","_horizontal","_vertical","sm","smOnly","smDown","md","mdOnly","mdDown","lg","lgOnly","lgDown","xl","xlOnly","xlDown","2xl","2xlOnly","smToMd","smToLg","smToXl","smTo2xl","mdToLg","mdToXl","mdTo2xl","lgToXl","lgTo2xl","xlTo2xl","base"])
+
+export function isCondition(value){
+  return conditions.has(value) || /^@|&|&$/.test(value)
+}
+
+const underscoreRegex = /^_/
+const selectorRegex = /&|@/
+
+export function finalizeConditions(paths){
+  return paths.map((path) => {
+    if (conditions.has(path)){
+      return path.replace(underscoreRegex, '')
+    }
+
+    if (selectorRegex.test(path)){
+      return `[${withoutSpace(path.trim())}]`
+    }
+
+    return path
+  })}
+
+  export function sortConditions(paths){
+    return paths.sort((a, b) => {
+      const aa = isCondition(a)
+      const bb = isCondition(b)
+      if (aa && !bb) return 1
+      if (!aa && bb) return -1
+      return 0
+    })
+  }

apps/web/styled-system/css/css.d.ts

@@ -0,0 +1,3 @@
+/* eslint-disable */
+import type { SystemStyleObject } from '../types'
+export declare function css(styles: SystemStyleObject): string