@pandacss/generator 0.5.0 → 0.5.1

package/dist/index.d.mts

@@ -1,9 +1,8 @@
 import * as _pandacss_types_dist_shared from '@pandacss/types/dist/shared';
 import * as _pandacss_core from '@pandacss/core';
 import * as _pandacss_token_dictionary from '@pandacss/token-dictionary';
-import * as _pandacss_types_dist_config from '@pandacss/types/dist/config';
 import * as _pandacss_types from '@pandacss/types';
-import { ConfigResultWithHooks } from '@pandacss/types';
+import { ConfigResultWithHooks, TSConfig } from '@pandacss/types';
 
 declare const getEngine: (conf: ConfigResultWithHooks) => {
     patterns: {
@@ -41,7 +40,7 @@ declare const getEngine: (conf: ConfigResultWithHooks) => {
         upperName: string;
         typeName: string;
         componentName: string;
-        framework: _pandacss_types_dist_config.JsxFramework | undefined;
+        framework: ("solid" | "react" | "preact" | "vue" | "qwik") | undefined;
     };
     paths: {
         get: (file?: string | undefined) => string[];
@@ -88,6 +87,8 @@ declare const getEngine: (conf: ConfigResultWithHooks) => {
     hooks: _pandacss_types.PandaHookable;
     path: string;
     config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "include" | "outdir" | "cwd">>;
+    tsconfig?: TSConfig | undefined;
+    tsconfigFile?: string | undefined;
     dependencies: string[];
 };
 type Context = ReturnType<typeof getEngine>;
@@ -135,27 +136,49 @@ declare namespace messages {
 }
 
 declare const createGenerator: (conf: ConfigResultWithHooks) => {
-    config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "include" | "outdir" | "cwd">>;
-    path: string;
-    conditions: _pandacss_core.Conditions;
-    utility: _pandacss_core.Utility;
-    hash: {
-        tokens: boolean | undefined;
-        className: boolean | undefined;
-    };
-    prefix: {
-        tokens: string | undefined;
-        className: string | undefined;
+    getArtifacts: () => _pandacss_types.Artifact[];
+    getCss: (options: {
+        files: string[];
+        resolve?: boolean | undefined;
+    }) => string;
+    getParserCss: (result: _pandacss_types.ParserResultType) => string | undefined;
+    messages: {
+        artifactsGenerated: () => string;
+        configExists: (cmd: string) => string;
+        thankYou: () => string;
+        codegenComplete: () => string;
+        noExtract: () => string;
+        watch: () => string;
+        buildComplete: (count: number) => string;
+        configWatch: () => string;
     };
-    tokens: _pandacss_token_dictionary.TokenDictionary;
-    jsx: {
-        factoryName: string;
-        upperName: string;
-        typeName: string;
-        componentName: string;
-        framework: _pandacss_types_dist_config.JsxFramework | undefined;
+    parserOptions: {
+        importMap: {
+            css: string;
+            recipe: string;
+            pattern: string;
+            jsx: string;
+        };
+        jsx: {
+            factory: string;
+            isStyleProp: (key: string) => boolean;
+            nodes: ({
+                type: "pattern";
+                name: string;
+                props: string[];
+                baseName: string;
+            } | {
+                type: "recipe";
+                name: string;
+                props: string[];
+                baseName: string;
+                jsx: (string | RegExp)[];
+                match: RegExp;
+            })[];
+        };
+        getRecipeName: (jsxName: string) => string;
+        getRecipeByName: (name: string) => _pandacss_types.RecipeConfig | undefined;
     };
-    recipes: _pandacss_core.Recipes;
     patterns: {
         transform: (name: string, data: _pandacss_types.Dict) => _pandacss_types.SystemStyleObject;
         nodes: {
@@ -186,32 +209,12 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
         getFnName: (jsx: string) => string;
         isEmpty: () => boolean;
     };
-    studio: {
-        outdir: string;
-        logo?: string | undefined;
-        inject?: {
-            head?: string | undefined;
-            body?: string | undefined;
-        } | undefined;
-    };
-    hooks: _pandacss_types.PandaHookable;
-    createSheet: (options?: Pick<_pandacss_core.StylesheetOptions, "content"> | undefined) => _pandacss_core.Stylesheet;
-    properties: string[];
-    getArtifacts: () => _pandacss_types.Artifact[];
-    getCss: (options: {
-        files: string[];
-        resolve?: boolean | undefined;
-    }) => string;
-    getParserCss: (result: _pandacss_types.ParserResultType) => string | undefined;
-    messages: {
-        artifactsGenerated: () => string;
-        configExists: (cmd: string) => string;
-        thankYou: () => string;
-        codegenComplete: () => string;
-        noExtract: () => string;
-        watch: () => string;
-        buildComplete: (count: number) => string;
-        configWatch: () => string;
+    jsx: {
+        factoryName: string;
+        upperName: string;
+        typeName: string;
+        componentName: string;
+        framework: ("solid" | "react" | "preact" | "vue" | "qwik") | undefined;
     };
     paths: {
         get: (file?: string | undefined) => string[];
@@ -231,36 +234,36 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
         export(file: string): string;
     };
     isTemplateLiteralSyntax: boolean;
+    studio: {
+        outdir: string;
+        logo?: string | undefined;
+        inject?: {
+            head?: string | undefined;
+            body?: string | undefined;
+        } | undefined;
+    };
+    hash: {
+        tokens: boolean | undefined;
+        className: boolean | undefined;
+    };
+    prefix: {
+        tokens: string | undefined;
+        className: string | undefined;
+    };
+    tokens: _pandacss_token_dictionary.TokenDictionary;
+    utility: _pandacss_core.Utility;
+    properties: string[];
     isValidProperty: (key: string) => boolean;
+    recipes: _pandacss_core.Recipes;
+    conditions: _pandacss_core.Conditions;
     createSheetContext: () => _pandacss_core.StylesheetContext;
+    createSheet: (options?: Pick<_pandacss_core.StylesheetOptions, "content"> | undefined) => _pandacss_core.Stylesheet;
+    hooks: _pandacss_types.PandaHookable;
+    path: string;
+    config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "include" | "outdir" | "cwd">>;
+    tsconfig?: TSConfig | undefined;
+    tsconfigFile?: string | undefined;
     dependencies: string[];
-    parserOptions: {
-        importMap: {
-            css: string;
-            recipe: string;
-            pattern: string;
-            jsx: string;
-        };
-        jsx: {
-            factory: string;
-            isStyleProp: (key: string) => boolean;
-            nodes: ({
-                type: "pattern";
-                name: string;
-                props: string[];
-                baseName: string;
-            } | {
-                type: "recipe";
-                name: string;
-                props: string[];
-                baseName: string;
-                jsx: (string | RegExp)[];
-                match: RegExp;
-            })[];
-        };
-        getRecipeName: (jsxName: string) => string;
-        getRecipeByName: (name: string) => _pandacss_types.RecipeConfig | undefined;
-    };
 };
 type Generator = ReturnType<typeof createGenerator>;
 

package/dist/index.d.ts

@@ -1,9 +1,8 @@
 import * as _pandacss_types_dist_shared from '@pandacss/types/dist/shared';
 import * as _pandacss_core from '@pandacss/core';
 import * as _pandacss_token_dictionary from '@pandacss/token-dictionary';
-import * as _pandacss_types_dist_config from '@pandacss/types/dist/config';
 import * as _pandacss_types from '@pandacss/types';
-import { ConfigResultWithHooks } from '@pandacss/types';
+import { ConfigResultWithHooks, TSConfig } from '@pandacss/types';
 
 declare const getEngine: (conf: ConfigResultWithHooks) => {
     patterns: {
@@ -41,7 +40,7 @@ declare const getEngine: (conf: ConfigResultWithHooks) => {
         upperName: string;
         typeName: string;
         componentName: string;
-        framework: _pandacss_types_dist_config.JsxFramework | undefined;
+        framework: ("solid" | "react" | "preact" | "vue" | "qwik") | undefined;
     };
     paths: {
         get: (file?: string | undefined) => string[];
@@ -88,6 +87,8 @@ declare const getEngine: (conf: ConfigResultWithHooks) => {
     hooks: _pandacss_types.PandaHookable;
     path: string;
     config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "include" | "outdir" | "cwd">>;
+    tsconfig?: TSConfig | undefined;
+    tsconfigFile?: string | undefined;
     dependencies: string[];
 };
 type Context = ReturnType<typeof getEngine>;
@@ -135,27 +136,49 @@ declare namespace messages {
 }
 
 declare const createGenerator: (conf: ConfigResultWithHooks) => {
-    config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "include" | "outdir" | "cwd">>;
-    path: string;
-    conditions: _pandacss_core.Conditions;
-    utility: _pandacss_core.Utility;
-    hash: {
-        tokens: boolean | undefined;
-        className: boolean | undefined;
-    };
-    prefix: {
-        tokens: string | undefined;
-        className: string | undefined;
+    getArtifacts: () => _pandacss_types.Artifact[];
+    getCss: (options: {
+        files: string[];
+        resolve?: boolean | undefined;
+    }) => string;
+    getParserCss: (result: _pandacss_types.ParserResultType) => string | undefined;
+    messages: {
+        artifactsGenerated: () => string;
+        configExists: (cmd: string) => string;
+        thankYou: () => string;
+        codegenComplete: () => string;
+        noExtract: () => string;
+        watch: () => string;
+        buildComplete: (count: number) => string;
+        configWatch: () => string;
     };
-    tokens: _pandacss_token_dictionary.TokenDictionary;
-    jsx: {
-        factoryName: string;
-        upperName: string;
-        typeName: string;
-        componentName: string;
-        framework: _pandacss_types_dist_config.JsxFramework | undefined;
+    parserOptions: {
+        importMap: {
+            css: string;
+            recipe: string;
+            pattern: string;
+            jsx: string;
+        };
+        jsx: {
+            factory: string;
+            isStyleProp: (key: string) => boolean;
+            nodes: ({
+                type: "pattern";
+                name: string;
+                props: string[];
+                baseName: string;
+            } | {
+                type: "recipe";
+                name: string;
+                props: string[];
+                baseName: string;
+                jsx: (string | RegExp)[];
+                match: RegExp;
+            })[];
+        };
+        getRecipeName: (jsxName: string) => string;
+        getRecipeByName: (name: string) => _pandacss_types.RecipeConfig | undefined;
     };
-    recipes: _pandacss_core.Recipes;
     patterns: {
         transform: (name: string, data: _pandacss_types.Dict) => _pandacss_types.SystemStyleObject;
         nodes: {
@@ -186,32 +209,12 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
         getFnName: (jsx: string) => string;
         isEmpty: () => boolean;
     };
-    studio: {
-        outdir: string;
-        logo?: string | undefined;
-        inject?: {
-            head?: string | undefined;
-            body?: string | undefined;
-        } | undefined;
-    };
-    hooks: _pandacss_types.PandaHookable;
-    createSheet: (options?: Pick<_pandacss_core.StylesheetOptions, "content"> | undefined) => _pandacss_core.Stylesheet;
-    properties: string[];
-    getArtifacts: () => _pandacss_types.Artifact[];
-    getCss: (options: {
-        files: string[];
-        resolve?: boolean | undefined;
-    }) => string;
-    getParserCss: (result: _pandacss_types.ParserResultType) => string | undefined;
-    messages: {
-        artifactsGenerated: () => string;
-        configExists: (cmd: string) => string;
-        thankYou: () => string;
-        codegenComplete: () => string;
-        noExtract: () => string;
-        watch: () => string;
-        buildComplete: (count: number) => string;
-        configWatch: () => string;
+    jsx: {
+        factoryName: string;
+        upperName: string;
+        typeName: string;
+        componentName: string;
+        framework: ("solid" | "react" | "preact" | "vue" | "qwik") | undefined;
     };
     paths: {
         get: (file?: string | undefined) => string[];
@@ -231,36 +234,36 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
         export(file: string): string;
     };
     isTemplateLiteralSyntax: boolean;
+    studio: {
+        outdir: string;
+        logo?: string | undefined;
+        inject?: {
+            head?: string | undefined;
+            body?: string | undefined;
+        } | undefined;
+    };
+    hash: {
+        tokens: boolean | undefined;
+        className: boolean | undefined;
+    };
+    prefix: {
+        tokens: string | undefined;
+        className: string | undefined;
+    };
+    tokens: _pandacss_token_dictionary.TokenDictionary;
+    utility: _pandacss_core.Utility;
+    properties: string[];
     isValidProperty: (key: string) => boolean;
+    recipes: _pandacss_core.Recipes;
+    conditions: _pandacss_core.Conditions;
     createSheetContext: () => _pandacss_core.StylesheetContext;
+    createSheet: (options?: Pick<_pandacss_core.StylesheetOptions, "content"> | undefined) => _pandacss_core.Stylesheet;
+    hooks: _pandacss_types.PandaHookable;
+    path: string;
+    config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "include" | "outdir" | "cwd">>;
+    tsconfig?: TSConfig | undefined;
+    tsconfigFile?: string | undefined;
     dependencies: string[];
-    parserOptions: {
-        importMap: {
-            css: string;
-            recipe: string;
-            pattern: string;
-            jsx: string;
-        };
-        jsx: {
-            factory: string;
-            isStyleProp: (key: string) => boolean;
-            nodes: ({
-                type: "pattern";
-                name: string;
-                props: string[];
-                baseName: string;
-            } | {
-                type: "recipe";
-                name: string;
-                props: string[];
-                baseName: string;
-                jsx: (string | RegExp)[];
-                match: RegExp;
-            })[];
-        };
-        getRecipeName: (jsxName: string) => string;
-        getRecipeByName: (name: string) => _pandacss_types.RecipeConfig | undefined;
-    };
 };
 type Generator = ReturnType<typeof createGenerator>;
 

package/dist/index.js

@@ -73,7 +73,7 @@ var artifactsGenerated = (ctx) => {
       ${tick} ${(0, import_logger.quote)(outdir, "/recipes")}: functions to create multi-variant styles
       `,
     jsx.framework && import_outdent.outdent`
-      ${tick} ${(0, import_logger.quote)(outdir, "/jsx")}: style prop powered elements for ${jsx.framework}
+      ${tick} ${(0, import_logger.quote)(outdir, "/jsx")}: styled jsx elements for ${jsx.framework}
       `,
     "\n"
   ].filter(Boolean).join("\n");
@@ -128,9 +128,6 @@ var getMessages = (ctx) => ({
   configWatch
 });
 
-// src/generator.ts
-var import_lil_fp3 = require("lil-fp");
-
 // src/artifacts/index.ts
 var import_shared4 = require("@pandacss/shared");
 var import_outdent41 = __toESM(require("outdent"));
@@ -415,7 +412,7 @@ var generateStaticCss = (ctx) => {
   const fn = (0, import_core2.getStaticCss)(staticCss);
   const results = fn({
     breakpoints: Object.keys(theme.breakpoints ?? {}),
-    getPropertyKeys: utility.getPropertyKeys,
+    getPropertyKeys: (prop) => utility.getPropertyKeys(prop).filter((key) => !key.startsWith("type:") && !key.startsWith("CssProperties:")),
     getRecipeKeys: (recipe) => recipes.details.find((detail) => detail.config.name === recipe)?.variantKeyMap ?? {}
   });
   results.css.forEach((css2) => {
@@ -750,7 +747,7 @@ function generateCvaFn(ctx) {
 
       return Object.assign(cvaFn, {
         __cva__: true,
-        variants: variantMap,
+        variantMap,
         variantKeys,
         resolve,
         config,
@@ -829,7 +826,7 @@ var import_outdent8 = require("outdent");
 
 // src/artifacts/generated/helpers.mjs.json
 var helpers_mjs_default = {
-  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/astish.ts\nvar newRule = /(?:([\\u0080-\\uFFFF\\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\\s*)/g;\nvar ruleClean = /\\/\\*[^]*?\\*\\/|\\s\\s+|\\n/g;\nvar astish = (val, tree = [{}]) => {\n  const block = newRule.exec(val.replace(ruleClean, ""));\n  if (!block)\n    return tree[0];\n  if (block[4])\n    tree.shift();\n  else if (block[3])\n    tree.unshift(tree[0][block[3]] = tree[0][block[3]] || {});\n  else\n    tree[0][block[1]] = block[2];\n  return astish(val, tree);\n};\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?$/;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const result = {};\n  for (const source of sources) {\n    for (const [key, value] of Object.entries(source)) {\n      if (isObject(value)) {\n        result[key] = mergeProps(result[key] || {}, value);\n      } else {\n        result[key] = value;\n      }\n    }\n  }\n  return result;\n}\n\n// src/walk-object.ts\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        result[key] = inner(child, childPath);\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeShorthand(styles, context) {\n  const { hasShorthand, resolveShorthand } = context.utility;\n  return walkObject(styles, (v) => v, {\n    getKey: (prop) => {\n      return hasShorthand ? resolveShorthand(prop) : prop;\n    }\n  });\n}\nfunction normalizeStyleObject(styles, context) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: (prop) => {\n        return hasShorthand ? resolveShorthand(prop) : prop;\n      }\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(toHash(baseArray.join(":")));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return (styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  };\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => normalizeShorthand(style, context));\n  }\n  function mergeCss(...styles) {\n    return mergeProps(...resolve(styles));\n  }\n  function assignCss(...styles) {\n    return Object.assign({}, ...resolve(styles));\n  }\n  return { mergeCss, assignCss };\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n  const cache = /* @__PURE__ */ new Map();\n  const get = (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn(...args);\n    cache.set(key, result);\n    return result;\n  };\n  return get;\n};\n\n// src/hypenate.ts\nvar dashCaseRegex = /[A-Z]/g;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(dashCaseRegex, (match) => `-${match.toLowerCase()}`);\n});\n\n// src/normalize-html.ts\nvar htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"];\nfunction convert(key) {\n  return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key;\n}\nfunction normalizeHTMLProps(props) {\n  return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));\n}\nnormalizeHTMLProps.keys = htmlProps;\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\nexport {\n  astish,\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  mergeProps,\n  normalizeHTMLProps,\n  splitProps,\n  toHash,\n  walkObject,\n  withoutSpace\n};\n'
+  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/astish.ts\nvar newRule = /(?:([\\u0080-\\uFFFF\\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\\s*)/g;\nvar ruleClean = /\\/\\*[^]*?\\*\\/|\\s\\s+|\\n/g;\nvar astish = (val, tree = [{}]) => {\n  const block = newRule.exec((val ?? "").replace(ruleClean, ""));\n  if (!block)\n    return tree[0];\n  if (block[4])\n    tree.shift();\n  else if (block[3])\n    tree.unshift(tree[0][block[3]] = tree[0][block[3]] || {});\n  else\n    tree[0][block[1]] = block[2];\n  return astish(val, tree);\n};\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?$/;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const result = {};\n  for (const source of sources) {\n    for (const [key, value] of Object.entries(source)) {\n      if (isObject(value)) {\n        result[key] = mergeProps(result[key] || {}, value);\n      } else {\n        result[key] = value;\n      }\n    }\n  }\n  return result;\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeShorthand(styles, context) {\n  const { hasShorthand, resolveShorthand } = context.utility;\n  return walkObject(styles, (v) => v, {\n    getKey: (prop) => {\n      return hasShorthand ? resolveShorthand(prop) : prop;\n    }\n  });\n}\nfunction normalizeStyleObject(styles, context) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: (prop) => {\n        return hasShorthand ? resolveShorthand(prop) : prop;\n      }\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(toHash(baseArray.join(":")));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return (styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  };\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => normalizeShorthand(style, context));\n  }\n  function mergeCss(...styles) {\n    return mergeProps(...resolve(styles));\n  }\n  function assignCss(...styles) {\n    return Object.assign({}, ...resolve(styles));\n  }\n  return { mergeCss, assignCss };\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n  const cache = /* @__PURE__ */ new Map();\n  const get = (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn(...args);\n    cache.set(key, result);\n    return result;\n  };\n  return get;\n};\n\n// src/hypenate.ts\nvar dashCaseRegex = /[A-Z]/g;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(dashCaseRegex, (match) => `-${match.toLowerCase()}`);\n});\n\n// src/normalize-html.ts\nvar htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"];\nfunction convert(key) {\n  return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key;\n}\nfunction normalizeHTMLProps(props) {\n  return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));\n}\nnormalizeHTMLProps.keys = htmlProps;\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\nexport {\n  astish,\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  mergeProps,\n  normalizeHTMLProps,\n  splitProps,\n  toHash,\n  walkObject,\n  withoutSpace\n};\n'
 };
 
 // src/artifacts/js/helpers.ts
@@ -3127,9 +3124,9 @@ var generateFlattenedCss = (ctx) => (options) => {
   const { theme: { keyframes } = {}, preflight, minify, staticCss } = ctx.config;
   const unresolved = [
     "@layer reset, base, tokens, recipes, utilities;",
+    preflight && "@import './reset.css';",
     "@import './global.css';",
     staticCss && "@import './static.css';",
-    preflight && "@import './reset.css';",
     !ctx.tokens.isEmpty && "@import './tokens/index.css';",
     keyframes && "@import './tokens/keyframes.css';"
   ].filter(Boolean).join("\n\n");
@@ -3431,25 +3428,31 @@ var getImportMap = (outdir) => ({
   pattern: `${outdir}/patterns`,
   jsx: `${outdir}/jsx`
 });
-var createGenerator = (conf) => (0, import_lil_fp3.pipe)(
-  getEngine(defaults(conf)),
-  import_lil_fp3.Obj.assign((ctx) => ({
+var createGenerator = (conf) => {
+  const ctx = getEngine(defaults(conf));
+  const { config, jsx, isValidProperty, patterns, recipes } = ctx;
+  const compilerOptions = conf.tsconfig?.compilerOptions ?? {};
+  const baseUrl = compilerOptions.baseUrl ?? "";
+  const cwd = conf.config.cwd;
+  const relativeBaseUrl = baseUrl ? baseUrl.replace(cwd, "").slice(1) + "/" : cwd;
+  return {
+    ...ctx,
     getArtifacts: generateArtifacts(ctx),
     getCss: generateFlattenedCss(ctx),
     getParserCss: generateParserCss(ctx),
-    messages: getMessages(ctx)
-  })),
-  import_lil_fp3.Obj.bind("parserOptions", ({ config: { outdir }, jsx, isValidProperty, patterns, recipes }) => ({
-    importMap: getImportMap(outdir),
-    jsx: {
-      factory: jsx.factoryName,
-      isStyleProp: isValidProperty,
-      nodes: [...patterns.nodes, ...recipes.nodes]
-    },
-    getRecipeName: recipes.getFnName,
-    getRecipeByName: recipes.getConfig
-  }))
-);
+    messages: getMessages(ctx),
+    parserOptions: {
+      importMap: getImportMap(config.outdir.replace(relativeBaseUrl, "")),
+      jsx: {
+        factory: jsx.factoryName,
+        isStyleProp: isValidProperty,
+        nodes: [...patterns.nodes, ...recipes.nodes]
+      },
+      getRecipeName: recipes.getFnName,
+      getRecipeByName: recipes.getConfig
+    }
+  };
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   createGenerator,

package/dist/index.mjs

@@ -42,7 +42,7 @@ var artifactsGenerated = (ctx) => {
       ${tick} ${quote(outdir, "/recipes")}: functions to create multi-variant styles
       `,
     jsx.framework && outdent`
-      ${tick} ${quote(outdir, "/jsx")}: style prop powered elements for ${jsx.framework}
+      ${tick} ${quote(outdir, "/jsx")}: styled jsx elements for ${jsx.framework}
       `,
     "\n"
   ].filter(Boolean).join("\n");
@@ -97,9 +97,6 @@ var getMessages = (ctx) => ({
   configWatch
 });
 
-// src/generator.ts
-import { Obj as Obj2, pipe as pipe3 } from "lil-fp";
-
 // src/artifacts/index.ts
 import { isObject } from "@pandacss/shared";
 import outdent41 from "outdent";
@@ -384,7 +381,7 @@ var generateStaticCss = (ctx) => {
   const fn = getStaticCss(staticCss);
   const results = fn({
     breakpoints: Object.keys(theme.breakpoints ?? {}),
-    getPropertyKeys: utility.getPropertyKeys,
+    getPropertyKeys: (prop) => utility.getPropertyKeys(prop).filter((key) => !key.startsWith("type:") && !key.startsWith("CssProperties:")),
     getRecipeKeys: (recipe) => recipes.details.find((detail) => detail.config.name === recipe)?.variantKeyMap ?? {}
   });
   results.css.forEach((css2) => {
@@ -719,7 +716,7 @@ function generateCvaFn(ctx) {
 
       return Object.assign(cvaFn, {
         __cva__: true,
-        variants: variantMap,
+        variantMap,
         variantKeys,
         resolve,
         config,
@@ -798,7 +795,7 @@ import { outdent as outdent8 } from "outdent";
 
 // src/artifacts/generated/helpers.mjs.json
 var helpers_mjs_default = {
-  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/astish.ts\nvar newRule = /(?:([\\u0080-\\uFFFF\\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\\s*)/g;\nvar ruleClean = /\\/\\*[^]*?\\*\\/|\\s\\s+|\\n/g;\nvar astish = (val, tree = [{}]) => {\n  const block = newRule.exec(val.replace(ruleClean, ""));\n  if (!block)\n    return tree[0];\n  if (block[4])\n    tree.shift();\n  else if (block[3])\n    tree.unshift(tree[0][block[3]] = tree[0][block[3]] || {});\n  else\n    tree[0][block[1]] = block[2];\n  return astish(val, tree);\n};\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?$/;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const result = {};\n  for (const source of sources) {\n    for (const [key, value] of Object.entries(source)) {\n      if (isObject(value)) {\n        result[key] = mergeProps(result[key] || {}, value);\n      } else {\n        result[key] = value;\n      }\n    }\n  }\n  return result;\n}\n\n// src/walk-object.ts\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        result[key] = inner(child, childPath);\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeShorthand(styles, context) {\n  const { hasShorthand, resolveShorthand } = context.utility;\n  return walkObject(styles, (v) => v, {\n    getKey: (prop) => {\n      return hasShorthand ? resolveShorthand(prop) : prop;\n    }\n  });\n}\nfunction normalizeStyleObject(styles, context) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: (prop) => {\n        return hasShorthand ? resolveShorthand(prop) : prop;\n      }\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(toHash(baseArray.join(":")));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return (styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  };\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => normalizeShorthand(style, context));\n  }\n  function mergeCss(...styles) {\n    return mergeProps(...resolve(styles));\n  }\n  function assignCss(...styles) {\n    return Object.assign({}, ...resolve(styles));\n  }\n  return { mergeCss, assignCss };\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n  const cache = /* @__PURE__ */ new Map();\n  const get = (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn(...args);\n    cache.set(key, result);\n    return result;\n  };\n  return get;\n};\n\n// src/hypenate.ts\nvar dashCaseRegex = /[A-Z]/g;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(dashCaseRegex, (match) => `-${match.toLowerCase()}`);\n});\n\n// src/normalize-html.ts\nvar htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"];\nfunction convert(key) {\n  return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key;\n}\nfunction normalizeHTMLProps(props) {\n  return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));\n}\nnormalizeHTMLProps.keys = htmlProps;\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\nexport {\n  astish,\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  mergeProps,\n  normalizeHTMLProps,\n  splitProps,\n  toHash,\n  walkObject,\n  withoutSpace\n};\n'
+  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/astish.ts\nvar newRule = /(?:([\\u0080-\\uFFFF\\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\\s*)/g;\nvar ruleClean = /\\/\\*[^]*?\\*\\/|\\s\\s+|\\n/g;\nvar astish = (val, tree = [{}]) => {\n  const block = newRule.exec((val ?? "").replace(ruleClean, ""));\n  if (!block)\n    return tree[0];\n  if (block[4])\n    tree.shift();\n  else if (block[3])\n    tree.unshift(tree[0][block[3]] = tree[0][block[3]] || {});\n  else\n    tree[0][block[1]] = block[2];\n  return astish(val, tree);\n};\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?$/;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const result = {};\n  for (const source of sources) {\n    for (const [key, value] of Object.entries(source)) {\n      if (isObject(value)) {\n        result[key] = mergeProps(result[key] || {}, value);\n      } else {\n        result[key] = value;\n      }\n    }\n  }\n  return result;\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeShorthand(styles, context) {\n  const { hasShorthand, resolveShorthand } = context.utility;\n  return walkObject(styles, (v) => v, {\n    getKey: (prop) => {\n      return hasShorthand ? resolveShorthand(prop) : prop;\n    }\n  });\n}\nfunction normalizeStyleObject(styles, context) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: (prop) => {\n        return hasShorthand ? resolveShorthand(prop) : prop;\n      }\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(toHash(baseArray.join(":")));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return (styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  };\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => normalizeShorthand(style, context));\n  }\n  function mergeCss(...styles) {\n    return mergeProps(...resolve(styles));\n  }\n  function assignCss(...styles) {\n    return Object.assign({}, ...resolve(styles));\n  }\n  return { mergeCss, assignCss };\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n  const cache = /* @__PURE__ */ new Map();\n  const get = (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn(...args);\n    cache.set(key, result);\n    return result;\n  };\n  return get;\n};\n\n// src/hypenate.ts\nvar dashCaseRegex = /[A-Z]/g;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(dashCaseRegex, (match) => `-${match.toLowerCase()}`);\n});\n\n// src/normalize-html.ts\nvar htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"];\nfunction convert(key) {\n  return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key;\n}\nfunction normalizeHTMLProps(props) {\n  return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));\n}\nnormalizeHTMLProps.keys = htmlProps;\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\nexport {\n  astish,\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  mergeProps,\n  normalizeHTMLProps,\n  splitProps,\n  toHash,\n  walkObject,\n  withoutSpace\n};\n'
 };
 
 // src/artifacts/js/helpers.ts
@@ -3096,9 +3093,9 @@ var generateFlattenedCss = (ctx) => (options) => {
   const { theme: { keyframes } = {}, preflight, minify, staticCss } = ctx.config;
   const unresolved = [
     "@layer reset, base, tokens, recipes, utilities;",
+    preflight && "@import './reset.css';",
     "@import './global.css';",
     staticCss && "@import './static.css';",
-    preflight && "@import './reset.css';",
     !ctx.tokens.isEmpty && "@import './tokens/index.css';",
     keyframes && "@import './tokens/keyframes.css';"
   ].filter(Boolean).join("\n\n");
@@ -3406,25 +3403,31 @@ var getImportMap = (outdir) => ({
   pattern: `${outdir}/patterns`,
   jsx: `${outdir}/jsx`
 });
-var createGenerator = (conf) => pipe3(
-  getEngine(defaults(conf)),
-  Obj2.assign((ctx) => ({
+var createGenerator = (conf) => {
+  const ctx = getEngine(defaults(conf));
+  const { config, jsx, isValidProperty, patterns, recipes } = ctx;
+  const compilerOptions = conf.tsconfig?.compilerOptions ?? {};
+  const baseUrl = compilerOptions.baseUrl ?? "";
+  const cwd = conf.config.cwd;
+  const relativeBaseUrl = baseUrl ? baseUrl.replace(cwd, "").slice(1) + "/" : cwd;
+  return {
+    ...ctx,
     getArtifacts: generateArtifacts(ctx),
     getCss: generateFlattenedCss(ctx),
     getParserCss: generateParserCss(ctx),
-    messages: getMessages(ctx)
-  })),
-  Obj2.bind("parserOptions", ({ config: { outdir }, jsx, isValidProperty, patterns, recipes }) => ({
-    importMap: getImportMap(outdir),
-    jsx: {
-      factory: jsx.factoryName,
-      isStyleProp: isValidProperty,
-      nodes: [...patterns.nodes, ...recipes.nodes]
-    },
-    getRecipeName: recipes.getFnName,
-    getRecipeByName: recipes.getConfig
-  }))
-);
+    messages: getMessages(ctx),
+    parserOptions: {
+      importMap: getImportMap(config.outdir.replace(relativeBaseUrl, "")),
+      jsx: {
+        factory: jsx.factoryName,
+        isStyleProp: isValidProperty,
+        nodes: [...patterns.nodes, ...recipes.nodes]
+      },
+      getRecipeName: recipes.getFnName,
+      getRecipeByName: recipes.getConfig
+    }
+  };
+};
 export {
   createGenerator,
   messages_exports as messages

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -20,17 +20,17 @@
     "pluralize": "8.0.0",
     "postcss": "8.4.24",
     "ts-pattern": "4.3.0",
-    "@pandacss/core": "0.5.0",
-    "@pandacss/is-valid-prop": "0.5.0",
-    "@pandacss/logger": "0.5.0",
-    "@pandacss/shared": "0.5.0",
-    "@pandacss/token-dictionary": "0.5.0",
-    "@pandacss/types": "0.5.0"
+    "@pandacss/core": "0.5.1",
+    "@pandacss/is-valid-prop": "0.5.1",
+    "@pandacss/logger": "0.5.1",
+    "@pandacss/shared": "0.5.1",
+    "@pandacss/token-dictionary": "0.5.1",
+    "@pandacss/types": "0.5.1"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.29",
     "hookable": "5.5.3",
-    "@pandacss/fixture": "0.5.0"
+    "@pandacss/fixture": "0.5.1"
   },
   "scripts": {
     "prebuild": "tsx scripts/prebuild.ts",