@pandacss/node 0.0.0-dev-20230204123646 → 0.0.0-dev-20230204134735

package/dist/index.js

@@ -82,16 +82,16 @@ function extractFiles(ctx) {
   });
 }
 function extractGlobalCss(ctx) {
-  const css2 = ctx.getGlobalCss();
-  if (!css2)
+  const css3 = ctx.getGlobalCss();
+  if (!css3)
     return;
-  return ctx.chunks.write("system/global.css", css2);
+  return ctx.chunks.write("system/global.css", css3);
 }
 function extractStaticCss(ctx) {
-  const css2 = ctx.getStaticCss();
-  if (!css2)
+  const css3 = ctx.getStaticCss();
+  if (!css3)
     return;
-  return ctx.chunks.write("system/static.css", css2);
+  return ctx.chunks.write("system/static.css", css3);
 }
 
 // src/chunks.ts
@@ -99,6 +99,7 @@ async function extractChunks(ctx) {
   const sheet = new import_core.Stylesheet(ctx.context(), {
     content: [
       "@layer reset, base, tokens, recipes, utilities;",
+      "@import './layout-grid.css';",
       ctx.preflight && "@import './reset.css';",
       !ctx.tokens.isEmpty && "@import './tokens/index.css';",
       ctx.theme.keyframes && "@import './tokens/keyframes.css';"
@@ -107,15 +108,15 @@ async function extractChunks(ctx) {
   const files = ctx.chunks.getFiles();
   await Promise.all(
     files.map(async (file) => {
-      const css2 = await ctx.chunks.readFile(file);
-      sheet.append(css2);
+      const css3 = await ctx.chunks.readFile(file);
+      sheet.append(css3);
     })
   );
   return sheet.toCss({ minify: ctx.minify });
 }
 async function bundleChunks(ctx) {
-  const css2 = await extractChunks(ctx);
-  await ctx.write(ctx.paths.root, [{ file: "styles.css", code: css2 }]);
+  const css3 = await extractChunks(ctx);
+  await ctx.write(ctx.paths.root, [{ file: "styles.css", code: css3 }]);
 }
 async function writeFileChunk(ctx, file) {
   import_logger2.logger.info("chunk:change", `File changed: ${file}`);
@@ -127,7 +128,7 @@ async function writeFileChunk(ctx, file) {
 
 // src/generators/index.ts
 var import_fs2 = require("fs");
-var import_outdent23 = __toESM(require("outdent"));
+var import_outdent24 = __toESM(require("outdent"));
 
 // src/generators/conditions.ts
 var import_outdent = __toESM(require("outdent"));
@@ -992,9 +993,45 @@ function generateLayoutGrid(ctx) {
   return layoutGridMap[ctx.jsxFramework]();
 }
 
+// src/generators/layout-grid.ts
+var import_outdent17 = require("outdent");
+var css = (v) => v[0];
+var layoutGrid = css`
+  .panda-layout-grid {
+    display: grid;
+    gap: var(--gutter);
+    grid-template-columns: repeat(var(--count), 1fr);
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    max-width: var(--max-width);
+    margin-inline: var(--margin-x);
+    padding-inline: var(--padding-x);
+  }
+  .panda-layout-grid__item {
+    display: flex;
+    --color: rgba(255, 0, 0, 0.1);
+    height: 100%;
+  }
+  .panda-layout-grid__item[data-variant='bg'] {
+    background: var(--color);
+  }
+  .panda-layout-grid__item[data-variant='outline'] {
+    border-inline: 1px solid var(--color);
+  }
+`;
+function generateLayoutGridCss() {
+  return import_outdent17.outdent`
+  @layer base {
+      ${layoutGrid}
+  }`;
+}
+
 // src/generators/pattern.ts
 var import_shared = require("@pandacss/shared");
-var import_outdent17 = require("outdent");
+var import_outdent18 = require("outdent");
 var import_javascript_stringify = require("javascript-stringify");
 var import_ts_pattern4 = require("ts-pattern");
 function generate4(ctx, name, pattern) {
@@ -1002,7 +1039,7 @@ function generate4(ctx, name, pattern) {
   const { upperName, styleFn, blocklistType } = ctx.getPatternDetails(name, pattern);
   return {
     name: (0, import_shared.dashCase)(name),
-    dts: import_outdent17.outdent`
+    dts: import_outdent18.outdent`
     import type { SystemStyleObject, ConditionalValue } from '../types'
     import type { PropertyValue } from '../types/prop-type'
     import type { Properties } from '../types/csstype'
@@ -1026,7 +1063,7 @@ function generate4(ctx, name, pattern) {
     }).join("\n	")}
     }
 
-    ${strict ? import_outdent17.outdent`export declare function ${name}(options: ${upperName}Properties): string` : import_outdent17.outdent`
+    ${strict ? import_outdent18.outdent`export declare function ${name}(options: ${upperName}Properties): string` : import_outdent18.outdent`
                 
         type ${upperName}Options = ${upperName}Properties & Omit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}>
 
@@ -1035,7 +1072,7 @@ function generate4(ctx, name, pattern) {
         `}
 
    `,
-    js: import_outdent17.outdent`
+    js: import_outdent18.outdent`
   ${ctx.getImport("mapObject", "../helpers")}
   ${ctx.getImport("css", "../css/index")}
 
@@ -1074,11 +1111,11 @@ function generatePackageJSON(ctx) {
 }
 
 // src/generators/prop-types.ts
-var import_outdent18 = require("outdent");
+var import_outdent19 = require("outdent");
 function generatePropTypes(utility, strict) {
   const strictText = `${strict ? "" : " | NativeValue<T>"}`;
   const result = [
-    import_outdent18.outdent`
+    import_outdent19.outdent`
     import type { ConditionalValue } from './conditions';
     import type { Properties as CSSProperties } from './csstype'
     import type { Tokens } from './token'
@@ -1101,7 +1138,7 @@ function generatePropTypes(utility, strict) {
     result.push(`	${key}: Shorthand<${JSON.stringify(value)}>;`);
   });
   result.push("}");
-  return import_outdent18.outdent`
+  return import_outdent19.outdent`
   ${result.join("\n")}
 
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
@@ -1114,14 +1151,14 @@ function generatePropTypes(utility, strict) {
 
 // src/generators/recipe.ts
 var import_shared2 = require("@pandacss/shared");
-var import_outdent19 = require("outdent");
+var import_outdent20 = require("outdent");
 function generateRecipes(ctx) {
   const { recipes = {}, hash, hasRecipes, utility } = ctx;
   const { separator } = utility;
   if (!hasRecipes)
     return;
   const js = [
-    import_outdent19.outdent`
+    import_outdent20.outdent`
    ${ctx.getImport("createCss, withoutSpace, compact", "../helpers")}
 
    const createRecipe = (name, defaultVariants) => {
@@ -1155,17 +1192,17 @@ function generateRecipes(ctx) {
   `
   ];
   const dts = [
-    import_outdent19.outdent`
+    import_outdent20.outdent`
   import type { ConditionalValue } from '../types'
   `
   ];
   Object.values(recipes).forEach((recipe) => {
     const { name, description, defaultVariants, variants } = recipe;
-    js.push(import_outdent19.outdent`
+    js.push(import_outdent20.outdent`
     export const ${name} = createRecipe('${name}', ${JSON.stringify(defaultVariants ?? {})})
     ${name}.variants = ${JSON.stringify(Object.keys(variants ?? {}))}
     `);
-    dts.push(import_outdent19.outdent`
+    dts.push(import_outdent20.outdent`
     export type ${(0, import_shared2.capitalize)(name)}Variants = {
       ${Object.keys(variants ?? {}).map((key) => {
       const value = variants[key];
@@ -1179,14 +1216,14 @@ function generateRecipes(ctx) {
     `);
   });
   return {
-    js: import_outdent19.outdent.string(js.join("\n\n")),
-    dts: import_outdent19.outdent.string(dts.join("\n\n"))
+    js: import_outdent20.outdent.string(js.join("\n\n")),
+    dts: import_outdent20.outdent.string(dts.join("\n\n"))
   };
 }
 
 // src/generators/reset.ts
-var css = (v) => v[0];
-var reset = css`
+var css2 = (v) => v[0];
+var reset = css2`
   * {
     margin: 0;
   }
@@ -1279,7 +1316,7 @@ var reset = css`
     top: -0.5em;
   }
 `;
-function generateReset() {
+function generateResetCss() {
   return `@layer reset {
     ${reset}
   }`;
@@ -1302,11 +1339,11 @@ function generateTokenCss(ctx, varRoot) {
     if (Object.keys(varsObj).length === 0)
       continue;
     if (key === "base") {
-      const { css: css3 } = (0, import_core2.toCss)({ [root]: varsObj });
-      results.push(css3);
+      const { css: css4 } = (0, import_core2.toCss)({ [root]: varsObj });
+      results.push(css4);
     } else {
       const keys = key.split(":");
-      const { css: css3 } = (0, import_core2.toCss)(varsObj);
+      const { css: css4 } = (0, import_core2.toCss)(varsObj);
       const mapped = keys.map((key2) => conditions.get(key2)).filter(Boolean).map((condition) => {
         const parent = (0, import_core2.extractParentSelectors)(condition);
         return parent ? `&${parent}` : condition;
@@ -1314,13 +1351,13 @@ function generateTokenCss(ctx, varRoot) {
       const rule = getDeepestRule(root, mapped);
       if (!rule)
         continue;
-      getDeepestNode(rule)?.append(css3);
+      getDeepestNode(rule)?.append(css4);
       results.push((0, import_core2.expandNestedCss)(rule.toString()));
     }
   }
-  const css2 = results.join("\n\n");
+  const css3 = results.join("\n\n");
   return `@layer tokens {
-    ${(0, import_core2.prettifyCss)(cleanupSelectors(css2, root))}
+    ${(0, import_core2.prettifyCss)(cleanupSelectors(css3, root))}
   }
   `;
 }
@@ -1344,8 +1381,8 @@ function getDeepestNode(node) {
   }
   return node;
 }
-function cleanupSelectors(css2, varSelector) {
-  const root = import_postcss.default.parse(css2);
+function cleanupSelectors(css3, varSelector) {
+  const root = import_postcss.default.parse(css3);
   root.walkRules((rule) => {
     rule.selectors.forEach((selector) => {
       const res = selector.split(varSelector).filter(Boolean);
@@ -1359,7 +1396,7 @@ function cleanupSelectors(css2, varSelector) {
 
 // src/generators/token-dts.ts
 var import_shared3 = require("@pandacss/shared");
-var import_outdent20 = require("outdent");
+var import_outdent21 = require("outdent");
 var import_pluralize = __toESM(require("pluralize"));
 function generateTokenDts(dict) {
   const set = /* @__PURE__ */ new Set();
@@ -1377,11 +1414,11 @@ function generateTokenDts(dict) {
   }
   result.add("} & { [token: string]: never }");
   set.add(Array.from(result).join("\n"));
-  return import_outdent20.outdent.string(Array.from(set).join("\n\n"));
+  return import_outdent21.outdent.string(Array.from(set).join("\n\n"));
 }
 
 // src/generators/token-js.ts
-var import_outdent21 = __toESM(require("outdent"));
+var import_outdent22 = __toESM(require("outdent"));
 function generateTokenJs(dict) {
   const map = /* @__PURE__ */ new Map();
   dict.allTokens.forEach((token) => {
@@ -1391,7 +1428,7 @@ function generateTokenJs(dict) {
   });
   const obj = Object.fromEntries(map);
   return {
-    js: import_outdent21.default`
+    js: import_outdent22.default`
   const tokens = ${JSON.stringify(obj, null, 2)}
   
   export function token(path, fallback) {
@@ -1404,7 +1441,7 @@ function generateTokenJs(dict) {
 
   token.var = tokenVar
   `,
-    dts: import_outdent21.default`
+    dts: import_outdent22.default`
   import type { Token } from '../types/token'
 
   export declare function token(path: Token, fallback?: string): string & {
@@ -1417,7 +1454,7 @@ function generateTokenJs(dict) {
 // src/generators/types.ts
 var import_is_valid_prop = require("@pandacss/is-valid-prop");
 var import_fs_extra = require("fs-extra");
-var import_outdent22 = __toESM(require("outdent"));
+var import_outdent23 = __toESM(require("outdent"));
 function getType(file) {
   const filepath = getEntrypoint("@pandacss/types", { dev: file });
   return (0, import_fs_extra.readFileSync)(filepath, "utf8");
@@ -1430,7 +1467,7 @@ function generateCssType(ctx) {
     selectors: getType("selectors.d.ts"),
     recipe: getType("recipe.d.ts"),
     composition: getType("composition.d.ts"),
-    global: import_outdent22.default`
+    global: import_outdent23.default`
     import { RecipeVariantRecord, RecipeConfig } from './recipe'
     import { GlobalStyleObject } from './system-types'
     import { CompositionStyles } from './composition'
@@ -1442,14 +1479,14 @@ function generateCssType(ctx) {
       export function defineLayerStyles(definition: CompositionStyles['layerStyles']): CompositionStyles['layerStyles']
     }
     `,
-    exported: import_outdent22.default`
+    exported: import_outdent23.default`
     import './global'
     export { ConditionalValue } from './conditions'
     export { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
     
     export type Assign<Target, Override> = Omit<Target, keyof Override> & Override
     `,
-    styleProps: import_outdent22.default`
+    styleProps: import_outdent23.default`
     import { PropertyValue } from './prop-type'
     import { Token } from './token'
 
@@ -1483,11 +1520,11 @@ function setupDesignTokens(ctx) {
   if (ctx.tokens.isEmpty)
     return;
   const code = generateTokenJs(ctx.tokens);
-  const css2 = generateTokenCss(ctx);
+  const css3 = generateTokenCss(ctx);
   return {
     dir: ctx.paths.token,
     files: [
-      { file: "index.css", code: css2 },
+      { file: "index.css", code: css3 },
       { file: "index.d.ts", code: code.dts },
       { file: ctx.getExt("index"), code: code.js }
     ]
@@ -1564,8 +1601,8 @@ function setupPatterns(ctx) {
   if (!files)
     return;
   const index = {
-    js: import_outdent23.default.string(files.map((file) => ctx.getExport(`./${file.name}`)).join("\n")),
-    dts: import_outdent23.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
+    js: import_outdent24.default.string(files.map((file) => ctx.getExport(`./${file.name}`)).join("\n")),
+    dts: import_outdent24.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.pattern,
@@ -1584,17 +1621,17 @@ function setupJsx(ctx) {
   const types = generateJsxTypes(ctx);
   const factory = generateJsxFactory(ctx);
   const patterns = generateJsxPatterns(ctx);
-  const layoutGrid = generateLayoutGrid(ctx);
+  const layoutGrid2 = generateLayoutGrid(ctx);
   const index = {
-    js: import_outdent23.default`
+    js: import_outdent24.default`
   ${ctx.getExport("./factory")}
   ${ctx.getExport("./layout-grid")}
-  ${import_outdent23.default.string(patterns.map((file) => ctx.getExport(`./${file.name}`)).join("\n"))}
+  ${import_outdent24.default.string(patterns.map((file) => ctx.getExport(`./${file.name}`)).join("\n"))}
   `,
-    dts: import_outdent23.default`
+    dts: import_outdent24.default`
   export * from './factory'
   export * from './layout-grid'
-  ${import_outdent23.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  ${import_outdent24.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
   export type { ${ctx.jsxFactoryDetails.typeName} } from '../types/jsx'
     `
   };
@@ -1603,8 +1640,8 @@ function setupJsx(ctx) {
     files: [
       ...patterns.map((file) => ({ file: ctx.getExt(file.name), code: file.js })),
       ...patterns.map((file) => ({ file: `${file.name}.d.ts`, code: file.dts })),
-      { file: ctx.getExt("layout-grid"), code: layoutGrid.js },
-      { file: "layout-grid.d.ts", code: layoutGrid.dts },
+      { file: ctx.getExt("layout-grid"), code: layoutGrid2.js },
+      { file: "layout-grid.d.ts", code: layoutGrid2.dts },
       { file: ctx.getExt("is-valid-prop"), code: isValidProp.js },
       { file: "factory.d.ts", code: types.jsxFactory },
       { file: ctx.getExt("factory"), code: factory.js },
@@ -1615,12 +1652,12 @@ function setupJsx(ctx) {
 }
 function setupCssIndex(ctx) {
   const index = {
-    js: import_outdent23.default`
+    js: import_outdent24.default`
   ${ctx.getExport("./css")}
   ${ctx.getExport("./cx")}
   ${ctx.getExport("./cva")}
  `,
-    dts: import_outdent23.default`
+    dts: import_outdent24.default`
   export * from './css'
   export * from './cx'
   export * from './cva'
@@ -1634,12 +1671,16 @@ function setupCssIndex(ctx) {
     ]
   };
 }
-function setupReset(ctx) {
+function setupResetCss(ctx) {
   if (!ctx.preflight)
     return;
-  const code = generateReset();
+  const code = generateResetCss();
   return { files: [{ file: "reset.css", code }] };
 }
+function setupLayoutGridCss() {
+  const code = generateLayoutGridCss();
+  return { files: [{ file: "layout-grid.css", code }] };
+}
 function setupPackageJson(ctx) {
   if (!ctx.emitPackage)
     return;
@@ -1660,37 +1701,38 @@ function generateSystem(ctx) {
     setupPatterns(ctx),
     setupCssIndex(ctx),
     setupJsx(ctx),
-    setupReset(ctx),
+    setupResetCss(ctx),
+    setupLayoutGridCss(),
     setupPackageJson(ctx)
   ].filter(Boolean);
 }
 
 // src/messages.ts
 var import_logger3 = require("@pandacss/logger");
-var import_outdent24 = require("outdent");
+var import_outdent25 = require("outdent");
 var tick = import_logger3.colors.green().bold("\u2714\uFE0F");
 function artifactsGeneratedMessage(ctx) {
   return [
-    import_outdent24.outdent`
+    import_outdent25.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/css")}: the css function to author styles
     `,
-    ctx.hasTokens && import_outdent24.outdent`
+    ctx.hasTokens && import_outdent25.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/tokens")}: the css variables and js function to query your tokens
     `,
-    ctx.hasPatterns && import_outdent24.outdent`
+    ctx.hasPatterns && import_outdent25.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/patterns")}: functions to implement common css patterns
     `,
-    ctx.hasRecipes && import_outdent24.outdent`
+    ctx.hasRecipes && import_outdent25.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/recipes")}: functions to create multi-variant styles
     `,
-    ctx.jsxFramework && import_outdent24.outdent`
+    ctx.jsxFramework && import_outdent25.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/jsx")}: style prop powered elements for ${ctx.jsxFramework}
     `,
     "\n"
   ].filter(Boolean).join("\n");
 }
 function configExistsMessage(cmd) {
-  return import_outdent24.outdent`
+  return import_outdent25.outdent`
       \n
       It looks like you already have panda created\`.
       
@@ -1699,7 +1741,7 @@ function configExistsMessage(cmd) {
       `;
 }
 function thankYouMessage() {
-  return import_outdent24.outdent`
+  return import_outdent25.outdent`
 
   🚀 Thanks for choosing ${import_logger3.colors.cyan("Panda")} to write your css.
 
@@ -1711,7 +1753,7 @@ var randomWords = ["Sweet", "Divine", "Pandalicious", "Super"];
 var pickRandom = (arr) => arr[Math.floor(Math.random() * arr.length)];
 function scaffoldCompleteMessage() {
   return import_logger3.logger.box(
-    import_outdent24.outdent`
+    import_outdent25.outdent`
 
   ${import_logger3.colors.bold().cyan("Next steps:")}
   
@@ -1727,12 +1769,12 @@ function scaffoldCompleteMessage() {
   );
 }
 function watchMessage() {
-  return import_outdent24.outdent`
+  return import_outdent25.outdent`
   Watching for file changes...
   `;
 }
 function buildCompleteMessage(ctx) {
-  return import_outdent24.outdent`
+  return import_outdent25.outdent`
   Successfully extracted css from ${ctx.files.length} file(s) ✨
   `;
 }
@@ -1756,16 +1798,6 @@ async function extractCss(ctx) {
   await bundleChunks(ctx);
   return buildCompleteMessage(ctx);
 }
-function getBaseCss(ctx) {
-  const css2 = [
-    generateReset(),
-    generateTokenCss(ctx),
-    generateKeyframes(ctx.theme.keyframes),
-    ctx.getGlobalCss(),
-    ctx.getStaticCss()
-  ];
-  return css2.filter(Boolean).join("\n\n");
-}
 
 // src/builder.ts
 var import_core4 = require("@pandacss/core");
@@ -1776,6 +1808,19 @@ var import_fs4 = require("fs");
 var import_fs_extra3 = require("fs-extra");
 var import_path4 = require("path");
 
+// src/get-base-css.ts
+function getBaseCss(ctx) {
+  const css3 = [
+    generateResetCss(),
+    generateLayoutGridCss(),
+    generateTokenCss(ctx),
+    generateKeyframes(ctx.theme.keyframes),
+    ctx.getGlobalCss(),
+    ctx.getStaticCss()
+  ];
+  return css3.filter(Boolean).join("\n\n");
+}
+
 // src/config.ts
 var import_config = require("@pandacss/config");
 var import_look_it_up = require("look-it-up");
@@ -2007,10 +2052,10 @@ function createContext(conf, io = fileSystem) {
     format(file) {
       return (0, import_path2.relative)(cwd, file).replaceAll(import_path2.sep, "__").replace((0, import_path2.extname)(file), ".css");
     },
-    async write(file, css2) {
+    async write(file, css3) {
       const fileName = chunks.format(file);
       const oldCss = await chunks.readFile(file);
-      const newCss = (0, import_core3.mergeCss)(oldCss, css2);
+      const newCss = (0, import_core3.mergeCss)(oldCss, css3);
       import_logger4.logger.debug("chunk:write", { file, path: fileName });
       return write(paths.chunk, [{ file: fileName, code: newCss }]);
     },
@@ -2053,33 +2098,7 @@ function createContext(conf, io = fileSystem) {
   function getGlobalCss() {
     const sheet = new import_core3.Stylesheet(context());
     sheet.processGlobalCss({
-      ":root": {
-        "--made-with-panda": `'\u{1F43C}'`
-      },
-      ".panda-layout-grid": {
-        display: "grid",
-        gap: "var(--gutter)",
-        gridTemplateColumns: "repeat(var(--count), 1fr)",
-        height: "100%",
-        width: "100%",
-        position: "absolute",
-        inset: "0",
-        pointerEvents: "none",
-        maxWidth: "var(--max-width)",
-        marginInline: "var(--margin-x)",
-        paddingInline: "var(--padding-x)"
-      },
-      ".panda-layout-grid__item": {
-        display: "flex",
-        "--color": "rgba(255, 0, 0, 0.1)",
-        height: "100%",
-        "&[data-variant=bg]": {
-          background: "var(--color)"
-        },
-        "&[data-variant=outline]": {
-          borderInline: "1px solid var(--color)"
-        }
-      }
+      ":root": { "--made-with-panda": `'\u{1F43C}'` }
     });
     if (globalCss) {
       sheet.processGlobalCss(globalCss);
@@ -2099,8 +2118,8 @@ function createContext(conf, io = fileSystem) {
         return recipes2[recipe];
       }
     });
-    results.css.forEach((css2) => {
-      sheet.processAtomic(css2);
+    results.css.forEach((css3) => {
+      sheet.processAtomic(css3);
     });
     results.recipes.forEach((result) => {
       Object.entries(result).forEach(([key, value]) => {
@@ -2122,8 +2141,8 @@ function createContext(conf, io = fileSystem) {
     });
     collector.jsx.forEach((result) => {
       const { data, type, name } = result;
-      const { css: css2 = {}, ...rest } = data;
-      const styles = { ...css2, ...rest };
+      const { css: css3 = {}, ...rest } = data;
+      const styles = { ...css3, ...rest };
       (0, import_ts_pattern5.match)([name, type]).with([import_ts_pattern5.P.string, "pattern"], ([name2]) => {
         collector.setPattern(getPatternFnName(name2), { data: styles });
       }).with([import_ts_pattern5.P.string, "recipe"], ([name2]) => {
@@ -2289,9 +2308,9 @@ var Builder = class {
   fileCssMap = /* @__PURE__ */ new Map();
   context;
   configChanged = true;
-  updateFile(file, css2) {
+  updateFile(file, css3) {
     const oldCss = this.fileCssMap?.get(file) ?? "";
-    const newCss = (0, import_core4.mergeCss)(oldCss, css2);
+    const newCss = (0, import_core4.mergeCss)(oldCss, css3);
     this.fileCssMap?.set(file, newCss);
   }
   async setup() {
@@ -2339,8 +2358,8 @@ var Builder = class {
   toString() {
     const ctx = this.ensure();
     const sheet = new import_core4.Stylesheet(ctx.context());
-    const css2 = Array.from(this.fileCssMap.values()).join("\n\n");
-    sheet.append(css2);
+    const css3 = Array.from(this.fileCssMap.values()).join("\n\n");
+    sheet.append(css3);
     return sheet.toCss({ minify: ctx.minify });
   }
   isValidRoot(root) {
@@ -2495,9 +2514,9 @@ async function generate5(config, configPath) {
 // src/git-ignore.ts
 var import_fs5 = require("fs");
 var import_look_it_up2 = require("look-it-up");
-var import_outdent25 = __toESM(require("outdent"));
+var import_outdent26 = __toESM(require("outdent"));
 function setupGitIgnore(ctx) {
-  const txt = import_outdent25.default`## CSS Panda
+  const txt = import_outdent26.default`## CSS Panda
   ${ctx.outdir}
   ${ctx.outdir}-static
   `;
@@ -2515,7 +2534,7 @@ function setupGitIgnore(ctx) {
 var import_logger9 = require("@pandacss/logger");
 var import_fs_extra4 = require("fs-extra");
 var import_look_it_up3 = require("look-it-up");
-var import_outdent26 = require("outdent");
+var import_outdent27 = require("outdent");
 var import_path5 = require("path");
 var import_preferred_pm2 = __toESM(require("preferred-pm"));
 async function setupConfig(cwd, { force }) {
@@ -2529,7 +2548,7 @@ async function setupConfig(cwd, { force }) {
   if (!force && configFile) {
     import_logger9.logger.warn("init:config", configExistsMessage(cmd));
   } else {
-    const content = import_outdent26.outdent`
+    const content = import_outdent27.outdent`
        import { defineConfig } from "css-panda"
 
        export default defineConfig({
@@ -2555,7 +2574,7 @@ async function setupConfig(cwd, { force }) {
 }
 async function setupPostcss(cwd) {
   import_logger9.logger.info("init:postcss", `creating postcss config file: ${(0, import_logger9.quote)("postcss.config.cjs")}`);
-  const content = import_outdent26.outdent`
+  const content = import_outdent27.outdent`
   module.exports = {
     plugins: {
       'css-panda/postcss': {},