🐭

.eslintignore

@@ -0,0 +1,2 @@
+# Panda CSS
+custom-src/styled-system

.gitignore

@@ -60,3 +60,6 @@ lerna-debug.log*
 .vercel
 .serverless
 .node
+
+# Panda CSS
+custom-src/styled-system

custom-src/components/footer/footer.tsx

@@ -41,6 +41,9 @@ export const Footer = component$(() => {
         </li>
         <li>
           <Link href="/app/react/">Qwik React</Link>
+        <li>
+          <Link href="/app/styling">Styling</Link>
+        </li>
         </li>
         <li>
           <Link href="/app/">Homepage</Link>

custom-src/global.css

@@ -1,3 +1,10 @@
+
+/**
+ * PandaCSS CSS layers
+ * View the full documentation at https://panda-css.com/docs/concepts/cascade-layers#layer-css
+ */
+ @layer reset, base, tokens, recipes, utilities;
+
 .black-box {
   background: black;
   color: white;

custom-src/routes/styling/index.tsx

@@ -0,0 +1,22 @@
+import { component$ } from "@builder.io/qwik";
+import { css } from "../../styled-system/css";
+
+export default component$(() => {
+  return (
+    <section>
+      <h1>Styling 👩‍👩‍👦‍👦🎨</h1>
+      <div
+        id="panda-css-1"
+        class={css({
+          padding: 10,
+          bg: "red.400",
+          height: "dvh",
+          margin: 100,
+          fontSize: 30,
+        })}
+      >
+        This box is styled with PandaCSS.
+      </div>
+    </section>
+  );
+});

package.json

@@ -3,45 +3,50 @@
   "version": "0.0.3",
   "private": true,
   "scripts": {
+    "build.aws": "pnpm run build.client && vite build -c adapters/aws-lambda/vite.config.ts",
     "build.azure": "pnpm run build.client && vite build -c adapters/azure-swa/vite.config.ts && touch dist/index.html && rm dist/app/index.html",
     "build.client": "vite build",
     "build.client.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js build",
     "build.cloudflare": "pnpm run build.client && vite build -c adapters/cloudflare-pages/vite.config.ts",
     "build.deno": "pnpm run build.client && vite build -c adapters/deno/vite.config.ts",
     "build.express": "pnpm run build.client && vite build -c adapters/express/vite.config.ts",
-    "build.node": "pnpm run build.client && vite build -c adapters/node/vite.config.ts",
     "build.fastify": "pnpm run build.client && vite build -c adapters/fastify/vite.config.ts",
     "build.netlify": "pnpm run build.client && vite build -c adapters/netlify-edge/vite.config.ts",
+    "build.node": "pnpm run build.client && vite build -c adapters/node/vite.config.ts",
     "build.preview": "pnpm run build.client && vite build --minify=false --ssr custom-src/entry.preview.tsx",
-    "build.aws": "pnpm run build.client && vite build -c adapters/aws-lambda/vite.config.ts",
     "build.static": "pnpm run build.client && vite build -c adapters/static/vite.config.ts",
     "build.static.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js build -c adapters/static/vite.config.ts",
     "build.types": "tsc --incremental --noEmit",
     "build.vercel": "pnpm run build.client && vite build -c adapters/vercel-edge/vite.config.ts",
     "clean.dist": "rimraf dist",
+    "deploy.aws": "serverless deploy ",
     "deploy.azure": "swa deploy ./dist --api-location ./azure-functions --env production",
     "deploy.netlify": "netlify deploy --prod --build",
     "deploy.vercel": "vercel deploy --prod",
-    "deploy.aws": "serverless deploy ",
     "deps": "pnpm upgrade -i -r --latest",
     "dev": "cross-env PLATFORM_NAME=dev vite --mode ssr --port 3000",
     "dev.debug": "cross-env PLATFORM_NAME=dev node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force --port 3000",
     "dev.netlify": "netlify dev",
     "lint": "eslint \"custom-src/**/*.ts*\"",
     "lint.fix": "eslint \"custom-src/**/*.ts*\" --fix",
+    "prebuild.pandacss": "panda codegen --silent",
+    "serve.aws": "serverless offline",
     "serve.azure": "cross-env PLATFORM_NAME=azure swa start",
     "serve.cloudflare": "wrangler pages dev ./dist",
     "serve.cloudflare.debug": "node --inspect-brk ./node_modules/.bin/wrangler pages dev ./dist",
     "serve.deno": "cross-env PLATFORM_NAME=deno deno run --allow-net --allow-read --allow-env .deno/entry.deno.js --port 3009",
     "serve.express": "cross-env PLATFORM_NAME=express node .express/entry.express.js",
     "serve.express.debug": "cross-env PLATFORM_NAME=express node --inspect-brk .express/entry.express.js",
-    "serve.node": "cross-env PLATFORM_NAME=node node .node/entry.node.js",
     "serve.fastify": "cross-env PLATFORM_NAME=fastify node .fastify/entry.fastify.js",
     "serve.fastify.debug": "cross-env PLATFORM_NAME=fastify node --inspect-brk .fastify/entry.fastify.js",
+    "serve.node": "cross-env PLATFORM_NAME=node node .node/entry.node.js",
     "serve.preview": "cross-env PLATFORM_NAME=preview vite preview --port 3001",
     "serve.preview.debug": "cross-env PLATFORM_NAME=preview node --inspect-brk ./node_modules/vite/bin/vite.js preview --port 3001",
     "serve.static": "node .static/entry.static.js",
-    "serve.aws": "serverless offline",
+    "test.aws-offline.mpa": "cross-env APP=mpa playwright test tests --config playwright.aws-offline.config.ts",
+    "test.aws-offline.spa": "cross-env APP=spa playwright test tests --config playwright.aws-offline.config.ts",
+    "test.aws.mpa": "cross-env APP=mpa playwright test tests --config playwright.aws.config.ts",
+    "test.aws.spa": "cross-env APP=spa playwright test tests --config playwright.aws.config.ts",
     "test.azure.mpa": "cross-env APP=mpa playwright test tests --config playwright.azure.config.ts",
     "test.azure.spa": "cross-env APP=spa playwright test tests --config playwright.azure.config.ts",
     "test.cli": "node tests/cli.js",
@@ -67,22 +72,20 @@
     "test.unit.ui": "vitest --ui components",
     "test.vercel.mpa": "cross-env APP=mpa playwright test tests --config playwright.vercel.config.ts",
     "test.vercel.spa": "cross-env APP=spa playwright test tests --config playwright.vercel.config.ts",
-    "test.aws.mpa": "cross-env APP=mpa playwright test tests --config playwright.aws.config.ts",
-    "test.aws.spa": "cross-env APP=spa playwright test tests --config playwright.aws.config.ts",
-    "test.aws-offline.mpa": "cross-env APP=mpa playwright test tests --config playwright.aws-offline.config.ts",
-    "test.aws-offline.spa": "cross-env APP=spa playwright test tests --config playwright.aws-offline.config.ts",
     "qwik": "qwik"
   },
   "devDependencies": {
     "@azure/static-web-apps-cli": "^1.1.3",
     "@builder.io/qwik": "BuilderIo/qwik-build#main",
     "@builder.io/qwik-city": "BuilderIo/qwik-city-build#main",
     "@builder.io/qwik-react": "0.5.0",
+    "@builder.io/vite-plugin-macro": "~0.0.7",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@fastify/static": "^6.10.2",
     "@mui/material": "5.13.7",
     "@mui/x-data-grid": "6.5.0",
+    "@pandacss/dev": "^0.4.0",
     "@playwright/test": "^1.35.1",
     "@types/compression": "^1.7.2",
     "@types/eslint": "latest",

panda.config.ts

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