@pandacss/node 0.0.0-dev-20221128065048 → 0.0.0-dev-20221128112158

package/dist/index.d.ts

@@ -57,10 +57,11 @@ declare function createContext(conf: LoadConfigResult, io?: IO): {
         pattern: string;
         jsx: string;
     };
-    reloadSourceFiles(): void;
-    getSourceFile(file: string): ts_morph.SourceFile | undefined;
-    addSourceFile(file: string): ts_morph.SourceFile;
-    removeSourceFile(file: string): boolean | undefined;
+    reloadSourceFiles: () => void;
+    getSourceFile: (file: string) => ts_morph.SourceFile | undefined;
+    addSourceFile: (file: string) => void;
+    reloadSourceFile: (file: string) => void;
+    removeSourceFile: (file: string) => boolean | undefined;
     parseSourceFile: (sourceFile: ts_morph.SourceFile | undefined) => Collector | undefined;
     getPath: (str: string) => string;
     paths: {
@@ -88,7 +89,7 @@ declare function createContext(conf: LoadConfigResult, io?: IO): {
         file: string;
     } | undefined;
     patterns: Record<string, PatternConfig>;
-    hasPattern: boolean;
+    hasPatterns: boolean;
     getPattern: (name: string) => PatternConfig | undefined;
     execPattern: (name: string, data: Record<string, any>) => _pandacss_types.StyleObject<_pandacss_types_dist_system_types.TCondition, _pandacss_types_dist_system_types.NeverType, false>;
     patternNodes: {
@@ -174,10 +175,11 @@ declare class Builder {
             pattern: string;
             jsx: string;
         };
-        reloadSourceFiles(): void;
-        getSourceFile(file: string): ts_morph.SourceFile | undefined;
-        addSourceFile(file: string): ts_morph.SourceFile;
-        removeSourceFile(file: string): boolean | undefined;
+        reloadSourceFiles: () => void;
+        getSourceFile: (file: string) => ts_morph.SourceFile | undefined;
+        addSourceFile: (file: string) => void;
+        reloadSourceFile: (file: string) => void;
+        removeSourceFile: (file: string) => boolean | undefined;
         parseSourceFile: (sourceFile: ts_morph.SourceFile | undefined) => _pandacss_parser.Collector | undefined;
         getPath: (str: string) => string;
         paths: {
@@ -205,7 +207,7 @@ declare class Builder {
             file: string;
         } | undefined;
         patterns: Record<string, _pandacss_types.PatternConfig>;
-        hasPattern: boolean;
+        hasPatterns: boolean;
         getPattern: (name: string) => _pandacss_types.PatternConfig | undefined;
         execPattern: (name: string, data: Record<string, any>) => _pandacss_types.StyleObject<_pandacss_types_dist_system_types.TCondition, _pandacss_types_dist_system_types.NeverType, false>;
         patternNodes: {
@@ -289,10 +291,11 @@ declare function loadConfigAndCreateContext(options?: {
         pattern: string;
         jsx: string;
     };
-    reloadSourceFiles(): void;
-    getSourceFile(file: string): ts_morph.SourceFile | undefined;
-    addSourceFile(file: string): ts_morph.SourceFile;
-    removeSourceFile(file: string): boolean | undefined;
+    reloadSourceFiles: () => void;
+    getSourceFile: (file: string) => ts_morph.SourceFile | undefined;
+    addSourceFile: (file: string) => void;
+    reloadSourceFile: (file: string) => void;
+    removeSourceFile: (file: string) => boolean | undefined;
     parseSourceFile: (sourceFile: ts_morph.SourceFile | undefined) => _pandacss_parser.Collector | undefined;
     getPath: (str: string) => string;
     paths: {
@@ -320,7 +323,7 @@ declare function loadConfigAndCreateContext(options?: {
         file: string;
     } | undefined;
     patterns: Record<string, _pandacss_types.PatternConfig>;
-    hasPattern: boolean;
+    hasPatterns: boolean;
     getPattern: (name: string) => _pandacss_types.PatternConfig | undefined;
     execPattern: (name: string, data: Record<string, any>) => _pandacss_types.StyleObject<_pandacss_types_dist_system_types.TCondition, _pandacss_types_dist_system_types.NeverType, false>;
     patternNodes: {

package/dist/index.js

@@ -323,10 +323,9 @@ function generatePreactJsxFactory(ctx) {
     import type { JSXStyleProperties } from '../types'
     
     type Element = keyof JSX.IntrinsicElements
-
-    type Merge<P, T> = Omit<P, 'color'> & T;
     
-    export type HTML${upperName}Props<T extends Element> = Merge<ComponentProps<T>, JSXStyleProperties>
+    export type HTML${upperName}Props<T extends Element> = Omit<ComponentProps<T>, 'color'> | JSXStyleProperties
+    
 
     type JSXFactory = {
       [K in Element]: (props: HTML${upperName}Props<K>) => JSX.Element
@@ -335,8 +334,8 @@ function generatePreactJsxFactory(ctx) {
     export declare const ${name}: JSXFactory
     `,
     js: import_outdent6.outdent`
-    import { h } from 'preact';
-    import { forwardRef } from 'preact/compat';
+    import { h } from 'preact'
+    import { forwardRef } from 'preact/compat'
     import { isCssProperty } from './is-valid-prop'
     import { css } from '../css'
     
@@ -371,7 +370,7 @@ function generatePreactJsxFactory(ctx) {
           return cx(atomicClass, elementProps.className)
         }
     
-        return h(Element, { ...elementProps, ref, className: classes() });
+        return h(Element, { ...elementProps, ref, className: classes() })
       })
       
       ${upperName}Component.displayName = \`${name}.\${Dynamic}\`
@@ -391,7 +390,7 @@ function generatePreactJsxFactory(ctx) {
       })
     }
 
-    export const ${name} = createFactory();
+    export const ${name} = createFactory()
     `
   };
 }
@@ -485,22 +484,18 @@ function generate(name, pattern, jsxFactory) {
     import { JSXStyleProperties, Assign } from '../types'
     
     type ElementType = keyof JSX.IntrinsicElements
-    
-    type PropsWithChildren<T> = T & { children?: ComponentChildren }
-    type PropsOf<C extends ElementType> = ComponentProps<C>
-    
-    type Polymorphic<C extends ElementType = 'div', P = {}> = JSXStyleProperties &
-      Assign<Omit<PropsOf<C>, 'color'>, P & { as?: C }>
+        
+    type Polymorphic<C extends ElementType = 'div', P = {}> = JSXStyleProperties |
+      Assign<Omit<ComponentProps<C>, 'color'>, P & { as?: C }>
 
     type ${jsxName}Props<C extends ElementType = 'div'> = Polymorphic<C, ${upperName}Properties>
     
-    export declare function ${jsxName}<V extends ElementType>(props: ${jsxName}Props<V>): JSX.Element    
+    ${pattern.description ? `/** ${pattern.description} */` : ""}
+    export declare function ${jsxName}<V extends ElementType = 'div'>(props: ${jsxName}Props<V>): JSX.Element    
     `
   };
 }
 function generatePreactJsxPattern(ctx) {
-  if (!ctx.hasPattern)
-    return [];
   return Object.entries(ctx.patterns).map(([name, pattern]) => generate(name, pattern, ctx.jsxFactory));
 }
 
@@ -517,7 +512,7 @@ function generateReactJsxFactory(ctx) {
     
     type Element = keyof JSX.IntrinsicElements
 
-    export type HTML${upperName}Props<T extends Element> = Omit<ComponentProps<T>, "color"> & JSXStyleProperties
+    export type HTML${upperName}Props<T extends Element> = Omit<ComponentProps<T>, 'color'> | JSXStyleProperties;
 
     type JSXFactory = {
       [K in Element]: (props: HTML${upperName}Props<K>) => JSX.Element
@@ -675,20 +670,18 @@ function generate2(name, pattern, jsxFactory) {
     import { ${upperName}Properties } from '../patterns/${(0, import_shared5.dashCase)(name)}'
     import { JSXStyleProperties, Assign } from '../types'
     
-    type PropsOf<C extends ElementType> = ComponentProps<C>
-    
-    type Polymorphic<C extends ElementType = 'div', P = {}> = JSXStyleProperties &
-      Assign<Omit<PropsOf<C>, 'color'>, P & { as?: C }>
+    type Polymorphic<C extends ElementType = "div", P = {}> =
+      | JSXStyleProperties
+      | Assign<Omit<ComponentProps<C>, "color">, P & { as?: C }>
 
     export type ${jsxName}Props<C extends ElementType = 'div'> = Polymorphic<C, ${upperName}Properties>
     
-    export declare function ${jsxName}<V extends ElementType>(props: ${jsxName}Props<V>): JSX.Element    
+    ${pattern.description ? `/** ${pattern.description} */` : ""}
+    export declare function ${jsxName}<V extends ElementType = 'div'>(props: ${jsxName}Props<V>): JSX.Element    
     `
   };
 }
 function generateReactJsxPattern(ctx) {
-  if (!ctx.hasPattern)
-    return [];
   return Object.entries(ctx.patterns).map(([name, pattern]) => generate2(name, pattern, ctx.jsxFactory));
 }
 
@@ -705,7 +698,7 @@ function generateSolidJsxFactory(ctx) {
     
     type Element = keyof JSX.IntrinsicElements
     
-    export type HTML${upperName}Props<T extends Element> = Assign<JSX.IntrinsicElements[T], JSXStyleProperties>
+    export type HTML${upperName}Props<T extends Element> = Omit<JSX.IntrinsicElements[T], 'color'> | JSXStyleProperties
 
     type JSXFactory = {
       [K in Element]: (props: HTML${upperName}Props<K>) => JSX.Element
@@ -714,8 +707,8 @@ function generateSolidJsxFactory(ctx) {
     export declare const ${name}: JSXFactory
     `,
     js: import_outdent12.outdent`
-    import { Dynamic } from 'solid-js/web';
-    import { mergeProps, splitProps } from 'solid-js';
+    import { Dynamic } from 'solid-js/web'
+    import { mergeProps, splitProps } from 'solid-js'
     import { allCssProperties } from './is-valid-prop'
     import { css } from '../css'
 
@@ -744,19 +737,19 @@ function generateSolidJsxFactory(ctx) {
     }
     
     function createFactory() {
-      const cache = new Map();
+      const cache = new Map()
     
       return new Proxy(Object.create(null), {
         get(_, el) {
           if (!cache.has(el)) {
-            cache.set(el, styled(el));
+            cache.set(el, styled(el))
           }
-          return cache.get(el);
+          return cache.get(el)
         },
       })
     }
       
-    export const ${name} = createFactory();
+    export const ${name} = createFactory()
     `
   };
 }
@@ -848,20 +841,18 @@ function generate3(name, pattern, jsxFactory) {
     import { Assign, JSXStyleProperties } from '../types'
     
     type ElementType = keyof JSX.IntrinsicElements
-    type PropsOf<C extends ElementType> = ComponentProps<C>
     
-    type Polymorphic<C extends ElementType = 'div', P = {}> = JSXStyleProperties &
-      Assign<Omit<PropsOf<C>, 'color'>, P & { as?: C }>
+    type Polymorphic<C extends ElementType = 'div', P = {}> = JSXStyleProperties |
+      Assign<Omit<ComponentProps<C>, 'color'>, P & { as?: C }>
 
     export type ${jsxName}Props<C extends ElementType = 'div'> = Polymorphic<C, ${upperName}Properties>
     
-    export declare function ${jsxName}<V extends ElementType>(props: ${jsxName}Props<V>): JSX.Element    
+    ${pattern.description ? `/** ${pattern.description} */` : ""}
+    export declare function ${jsxName}<V extends ElementType = 'div'>(props: ${jsxName}Props<V>): JSX.Element    
     `
   };
 }
 function generateSolidJsxPattern(ctx) {
-  if (!ctx.hasPattern)
-    return [];
   return Object.entries(ctx.patterns).map(([name, pattern]) => generate3(name, pattern, ctx.jsxFactory));
 }
 
@@ -880,6 +871,8 @@ var patternMap = {
   preact: generatePreactJsxPattern
 };
 function generateJsxPatterns(ctx) {
+  if (!ctx.hasPatterns)
+    return [];
   return patternMap[ctx.jsxFramework](ctx);
 }
 var layoutGridMap = {
@@ -942,7 +935,7 @@ function generate4(name, pattern) {
   };
 }
 function generatePattern(ctx) {
-  if (!ctx.hasPattern)
+  if (!ctx.hasPatterns)
     return;
   return Object.entries(ctx.patterns).map(([name, pattern]) => generate4(name, pattern));
 }
@@ -1616,6 +1609,7 @@ var import_fs_extra2 = require("fs-extra");
 var import_promises = require("fs/promises");
 var import_path3 = require("path");
 var import_postcss = __toESM(require("postcss"));
+var import_ts_morph = require("ts-morph");
 var import_ts_pattern6 = require("ts-pattern");
 var helpers = {
   map: import_shared11.mapObject
@@ -1719,6 +1713,7 @@ function createContext(conf, io = fileSystem) {
   function getPatternFnName(jsx) {
     return patternNodes.find((node) => node.name === jsx)?.baseName ?? (0, import_shared11.uncapitalize)(jsx);
   }
+  const hasPatterns = Object.keys(patterns).length > 0;
   function getRecipe(name) {
     const recipe = recipes[name];
     if (!recipe) {
@@ -1741,6 +1736,7 @@ function createContext(conf, io = fileSystem) {
       return [{}, props];
     return splitProps(props, recipe.props);
   }
+  const hasRecipes = Object.keys(recipes).length > 0;
   const properties = Array.from(/* @__PURE__ */ new Set(["css", ...utility.keys(), ...conditions.keys()]));
   function isProperty(prop) {
     const regex = new RegExp("^(?:" + properties.join("|") + ")$");
@@ -1815,14 +1811,46 @@ function createContext(conf, io = fileSystem) {
   }
   const files = getFiles();
   import_logger4.logger.debug({ type: "ctx:files", msg: files });
+  const tsProject = (0, import_parser.createProject)();
+  function addSourceFile(file) {
+    tsProject.createSourceFile(file, (0, import_fs3.readFileSync)(file, "utf8"), {
+      overwrite: true,
+      scriptKind: import_ts_morph.ScriptKind.TSX
+    });
+  }
+  function reloadSourceFile(file) {
+    const sourceFile = tsProject.getSourceFile(file);
+    sourceFile?.refreshFromFileSystemSync();
+  }
+  function reloadSourceFiles() {
+    const files2 = getFiles();
+    for (const file of files2) {
+      const source = tsProject.getSourceFile(file);
+      if (source) {
+        source.refreshFromFileSystemSync();
+      } else {
+        tsProject.addSourceFileAtPath(file);
+      }
+    }
+  }
+  function getSourceFile(file) {
+    return tsProject.getSourceFile(absPath(file));
+  }
+  function removeSourceFile(file) {
+    const sourceFile = tsProject.getSourceFile(absPath(file));
+    if (sourceFile) {
+      return tsProject.removeSourceFile(sourceFile);
+    }
+  }
+  files.forEach((file) => {
+    addSourceFile(file);
+  });
   const importMap = {
     css: `${outdir}/css`,
     recipe: `${outdir}/recipes`,
     pattern: `${outdir}/patterns`,
     jsx: `${outdir}/jsx`
   };
-  const tsProject = (0, import_parser.createProject)();
-  tsProject.addSourceFilesAtPaths(files);
   const parseSourceFile = (0, import_parser.createParser)({
     importMap,
     jsx: {
@@ -1904,29 +1932,11 @@ function createContext(conf, io = fileSystem) {
     exclude,
     conditions,
     importMap,
-    reloadSourceFiles() {
-      const files2 = getFiles();
-      for (const file of files2) {
-        const source = tsProject.getSourceFile(file);
-        if (source) {
-          source.refreshFromFileSystemSync();
-        } else {
-          tsProject.addSourceFileAtPath(file);
-        }
-      }
-    },
-    getSourceFile(file) {
-      return tsProject.getSourceFile(absPath(file));
-    },
-    addSourceFile(file) {
-      return tsProject.addSourceFileAtPath(absPath(file));
-    },
-    removeSourceFile(file) {
-      const sourceFile = tsProject.getSourceFile(absPath(file));
-      if (sourceFile) {
-        return tsProject.removeSourceFile(sourceFile);
-      }
-    },
+    reloadSourceFiles,
+    getSourceFile,
+    addSourceFile,
+    reloadSourceFile,
+    removeSourceFile,
     parseSourceFile,
     getPath,
     paths,
@@ -1938,14 +1948,14 @@ function createContext(conf, io = fileSystem) {
     utility,
     collectStyles,
     patterns,
-    hasPattern: Object.keys(patterns).length > 0,
+    hasPatterns,
     getPattern,
     execPattern,
     patternNodes,
     getPatternFnName,
     recipes,
     getRecipe,
-    hasRecipes: Object.keys(recipes).length > 0,
+    hasRecipes,
     jsxFramework,
     jsxFactory,
     cssVarRoot,
@@ -2118,6 +2128,7 @@ var import_logger8 = require("@pandacss/logger");
 var import_logger7 = require("@pandacss/logger");
 var import_chokidar = __toESM(require("chokidar"));
 var import_path6 = require("path");
+var import_ts_pattern7 = require("ts-pattern");
 function createWatcher(files, options = {}) {
   const { ignore, cwd = process.cwd(), poll } = options;
   const coalesce = poll || process.platform === "win32";
@@ -2149,13 +2160,17 @@ async function createContentWatcher(ctx, callback) {
   });
   watcher.on("all", async (event, file) => {
     import_logger7.logger.debug({ type: `file:${event}`, file });
-    ctx.removeSourceFile(file);
-    if (event === "unlink") {
+    (0, import_ts_pattern7.match)(event).with("unlink", () => {
+      ctx.removeSourceFile(file);
       ctx.chunks.rm(file);
-    } else {
+    }).with("change", async () => {
+      ctx.reloadSourceFile(file);
+      await callback(file);
+    }).with("add", async () => {
       ctx.addSourceFile(file);
       await callback(file);
-    }
+    }).otherwise(() => {
+    });
   });
   return watcher;
 }

package/dist/index.mjs

@@ -278,10 +278,9 @@ function generatePreactJsxFactory(ctx) {
     import type { JSXStyleProperties } from '../types'
     
     type Element = keyof JSX.IntrinsicElements
-
-    type Merge<P, T> = Omit<P, 'color'> & T;
     
-    export type HTML${upperName}Props<T extends Element> = Merge<ComponentProps<T>, JSXStyleProperties>
+    export type HTML${upperName}Props<T extends Element> = Omit<ComponentProps<T>, 'color'> | JSXStyleProperties
+    
 
     type JSXFactory = {
       [K in Element]: (props: HTML${upperName}Props<K>) => JSX.Element
@@ -290,8 +289,8 @@ function generatePreactJsxFactory(ctx) {
     export declare const ${name}: JSXFactory
     `,
     js: outdent6`
-    import { h } from 'preact';
-    import { forwardRef } from 'preact/compat';
+    import { h } from 'preact'
+    import { forwardRef } from 'preact/compat'
     import { isCssProperty } from './is-valid-prop'
     import { css } from '../css'
     
@@ -326,7 +325,7 @@ function generatePreactJsxFactory(ctx) {
           return cx(atomicClass, elementProps.className)
         }
     
-        return h(Element, { ...elementProps, ref, className: classes() });
+        return h(Element, { ...elementProps, ref, className: classes() })
       })
       
       ${upperName}Component.displayName = \`${name}.\${Dynamic}\`
@@ -346,7 +345,7 @@ function generatePreactJsxFactory(ctx) {
       })
     }
 
-    export const ${name} = createFactory();
+    export const ${name} = createFactory()
     `
   };
 }
@@ -440,22 +439,18 @@ function generate(name, pattern, jsxFactory) {
     import { JSXStyleProperties, Assign } from '../types'
     
     type ElementType = keyof JSX.IntrinsicElements
-    
-    type PropsWithChildren<T> = T & { children?: ComponentChildren }
-    type PropsOf<C extends ElementType> = ComponentProps<C>
-    
-    type Polymorphic<C extends ElementType = 'div', P = {}> = JSXStyleProperties &
-      Assign<Omit<PropsOf<C>, 'color'>, P & { as?: C }>
+        
+    type Polymorphic<C extends ElementType = 'div', P = {}> = JSXStyleProperties |
+      Assign<Omit<ComponentProps<C>, 'color'>, P & { as?: C }>
 
     type ${jsxName}Props<C extends ElementType = 'div'> = Polymorphic<C, ${upperName}Properties>
     
-    export declare function ${jsxName}<V extends ElementType>(props: ${jsxName}Props<V>): JSX.Element    
+    ${pattern.description ? `/** ${pattern.description} */` : ""}
+    export declare function ${jsxName}<V extends ElementType = 'div'>(props: ${jsxName}Props<V>): JSX.Element    
     `
   };
 }
 function generatePreactJsxPattern(ctx) {
-  if (!ctx.hasPattern)
-    return [];
   return Object.entries(ctx.patterns).map(([name, pattern]) => generate(name, pattern, ctx.jsxFactory));
 }
 
@@ -472,7 +467,7 @@ function generateReactJsxFactory(ctx) {
     
     type Element = keyof JSX.IntrinsicElements
 
-    export type HTML${upperName}Props<T extends Element> = Omit<ComponentProps<T>, "color"> & JSXStyleProperties
+    export type HTML${upperName}Props<T extends Element> = Omit<ComponentProps<T>, 'color'> | JSXStyleProperties;
 
     type JSXFactory = {
       [K in Element]: (props: HTML${upperName}Props<K>) => JSX.Element
@@ -630,20 +625,18 @@ function generate2(name, pattern, jsxFactory) {
     import { ${upperName}Properties } from '../patterns/${dashCase2(name)}'
     import { JSXStyleProperties, Assign } from '../types'
     
-    type PropsOf<C extends ElementType> = ComponentProps<C>
-    
-    type Polymorphic<C extends ElementType = 'div', P = {}> = JSXStyleProperties &
-      Assign<Omit<PropsOf<C>, 'color'>, P & { as?: C }>
+    type Polymorphic<C extends ElementType = "div", P = {}> =
+      | JSXStyleProperties
+      | Assign<Omit<ComponentProps<C>, "color">, P & { as?: C }>
 
     export type ${jsxName}Props<C extends ElementType = 'div'> = Polymorphic<C, ${upperName}Properties>
     
-    export declare function ${jsxName}<V extends ElementType>(props: ${jsxName}Props<V>): JSX.Element    
+    ${pattern.description ? `/** ${pattern.description} */` : ""}
+    export declare function ${jsxName}<V extends ElementType = 'div'>(props: ${jsxName}Props<V>): JSX.Element    
     `
   };
 }
 function generateReactJsxPattern(ctx) {
-  if (!ctx.hasPattern)
-    return [];
   return Object.entries(ctx.patterns).map(([name, pattern]) => generate2(name, pattern, ctx.jsxFactory));
 }
 
@@ -660,7 +653,7 @@ function generateSolidJsxFactory(ctx) {
     
     type Element = keyof JSX.IntrinsicElements
     
-    export type HTML${upperName}Props<T extends Element> = Assign<JSX.IntrinsicElements[T], JSXStyleProperties>
+    export type HTML${upperName}Props<T extends Element> = Omit<JSX.IntrinsicElements[T], 'color'> | JSXStyleProperties
 
     type JSXFactory = {
       [K in Element]: (props: HTML${upperName}Props<K>) => JSX.Element
@@ -669,8 +662,8 @@ function generateSolidJsxFactory(ctx) {
     export declare const ${name}: JSXFactory
     `,
     js: outdent12`
-    import { Dynamic } from 'solid-js/web';
-    import { mergeProps, splitProps } from 'solid-js';
+    import { Dynamic } from 'solid-js/web'
+    import { mergeProps, splitProps } from 'solid-js'
     import { allCssProperties } from './is-valid-prop'
     import { css } from '../css'
 
@@ -699,19 +692,19 @@ function generateSolidJsxFactory(ctx) {
     }
     
     function createFactory() {
-      const cache = new Map();
+      const cache = new Map()
     
       return new Proxy(Object.create(null), {
         get(_, el) {
           if (!cache.has(el)) {
-            cache.set(el, styled(el));
+            cache.set(el, styled(el))
           }
-          return cache.get(el);
+          return cache.get(el)
         },
       })
     }
       
-    export const ${name} = createFactory();
+    export const ${name} = createFactory()
     `
   };
 }
@@ -803,20 +796,18 @@ function generate3(name, pattern, jsxFactory) {
     import { Assign, JSXStyleProperties } from '../types'
     
     type ElementType = keyof JSX.IntrinsicElements
-    type PropsOf<C extends ElementType> = ComponentProps<C>
     
-    type Polymorphic<C extends ElementType = 'div', P = {}> = JSXStyleProperties &
-      Assign<Omit<PropsOf<C>, 'color'>, P & { as?: C }>
+    type Polymorphic<C extends ElementType = 'div', P = {}> = JSXStyleProperties |
+      Assign<Omit<ComponentProps<C>, 'color'>, P & { as?: C }>
 
     export type ${jsxName}Props<C extends ElementType = 'div'> = Polymorphic<C, ${upperName}Properties>
     
-    export declare function ${jsxName}<V extends ElementType>(props: ${jsxName}Props<V>): JSX.Element    
+    ${pattern.description ? `/** ${pattern.description} */` : ""}
+    export declare function ${jsxName}<V extends ElementType = 'div'>(props: ${jsxName}Props<V>): JSX.Element    
     `
   };
 }
 function generateSolidJsxPattern(ctx) {
-  if (!ctx.hasPattern)
-    return [];
   return Object.entries(ctx.patterns).map(([name, pattern]) => generate3(name, pattern, ctx.jsxFactory));
 }
 
@@ -835,6 +826,8 @@ var patternMap = {
   preact: generatePreactJsxPattern
 };
 function generateJsxPatterns(ctx) {
+  if (!ctx.hasPatterns)
+    return [];
   return patternMap[ctx.jsxFramework](ctx);
 }
 var layoutGridMap = {
@@ -897,7 +890,7 @@ function generate4(name, pattern) {
   };
 }
 function generatePattern(ctx) {
-  if (!ctx.hasPattern)
+  if (!ctx.hasPatterns)
     return;
   return Object.entries(ctx.patterns).map(([name, pattern]) => generate4(name, pattern));
 }
@@ -1550,7 +1543,7 @@ import { discardDuplicate as discardDuplicate2 } from "@pandacss/core";
 import { ConfigNotFoundError } from "@pandacss/error";
 import { logger as logger5 } from "@pandacss/logger";
 import { toHash } from "@pandacss/shared";
-import { existsSync as existsSync2, readFileSync as readFileSync4 } from "fs";
+import { existsSync as existsSync2, readFileSync as readFileSync5 } from "fs";
 import { statSync } from "fs-extra";
 import { resolve as resolve3 } from "path";
 
@@ -1572,11 +1565,12 @@ import { createParser, createProject } from "@pandacss/parser";
 import { capitalize as capitalize10, compact, mapObject, uncapitalize } from "@pandacss/shared";
 import { TokenDictionary } from "@pandacss/token-dictionary";
 import glob from "fast-glob";
-import { readdirSync } from "fs";
+import { readdirSync, readFileSync as readFileSync4 } from "fs";
 import { emptyDir, ensureDir, existsSync } from "fs-extra";
 import { readFile, unlink, writeFile } from "fs/promises";
 import { extname, isAbsolute, join as join2, relative, resolve, sep } from "path";
 import postcss from "postcss";
+import { ScriptKind } from "ts-morph";
 import { match as match6, P } from "ts-pattern";
 var helpers = {
   map: mapObject
@@ -1680,6 +1674,7 @@ function createContext(conf, io = fileSystem) {
   function getPatternFnName(jsx) {
     return patternNodes.find((node) => node.name === jsx)?.baseName ?? uncapitalize(jsx);
   }
+  const hasPatterns = Object.keys(patterns).length > 0;
   function getRecipe(name) {
     const recipe = recipes[name];
     if (!recipe) {
@@ -1702,6 +1697,7 @@ function createContext(conf, io = fileSystem) {
       return [{}, props];
     return splitProps(props, recipe.props);
   }
+  const hasRecipes = Object.keys(recipes).length > 0;
   const properties = Array.from(/* @__PURE__ */ new Set(["css", ...utility.keys(), ...conditions.keys()]));
   function isProperty(prop) {
     const regex = new RegExp("^(?:" + properties.join("|") + ")$");
@@ -1776,14 +1772,46 @@ function createContext(conf, io = fileSystem) {
   }
   const files = getFiles();
   logger4.debug({ type: "ctx:files", msg: files });
+  const tsProject = createProject();
+  function addSourceFile(file) {
+    tsProject.createSourceFile(file, readFileSync4(file, "utf8"), {
+      overwrite: true,
+      scriptKind: ScriptKind.TSX
+    });
+  }
+  function reloadSourceFile(file) {
+    const sourceFile = tsProject.getSourceFile(file);
+    sourceFile?.refreshFromFileSystemSync();
+  }
+  function reloadSourceFiles() {
+    const files2 = getFiles();
+    for (const file of files2) {
+      const source = tsProject.getSourceFile(file);
+      if (source) {
+        source.refreshFromFileSystemSync();
+      } else {
+        tsProject.addSourceFileAtPath(file);
+      }
+    }
+  }
+  function getSourceFile(file) {
+    return tsProject.getSourceFile(absPath(file));
+  }
+  function removeSourceFile(file) {
+    const sourceFile = tsProject.getSourceFile(absPath(file));
+    if (sourceFile) {
+      return tsProject.removeSourceFile(sourceFile);
+    }
+  }
+  files.forEach((file) => {
+    addSourceFile(file);
+  });
   const importMap = {
     css: `${outdir}/css`,
     recipe: `${outdir}/recipes`,
     pattern: `${outdir}/patterns`,
     jsx: `${outdir}/jsx`
   };
-  const tsProject = createProject();
-  tsProject.addSourceFilesAtPaths(files);
   const parseSourceFile = createParser({
     importMap,
     jsx: {
@@ -1865,29 +1893,11 @@ function createContext(conf, io = fileSystem) {
     exclude,
     conditions,
     importMap,
-    reloadSourceFiles() {
-      const files2 = getFiles();
-      for (const file of files2) {
-        const source = tsProject.getSourceFile(file);
-        if (source) {
-          source.refreshFromFileSystemSync();
-        } else {
-          tsProject.addSourceFileAtPath(file);
-        }
-      }
-    },
-    getSourceFile(file) {
-      return tsProject.getSourceFile(absPath(file));
-    },
-    addSourceFile(file) {
-      return tsProject.addSourceFileAtPath(absPath(file));
-    },
-    removeSourceFile(file) {
-      const sourceFile = tsProject.getSourceFile(absPath(file));
-      if (sourceFile) {
-        return tsProject.removeSourceFile(sourceFile);
-      }
-    },
+    reloadSourceFiles,
+    getSourceFile,
+    addSourceFile,
+    reloadSourceFile,
+    removeSourceFile,
     parseSourceFile,
     getPath,
     paths,
@@ -1899,14 +1909,14 @@ function createContext(conf, io = fileSystem) {
     utility,
     collectStyles,
     patterns,
-    hasPattern: Object.keys(patterns).length > 0,
+    hasPatterns,
     getPattern,
     execPattern,
     patternNodes,
     getPatternFnName,
     recipes,
     getRecipe,
-    hasRecipes: Object.keys(recipes).length > 0,
+    hasRecipes,
     jsxFramework,
     jsxFactory,
     cssVarRoot,
@@ -1981,7 +1991,7 @@ function getConfigHash() {
   if (!file) {
     throw new ConfigNotFoundError();
   }
-  return toHash(readFileSync4(file, "utf-8"));
+  return toHash(readFileSync5(file, "utf-8"));
 }
 var Builder = class {
   fileModifiedMap = /* @__PURE__ */ new Map();
@@ -2079,6 +2089,7 @@ import { logger as logger8 } from "@pandacss/logger";
 import { logger as logger7 } from "@pandacss/logger";
 import chokidar from "chokidar";
 import { join as join3 } from "path";
+import { match as match7 } from "ts-pattern";
 function createWatcher(files, options = {}) {
   const { ignore, cwd = process.cwd(), poll } = options;
   const coalesce = poll || process.platform === "win32";
@@ -2110,13 +2121,17 @@ async function createContentWatcher(ctx, callback) {
   });
   watcher.on("all", async (event, file) => {
     logger7.debug({ type: `file:${event}`, file });
-    ctx.removeSourceFile(file);
-    if (event === "unlink") {
+    match7(event).with("unlink", () => {
+      ctx.removeSourceFile(file);
       ctx.chunks.rm(file);
-    } else {
+    }).with("change", async () => {
+      ctx.reloadSourceFile(file);
+      await callback(file);
+    }).with("add", async () => {
       ctx.addSourceFile(file);
       await callback(file);
-    }
+    }).otherwise(() => {
+    });
   });
   return watcher;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/node",
-  "version": "0.0.0-dev-20221128065048",
+  "version": "0.0.0-dev-20221128112158",
   "description": "The core css panda library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -30,15 +30,15 @@
     "telejson": "6.0.8",
     "ts-pattern": "4.0.6",
     "ts-morph": "17.0.1",
-    "@pandacss/types": "0.0.0-dev-20221128065048",
-    "@pandacss/is-valid-prop": "0.0.0-dev-20221128065048",
-    "@pandacss/error": "0.0.0-dev-20221128065048",
-    "@pandacss/parser": "0.0.0-dev-20221128065048",
-    "@pandacss/shared": "0.0.0-dev-20221128065048",
-    "@pandacss/token-dictionary": "0.0.0-dev-20221128065048",
-    "@pandacss/logger": "0.0.0-dev-20221128065048",
-    "@pandacss/core": "0.0.0-dev-20221128065048",
-    "@pandacss/config": "0.0.0-dev-20221128065048"
+    "@pandacss/types": "0.0.0-dev-20221128112158",
+    "@pandacss/is-valid-prop": "0.0.0-dev-20221128112158",
+    "@pandacss/error": "0.0.0-dev-20221128112158",
+    "@pandacss/parser": "0.0.0-dev-20221128112158",
+    "@pandacss/shared": "0.0.0-dev-20221128112158",
+    "@pandacss/token-dictionary": "0.0.0-dev-20221128112158",
+    "@pandacss/logger": "0.0.0-dev-20221128112158",
+    "@pandacss/core": "0.0.0-dev-20221128112158",
+    "@pandacss/config": "0.0.0-dev-20221128112158"
   },
   "devDependencies": {
     "@types/fs-extra": "9.0.13",
@@ -46,7 +46,7 @@
     "@types/glob-parent": "^5.1.1",
     "@types/pluralize": "0.0.29",
     "@types/lodash.merge": "4.6.7",
-    "@pandacss/fixture": "0.0.0-dev-20221128065048"
+    "@pandacss/fixture": "0.0.0-dev-20221128112158"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=cjs,esm --shims --dts",