feat: support auto imports (#50)

* feat: add auto imports for css and jsx

* feat: add playground

* feat: add pattern components

* feat: add pattern functions

* fix: fix playground

* feat: add examples

* feat: add example

* feat: add example

* feat: add autoImports option

* fix: support later

.nuxtrc

@@ -1,2 +1,2 @@
-imports.autoImport=false
+imports.autoImport=true
 typescript.includeWorkspace=true

playground/app.vue

@@ -1,3 +1,9 @@
 <template>
   <NuxtPage />
 </template>
+
+<style>
+#__nuxt {
+  height: 100%;
+}
+</style>

playground/components/PButton.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { css, cva } from "pandacss/css";
+import type { SystemStyleObject } from "pandacss/types";
+
+const props = withDefaults(
+  defineProps<{
+    css?: SystemStyleObject;
+  }>(),
+  {
+    css: () => ({}),
+  }
+);
+
+const buttonRecipe = cva({
+  base: { display: "flex", fontSize: "lg" },
+  variants: {
+    variant: {
+      primary: { color: "white", backgroundColor: "blue.500" },
+    },
+  },
+});
+
+const className = css(
+  // using the button recipe
+  buttonRecipe.raw({ variant: "primary" }),
+
+  // adding style overrides (internal)
+  { _hover: { color: "blue.400" } },
+
+  // adding style overrides (external)
+  props.css
+);
+</script>
+
+<template>
+  <button :class="className"><slot /></button>
+</template>

playground/nuxt.config.ts

@@ -1,32 +1,17 @@
 export default defineNuxtConfig({
-  modules: ["../src/module"],
+  modules: ["../src/module", "@nuxt/devtools"],
   pandacss: {
-    theme: {
-      tokens: {
-        colors: {
-          primary: { value: "#0FEE0F" },
-          secondary: { value: "#EE0F0F" },
-        },
-        fontSizes: {
-          "2xs": { value: "0.5rem" },
-          xs: { value: "0.75rem" },
-          sm: { value: "0.875rem" },
-          md: { value: "1rem" },
-          lg: { value: "1.125rem" },
-          xl: { value: "1.25rem" },
-          "2xl": { value: "1.5rem" },
-          "3xl": { value: "1.875rem" },
-          "4xl": { value: "2.25rem" },
-          "5xl": { value: "3rem" },
-          "6xl": { value: "3.75rem" },
-          "7xl": { value: "4.5rem" },
-          "8xl": { value: "6rem" },
-          "9xl": { value: "8rem" },
-        },
+    theme: { extend: {} },
+    globalCss: {
+      html: {
+        h: "full",
+      },
+      body: {
+        bg: { base: "white", _dark: "#2C2C2C" },
       },
     },
     jsxFramework: "vue",
-    cssPath: "@/css/global.css",
+    cssPath: "@/assets/css/global.css",
     outdir: "pandacss",
   },
   devtools: { enabled: true },

playground/pages/atomic_recipes.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { center } from "pandacss/patterns";
+
+const button = cva({
+  base: {
+    borderRadius: "md",
+    fontWeight: "semibold",
+    h: "10",
+    px: "4",
+  },
+  variants: {
+    visual: {
+      solid: {
+        bg: { base: "colorPalette.500", _dark: "colorPalette.300" },
+        color: { base: "white", _dark: "gray.800" },
+      },
+      outline: {
+        border: "1px solid",
+        color: { base: "colorPalette.600", _dark: "colorPalette.200" },
+        borderColor: "currentColor",
+      },
+    },
+  },
+});
+</script>
+
+<template>
+  <div :class="center({ colorPalette: 'yellow', h: 'full', gap: '4' })">
+    <button :class="button({ visual: 'solid' })">Button</button>
+    <button :class="button({ visual: 'outline' })">Button</button>
+  </div>
+</template>

playground/pages/index.vue

@@ -1,11 +1,23 @@
 <script setup lang="ts">
-import { css } from "pandacss/css";
-import { styled } from "pandacss/jsx";
+import { center } from "pandacss/patterns";
 </script>
 
 <template>
-  <styled.h1 fontSize="5xl" fontWeight="bold">Panda CSS x Nuxt</styled.h1>
-  <div :class="css({ fontSize: '5xl', fontWeight: 'bold', color: 'primary' })">
-    Hello 🐼!
+  <div :class="center({ h: 'full' })">
+    <div
+      :class="
+        css({
+          display: 'flex',
+          flexDirection: 'column',
+          fontWeight: 'semibold',
+          color: 'yellow.300',
+          textAlign: 'center',
+          textStyle: '4xl',
+        })
+      "
+    >
+      <span>🐼</span>
+      <span>Hello from Panda</span>
+    </div>
   </div>
 </template>

playground/pages/patterns.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { square, flex, circle, center } from "pandacss/patterns";
+import { Circle } from "pandacss/jsx";
+</script>
+
+<template>
+  <div
+    :class="
+      cx(
+        flex({
+          gap: '4',
+          direction: 'column',
+        }),
+        center({ h: 'full' })
+      )
+    "
+  >
+    <div :class="flex({ gap: '6', padding: '1' })">
+      <div :class="square({ size: '11', bg: 'yellow.300' })">1</div>
+      <div :class="square({ size: '11', bg: 'red.300' })">2</div>
+      <div :class="square({ size: '11', bg: 'green.300' })">3</div>
+    </div>
+
+    <div
+      :class="
+        flex({
+          direction: 'row',
+          align: 'center',
+          gap: '4',
+        })
+      "
+    >
+      <div :class="circle({ size: '12', bg: 'blue.300' })">1</div>
+      <div :class="circle({ size: '12', bg: 'orange.300' })">2</div>
+      <Circle size="12" bg="violet.300">3</Circle>
+    </div>
+  </div>
+</template>

playground/pages/slot_recipes.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { center } from "pandacss/patterns";
+
+const card = sva({
+  slots: ["root", "title", "content"],
+  base: {
+    root: {
+      p: "6",
+      m: "4",
+      w: "md",
+      boxShadow: "md",
+      borderRadius: "md",
+      _dark: { bg: "#262626", color: "white" },
+    },
+    content: {
+      textStyle: "lg",
+    },
+    title: {
+      textStyle: "xl",
+      fontWeight: "semibold",
+      pb: "2",
+    },
+  },
+});
+
+const styles = card();
+</script>
+
+<template>
+  <div :class="center({ h: 'full' })">
+    <div :class="styles.root">
+      <div :class="styles.title">Team Members</div>
+      <div :class="styles.content">Content</div>
+    </div>
+  </div>
+</template>

src/imports/presets.ts

@@ -0,0 +1,67 @@
+import type { ModuleOptions } from "./../types";
+import type { InlinePreset } from "unimport";
+import { defineUnimportPreset } from "unimport";
+
+export const createPresets = ({
+  outdir,
+}: Pick<ModuleOptions, "outdir">): InlinePreset[] => {
+  return [
+    defineUnimportPreset({
+      from: `${outdir}/css`,
+      imports: ["css", "cva", "sva", "cx"],
+    }),
+    // TODO: jsx doesn't work with auto imports
+    // defineUnimportPreset({
+    //   from: `${outdir}/jsx`,
+    //   imports: [
+    //     "styled",
+    //     "AspectRatio",
+    //     "Bleed",
+    //     "Box",
+    //     "Center",
+    //     "Circle",
+    //     "Container",
+    //     "Divider",
+    //     "Flex",
+    //     "Float",
+    //     "GridItem",
+    //     "Grid",
+    //     "HStack",
+    //     "LinkBox",
+    //     "LinkOverlay",
+    //     "Spacer",
+    //     "Square",
+    //     "Stack",
+    //     "VisuallyHidden",
+    //     "VStack",
+    //     "Wrap",
+    //   ],
+    // }),
+    // TODO: pattenrs doesn't work with auto imports
+    // defineUnimportPreset({
+    //   from: `${outdir}/patterns`,
+    //   imports: [
+    //     "aspectRatio",
+    //     "bleed",
+    //     "box",
+    //     "center",
+    //     "circle",
+    //     "container",
+    //     "divider",
+    //     "flex",
+    //     "float",
+    //     "gridItem",
+    //     "grid",
+    //     "hStack",
+    //     "linkBox",
+    //     "linkOverlay",
+    //     "spacer",
+    //     "square",
+    //     "stack",
+    //     "visuallyHidden",
+    //     "vStack",
+    //     "wrap",
+    //   ],
+    // }),
+  ];
+};

src/module.ts

@@ -1,4 +1,5 @@
 import {
+  addImportsSources,
   addTemplate,
   createResolver,
   defineNuxtModule,
@@ -11,6 +12,7 @@ import { join } from "pathe";
 import { configKey, name, version } from "../package.json";
 import { resolveCSSPath } from "./resolvers";
 import type { ModuleOptions } from "./types";
+import { createPresets } from "./imports/presets";
 
 const logger = useLogger("nuxt:pandacss");
 
@@ -27,6 +29,7 @@ export default defineNuxtModule<ModuleOptions>({
     outdir: "styled-system",
     cwd: nuxt.options.buildDir,
     cssPath: `${nuxt.options.buildDir}/panda.css`,
+    autoImports: true,
   }),
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
@@ -41,6 +44,10 @@ export default defineNuxtModule<ModuleOptions>({
       "./*"
     );
 
+    if (options.autoImports) {
+      addImportsSources(createPresets({ outdir: options.outdir }));
+    }
+
     if (existsSync(resolve(nuxt.options.buildDir, "panda.config.mjs"))) {
       await fsp.rm(resolve(nuxt.options.buildDir, "panda.config.mjs"));
     }

src/types.ts

@@ -15,4 +15,9 @@ export interface ModuleOptions extends Config {
    * @example '@/assets/css/global.css'
    */
   cssPath?: string;
+  /**
+   * Automatically add to the auto imports.
+   * @default true
+   */
+  autoImports?: boolean;
 }