@pandacss/node 0.0.0-dev-20230104161128 → 0.0.0-dev-20230105082451

package/dist/index.js

@@ -127,7 +127,7 @@ async function writeFileChunk(ctx, file) {
 
 // src/generators/index.ts
 var import_fs2 = require("fs");
-var import_outdent25 = __toESM(require("outdent"));
+var import_outdent24 = __toESM(require("outdent"));
 
 // src/generators/conditions.ts
 var import_shared = require("@pandacss/shared");
@@ -1244,21 +1244,12 @@ function generateReset() {
 
 // src/generators/token-css.ts
 var import_core2 = require("@pandacss/core");
-var import_outdent21 = require("outdent");
-var import_ts_pattern5 = require("ts-pattern");
+var import_postcss = __toESM(require("postcss"));
 function generateKeyframes(keyframes) {
   if (!keyframes)
     return;
   return (0, import_core2.toKeyframeCss)(keyframes);
 }
-var getConditionMessage = (value) => import_outdent21.outdent`
-It seems you provided an invalid condition for semantic tokens.
-
-- You provided: \`${value}\`
-
-Valid conditions are those that reference a parent selectors or at-rules.
-@media (min-width: 768px), or .dark &
-`;
 function generateTokenCss(ctx, varRoot) {
   const root = varRoot ?? ctx.cssVarRoot;
   const conditions = ctx.conditions;
@@ -1273,47 +1264,59 @@ function generateTokenCss(ctx, varRoot) {
     } else {
       const keys = key.split(":");
       const { css: css3 } = (0, import_core2.toCss)(varsObj);
-      const sorted = conditions.sort(keys);
-      const allAtRules = sorted.every(({ type }) => type === "at-rule");
-      const result = sorted.reduce(
-        (acc, cond, index, conds) => {
-          let selector;
-          return (0, import_ts_pattern5.match)(cond).with({ type: "parent-nesting" }, (cond2) => {
-            selector = cond2.value.replace(/\s&/g, "");
-            const merge = conds[index - 1]?.type === "parent-nesting";
-            return merge ? `${selector}${acc}` : `${selector} { 
- ${acc} 
- }`;
-          }).with({ type: "at-rule" }, (cond2) => {
-            selector = cond2?.rawValue ?? cond2?.raw;
-            return `${selector} { 
- ${acc} 
- }`;
-          }).otherwise((cond2) => {
-            if (!cond2)
-              return acc;
-            throw new Error(getConditionMessage(cond2.raw));
-          });
-        },
-        allAtRules ? `${root} { 
- ${css3}  
-}` : css3
-      );
-      if (result) {
-        results.push(result);
-      }
+      const mapped = keys.map((key2) => conditions.get(key2)).filter(Boolean).map((condition) => {
+        const parent = (0, import_core2.extractParentSelectors)(condition);
+        return parent ? `&${parent}` : condition;
+      });
+      const rule = getDeepestRule(root, mapped);
+      if (!rule)
+        continue;
+      getDeepestNode(rule)?.append(css3);
+      results.push((0, import_core2.expandNestedCss)(rule.toString()));
     }
   }
-  const css2 = results.join("\n\n") + "\n\n";
-  return (0, import_core2.prettifyCss)(`@layer tokens {
-    ${css2}
+  const css2 = results.join("\n\n");
+  return `@layer tokens {
+    ${(0, import_core2.prettifyCss)(cleanupSelectors(css2, root))}
   }
-  `);
+  `;
+}
+function getDeepestRule(root, selectors) {
+  const rule = import_postcss.default.rule({ selector: "" });
+  for (const selector of selectors) {
+    const last = getDeepestNode(rule);
+    const node = last ?? rule;
+    if (selector.startsWith("@")) {
+      const atRule = import_postcss.default.rule({ selector, nodes: [import_postcss.default.rule({ selector: `${root}&` })] });
+      node.append(atRule);
+    } else {
+      node.append(import_postcss.default.rule({ selector }));
+    }
+  }
+  return rule;
+}
+function getDeepestNode(node) {
+  if (node.nodes && node.nodes.length) {
+    return getDeepestNode(node.nodes[node.nodes.length - 1]);
+  }
+  return node;
+}
+function cleanupSelectors(css2, varSelector) {
+  const root = import_postcss.default.parse(css2);
+  root.walkRules((rule) => {
+    rule.selectors.forEach((selector) => {
+      const res = selector.split(varSelector).filter(Boolean);
+      if (res.length === 0)
+        return;
+      rule.selector = res.join(varSelector);
+    });
+  });
+  return root.toString();
 }
 
 // src/generators/token-dts.ts
 var import_shared13 = require("@pandacss/shared");
-var import_outdent22 = require("outdent");
+var import_outdent21 = require("outdent");
 var import_pluralize = __toESM(require("pluralize"));
 function generateTokenDts(dict) {
   const set = /* @__PURE__ */ new Set();
@@ -1331,11 +1334,11 @@ function generateTokenDts(dict) {
   }
   result.add("} & { [token: string]: never }");
   set.add(Array.from(result).join("\n"));
-  return import_outdent22.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_outdent23 = __toESM(require("outdent"));
+var import_outdent22 = __toESM(require("outdent"));
 function generateTokenJs(dict) {
   const map = /* @__PURE__ */ new Map();
   dict.allTokens.forEach((token) => {
@@ -1345,7 +1348,7 @@ function generateTokenJs(dict) {
   });
   const obj = Object.fromEntries(map);
   return {
-    js: import_outdent23.default`
+    js: import_outdent22.default`
   const tokens = ${JSON.stringify(obj, null, 2)}
   
   export function getToken(path) {
@@ -1358,7 +1361,7 @@ function generateTokenJs(dict) {
     return variable
   }
   `,
-    dts: import_outdent23.default`
+    dts: import_outdent22.default`
   import { Token } from "../types/token"
   export declare function getToken(path: Token): string
   export declare function getTokenVar(path: Token): string
@@ -1368,7 +1371,7 @@ function generateTokenJs(dict) {
 
 // src/generators/types.ts
 var import_fs_extra = require("fs-extra");
-var import_outdent24 = __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");
@@ -1379,7 +1382,7 @@ function generateCssType(ctx) {
   return {
     cssType: getType("csstype.d.ts"),
     pandaCssType: getType("system-types.d.ts"),
-    publicType: import_outdent24.default`
+    publicType: import_outdent23.default`
     import * as System from './system-types'
     import { PropTypes } from './prop-type'
     import { Conditions } from './conditions'
@@ -1503,7 +1506,7 @@ function setupPatterns(ctx) {
   if (!files) {
     return { files: [] };
   }
-  const indexCode = import_outdent25.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"));
+  const indexCode = import_outdent24.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"));
   return {
     dir: ctx.paths.pattern,
     files: [
@@ -1522,10 +1525,10 @@ function setupJsx(ctx) {
   const factory = generateJsxFactory(ctx);
   const patterns = generateJsxPatterns(ctx);
   const layoutGrid = generateLayoutGrid(ctx);
-  const indexCode = import_outdent25.default`
+  const indexCode = import_outdent24.default`
   export * from './factory'
   export * from './layout-grid'
-  ${import_outdent25.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  ${import_outdent24.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
 `;
   return {
     dir: ctx.paths.jsx,
@@ -1543,7 +1546,7 @@ function setupJsx(ctx) {
   };
 }
 function setupCssIndex(ctx) {
-  const code = import_outdent25.default`
+  const code = import_outdent24.default`
   export * from './css'
   export * from './cx'
   export * from './global-css'
@@ -1583,30 +1586,30 @@ function generateSystem(ctx) {
 
 // src/messages.ts
 var import_logger3 = require("@pandacss/logger");
-var import_outdent26 = require("outdent");
+var import_outdent25 = require("outdent");
 var tick = import_logger3.colors.green().bold("\u2714\uFE0F");
 function artifactsGeneratedMessage(ctx) {
   return [
-    import_outdent26.outdent`
+    import_outdent25.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/css")}: the css function to author styles
     `,
-    ctx.hasTokens && import_outdent26.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_outdent26.outdent`
+    ctx.hasPatterns && import_outdent25.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/patterns")}: functions to implement common css patterns
     `,
-    ctx.hasRecipes && import_outdent26.outdent`
+    ctx.hasRecipes && import_outdent25.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/recipes")}: functions to create multi-variant styles
     `,
-    ctx.jsxFramework && import_outdent26.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_outdent26.outdent`
+  return import_outdent25.outdent`
       \n
       It looks like you already have panda created\`.
       
@@ -1615,7 +1618,7 @@ function configExistsMessage(cmd) {
       `;
 }
 function thankYouMessage() {
-  return import_outdent26.outdent`
+  return import_outdent25.outdent`
 
   🚀 Thanks for choosing ${import_logger3.colors.cyan("Panda")} to write your css.
 
@@ -1627,7 +1630,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_outdent26.outdent`
+    import_outdent25.outdent`
 
   ${import_logger3.colors.bold().cyan("Next steps:")}
   
@@ -1643,12 +1646,12 @@ function scaffoldCompleteMessage() {
   );
 }
 function watchMessage() {
-  return import_outdent26.outdent`
+  return import_outdent25.outdent`
   Watching for file changes...
   `;
 }
 function buildCompleteMessage(ctx) {
-  return import_outdent26.outdent`
+  return import_outdent25.outdent`
   Successfully extracted css from ${ctx.files.length} file(s) ✨
   `;
 }
@@ -1704,9 +1707,9 @@ var import_fs3 = require("fs");
 var import_fs_extra2 = require("fs-extra");
 var import_promises = require("fs/promises");
 var import_path2 = require("path");
-var import_postcss = __toESM(require("postcss"));
+var import_postcss2 = __toESM(require("postcss"));
 var import_ts_morph = require("ts-morph");
-var import_ts_pattern6 = require("ts-pattern");
+var import_ts_pattern5 = require("ts-pattern");
 var helpers = {
   map: import_shared14.mapObject
 };
@@ -1787,7 +1790,7 @@ function createContext(conf, io = fileSystem) {
     })
   );
   const context = () => ({
-    root: import_postcss.default.root(),
+    root: import_postcss2.default.root(),
     conditions,
     hash,
     helpers,
@@ -2015,9 +2018,9 @@ function createContext(conf, io = fileSystem) {
       const { data, type, name } = result;
       const { css: css2 = {}, ...rest } = data;
       const styles = { ...css2, ...rest };
-      (0, import_ts_pattern6.match)([name, type]).with([import_ts_pattern6.P.string, "pattern"], ([name2]) => {
+      (0, import_ts_pattern5.match)([name, type]).with([import_ts_pattern5.P.string, "pattern"], ([name2]) => {
         collector.setPattern(getPatternFnName(name2), { data: styles });
-      }).with([import_ts_pattern6.P.string, "recipe"], ([name2]) => {
+      }).with([import_ts_pattern5.P.string, "recipe"], ([name2]) => {
         const [recipeProps, atomicProps] = splitRecipeProps(name2, styles);
         collector.setRecipe(getRecipeFnName(name2), { data: recipeProps });
         sheet.processAtomic(atomicProps);
@@ -2282,7 +2285,7 @@ var import_logger8 = require("@pandacss/logger");
 var import_logger7 = require("@pandacss/logger");
 var import_chokidar = __toESM(require("chokidar"));
 var import_path5 = require("path");
-var import_ts_pattern7 = require("ts-pattern");
+var import_ts_pattern6 = require("ts-pattern");
 function createWatcher(files, options = {}) {
   const { ignore, cwd = process.cwd(), poll } = options;
   const coalesce = poll || process.platform === "win32";
@@ -2314,7 +2317,7 @@ async function createContentWatcher(ctx, callback) {
   });
   watcher.on("all", async (event, file) => {
     import_logger7.logger.debug({ type: `file:${event}`, file });
-    (0, import_ts_pattern7.match)(event).with("unlink", () => {
+    (0, import_ts_pattern6.match)(event).with("unlink", () => {
       ctx.removeSourceFile(file);
       ctx.chunks.rm(file);
     }).with("change", async () => {
@@ -2382,9 +2385,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_outdent27 = __toESM(require("outdent"));
+var import_outdent26 = __toESM(require("outdent"));
 function setupGitIgnore(ctx) {
-  const txt = import_outdent27.default`## CSS Panda
+  const txt = import_outdent26.default`## CSS Panda
   ${ctx.outdir}
   ${ctx.outdir}-static
   `;
@@ -2402,7 +2405,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_outdent28 = require("outdent");
+var import_outdent27 = require("outdent");
 var import_path6 = require("path");
 var import_preferred_pm2 = __toESM(require("preferred-pm"));
 async function setupConfig(cwd, { force }) {
@@ -2416,7 +2419,7 @@ async function setupConfig(cwd, { force }) {
   if (!force && configFile) {
     import_logger9.logger.warn("config exists", configExistsMessage(cmd));
   } else {
-    const content = import_outdent28.outdent`
+    const content = import_outdent27.outdent`
        import { defineConfig } from "css-panda"
 
        export default defineConfig({
@@ -2442,7 +2445,7 @@ async function setupConfig(cwd, { force }) {
 }
 async function setupPostcss(cwd) {
   import_logger9.logger.info({ type: "init", msg: `creating postcss config file: ${(0, import_logger9.quote)("postcss.config.cjs")}` });
-  const content = import_outdent28.outdent`
+  const content = import_outdent27.outdent`
   module.exports = {
     plugins: {
       'css-panda/postcss': {},

package/dist/index.mjs

@@ -81,7 +81,7 @@ async function writeFileChunk(ctx, file) {
 
 // src/generators/index.ts
 import { readFileSync as readFileSync3 } from "fs";
-import outdent25 from "outdent";
+import outdent24 from "outdent";
 
 // src/generators/conditions.ts
 import { unionType } from "@pandacss/shared";
@@ -1197,22 +1197,13 @@ function generateReset() {
 }
 
 // src/generators/token-css.ts
-import { prettifyCss, toCss, toKeyframeCss } from "@pandacss/core";
-import { outdent as outdent21 } from "outdent";
-import { match as match5 } from "ts-pattern";
+import { expandNestedCss, extractParentSelectors, prettifyCss, toCss, toKeyframeCss } from "@pandacss/core";
+import postcss from "postcss";
 function generateKeyframes(keyframes) {
   if (!keyframes)
     return;
   return toKeyframeCss(keyframes);
 }
-var getConditionMessage = (value) => outdent21`
-It seems you provided an invalid condition for semantic tokens.
-
-- You provided: \`${value}\`
-
-Valid conditions are those that reference a parent selectors or at-rules.
-@media (min-width: 768px), or .dark &
-`;
 function generateTokenCss(ctx, varRoot) {
   const root = varRoot ?? ctx.cssVarRoot;
   const conditions = ctx.conditions;
@@ -1227,47 +1218,59 @@ function generateTokenCss(ctx, varRoot) {
     } else {
       const keys = key.split(":");
       const { css: css3 } = toCss(varsObj);
-      const sorted = conditions.sort(keys);
-      const allAtRules = sorted.every(({ type }) => type === "at-rule");
-      const result = sorted.reduce(
-        (acc, cond, index, conds) => {
-          let selector;
-          return match5(cond).with({ type: "parent-nesting" }, (cond2) => {
-            selector = cond2.value.replace(/\s&/g, "");
-            const merge = conds[index - 1]?.type === "parent-nesting";
-            return merge ? `${selector}${acc}` : `${selector} { 
- ${acc} 
- }`;
-          }).with({ type: "at-rule" }, (cond2) => {
-            selector = cond2?.rawValue ?? cond2?.raw;
-            return `${selector} { 
- ${acc} 
- }`;
-          }).otherwise((cond2) => {
-            if (!cond2)
-              return acc;
-            throw new Error(getConditionMessage(cond2.raw));
-          });
-        },
-        allAtRules ? `${root} { 
- ${css3}  
-}` : css3
-      );
-      if (result) {
-        results.push(result);
-      }
+      const mapped = keys.map((key2) => conditions.get(key2)).filter(Boolean).map((condition) => {
+        const parent = extractParentSelectors(condition);
+        return parent ? `&${parent}` : condition;
+      });
+      const rule = getDeepestRule(root, mapped);
+      if (!rule)
+        continue;
+      getDeepestNode(rule)?.append(css3);
+      results.push(expandNestedCss(rule.toString()));
     }
   }
-  const css2 = results.join("\n\n") + "\n\n";
-  return prettifyCss(`@layer tokens {
-    ${css2}
+  const css2 = results.join("\n\n");
+  return `@layer tokens {
+    ${prettifyCss(cleanupSelectors(css2, root))}
   }
-  `);
+  `;
+}
+function getDeepestRule(root, selectors) {
+  const rule = postcss.rule({ selector: "" });
+  for (const selector of selectors) {
+    const last = getDeepestNode(rule);
+    const node = last ?? rule;
+    if (selector.startsWith("@")) {
+      const atRule = postcss.rule({ selector, nodes: [postcss.rule({ selector: `${root}&` })] });
+      node.append(atRule);
+    } else {
+      node.append(postcss.rule({ selector }));
+    }
+  }
+  return rule;
+}
+function getDeepestNode(node) {
+  if (node.nodes && node.nodes.length) {
+    return getDeepestNode(node.nodes[node.nodes.length - 1]);
+  }
+  return node;
+}
+function cleanupSelectors(css2, varSelector) {
+  const root = postcss.parse(css2);
+  root.walkRules((rule) => {
+    rule.selectors.forEach((selector) => {
+      const res = selector.split(varSelector).filter(Boolean);
+      if (res.length === 0)
+        return;
+      rule.selector = res.join(varSelector);
+    });
+  });
+  return root.toString();
 }
 
 // src/generators/token-dts.ts
 import { unionType as unionType4, capitalize as capitalize12 } from "@pandacss/shared";
-import { outdent as outdent22 } from "outdent";
+import { outdent as outdent21 } from "outdent";
 import pluralize from "pluralize";
 function generateTokenDts(dict) {
   const set = /* @__PURE__ */ new Set();
@@ -1285,11 +1288,11 @@ function generateTokenDts(dict) {
   }
   result.add("} & { [token: string]: never }");
   set.add(Array.from(result).join("\n"));
-  return outdent22.string(Array.from(set).join("\n\n"));
+  return outdent21.string(Array.from(set).join("\n\n"));
 }
 
 // src/generators/token-js.ts
-import outdent23 from "outdent";
+import outdent22 from "outdent";
 function generateTokenJs(dict) {
   const map = /* @__PURE__ */ new Map();
   dict.allTokens.forEach((token) => {
@@ -1299,7 +1302,7 @@ function generateTokenJs(dict) {
   });
   const obj = Object.fromEntries(map);
   return {
-    js: outdent23`
+    js: outdent22`
   const tokens = ${JSON.stringify(obj, null, 2)}
   
   export function getToken(path) {
@@ -1312,7 +1315,7 @@ function generateTokenJs(dict) {
     return variable
   }
   `,
-    dts: outdent23`
+    dts: outdent22`
   import { Token } from "../types/token"
   export declare function getToken(path: Token): string
   export declare function getTokenVar(path: Token): string
@@ -1322,7 +1325,7 @@ function generateTokenJs(dict) {
 
 // src/generators/types.ts
 import { readFileSync as readFileSync2 } from "fs-extra";
-import outdent24 from "outdent";
+import outdent23 from "outdent";
 function getType(file) {
   const filepath = getEntrypoint("@pandacss/types", { dev: file });
   return readFileSync2(filepath, "utf8");
@@ -1333,7 +1336,7 @@ function generateCssType(ctx) {
   return {
     cssType: getType("csstype.d.ts"),
     pandaCssType: getType("system-types.d.ts"),
-    publicType: outdent24`
+    publicType: outdent23`
     import * as System from './system-types'
     import { PropTypes } from './prop-type'
     import { Conditions } from './conditions'
@@ -1457,7 +1460,7 @@ function setupPatterns(ctx) {
   if (!files) {
     return { files: [] };
   }
-  const indexCode = outdent25.string(files.map((file) => `export * from './${file.name}'`).join("\n"));
+  const indexCode = outdent24.string(files.map((file) => `export * from './${file.name}'`).join("\n"));
   return {
     dir: ctx.paths.pattern,
     files: [
@@ -1476,10 +1479,10 @@ function setupJsx(ctx) {
   const factory = generateJsxFactory(ctx);
   const patterns = generateJsxPatterns(ctx);
   const layoutGrid = generateLayoutGrid(ctx);
-  const indexCode = outdent25`
+  const indexCode = outdent24`
   export * from './factory'
   export * from './layout-grid'
-  ${outdent25.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  ${outdent24.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
 `;
   return {
     dir: ctx.paths.jsx,
@@ -1497,7 +1500,7 @@ function setupJsx(ctx) {
   };
 }
 function setupCssIndex(ctx) {
-  const code = outdent25`
+  const code = outdent24`
   export * from './css'
   export * from './cx'
   export * from './global-css'
@@ -1537,30 +1540,30 @@ function generateSystem(ctx) {
 
 // src/messages.ts
 import { colors, logger as logger3, quote as quote2 } from "@pandacss/logger";
-import { outdent as outdent26 } from "outdent";
+import { outdent as outdent25 } from "outdent";
 var tick = colors.green().bold("\u2714\uFE0F");
 function artifactsGeneratedMessage(ctx) {
   return [
-    outdent26`
+    outdent25`
       ${tick} ${quote2(ctx.outdir, "/css")}: the css function to author styles
     `,
-    ctx.hasTokens && outdent26`
+    ctx.hasTokens && outdent25`
       ${tick} ${quote2(ctx.outdir, "/tokens")}: the css variables and js function to query your tokens
     `,
-    ctx.hasPatterns && outdent26`
+    ctx.hasPatterns && outdent25`
       ${tick} ${quote2(ctx.outdir, "/patterns")}: functions to implement common css patterns
     `,
-    ctx.hasRecipes && outdent26`
+    ctx.hasRecipes && outdent25`
       ${tick} ${quote2(ctx.outdir, "/recipes")}: functions to create multi-variant styles
     `,
-    ctx.jsxFramework && outdent26`
+    ctx.jsxFramework && outdent25`
       ${tick} ${quote2(ctx.outdir, "/jsx")}: style prop powered elements for ${ctx.jsxFramework}
     `,
     "\n"
   ].filter(Boolean).join("\n");
 }
 function configExistsMessage(cmd) {
-  return outdent26`
+  return outdent25`
       \n
       It looks like you already have panda created\`.
       
@@ -1569,7 +1572,7 @@ function configExistsMessage(cmd) {
       `;
 }
 function thankYouMessage() {
-  return outdent26`
+  return outdent25`
 
   🚀 Thanks for choosing ${colors.cyan("Panda")} to write your css.
 
@@ -1581,7 +1584,7 @@ var randomWords = ["Sweet", "Divine", "Pandalicious", "Super"];
 var pickRandom = (arr) => arr[Math.floor(Math.random() * arr.length)];
 function scaffoldCompleteMessage() {
   return logger3.box(
-    outdent26`
+    outdent25`
 
   ${colors.bold().cyan("Next steps:")}
   
@@ -1597,12 +1600,12 @@ function scaffoldCompleteMessage() {
   );
 }
 function watchMessage() {
-  return outdent26`
+  return outdent25`
   Watching for file changes...
   `;
 }
 function buildCompleteMessage(ctx) {
-  return outdent26`
+  return outdent25`
   Successfully extracted css from ${ctx.files.length} file(s) ✨
   `;
 }
@@ -1665,9 +1668,9 @@ 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 postcss2 from "postcss";
 import { ScriptKind } from "ts-morph";
-import { match as match6, P } from "ts-pattern";
+import { match as match5, P } from "ts-pattern";
 var helpers = {
   map: mapObject
 };
@@ -1748,7 +1751,7 @@ function createContext(conf, io = fileSystem) {
     })
   );
   const context = () => ({
-    root: postcss.root(),
+    root: postcss2.root(),
     conditions,
     hash,
     helpers,
@@ -1976,7 +1979,7 @@ function createContext(conf, io = fileSystem) {
       const { data, type, name } = result;
       const { css: css2 = {}, ...rest } = data;
       const styles = { ...css2, ...rest };
-      match6([name, type]).with([P.string, "pattern"], ([name2]) => {
+      match5([name, type]).with([P.string, "pattern"], ([name2]) => {
         collector.setPattern(getPatternFnName(name2), { data: styles });
       }).with([P.string, "recipe"], ([name2]) => {
         const [recipeProps, atomicProps] = splitRecipeProps(name2, styles);
@@ -2243,7 +2246,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";
+import { match as match6 } from "ts-pattern";
 function createWatcher(files, options = {}) {
   const { ignore, cwd = process.cwd(), poll } = options;
   const coalesce = poll || process.platform === "win32";
@@ -2275,7 +2278,7 @@ async function createContentWatcher(ctx, callback) {
   });
   watcher.on("all", async (event, file) => {
     logger7.debug({ type: `file:${event}`, file });
-    match7(event).with("unlink", () => {
+    match6(event).with("unlink", () => {
       ctx.removeSourceFile(file);
       ctx.chunks.rm(file);
     }).with("change", async () => {
@@ -2343,9 +2346,9 @@ async function generate5(config, configPath) {
 // src/git-ignore.ts
 import { appendFileSync, readFileSync as readFileSync6, writeFileSync } from "fs";
 import { lookItUpSync as lookItUpSync2 } from "look-it-up";
-import outdent27 from "outdent";
+import outdent26 from "outdent";
 function setupGitIgnore(ctx) {
-  const txt = outdent27`## CSS Panda
+  const txt = outdent26`## CSS Panda
   ${ctx.outdir}
   ${ctx.outdir}-static
   `;
@@ -2363,7 +2366,7 @@ function setupGitIgnore(ctx) {
 import { logger as logger9, quote as quote3 } from "@pandacss/logger";
 import { writeFile as writeFile2 } from "fs-extra";
 import { lookItUpSync as lookItUpSync3 } from "look-it-up";
-import { outdent as outdent28 } from "outdent";
+import { outdent as outdent27 } from "outdent";
 import { join as join4 } from "path";
 import getPackageManager2 from "preferred-pm";
 async function setupConfig(cwd, { force }) {
@@ -2377,7 +2380,7 @@ async function setupConfig(cwd, { force }) {
   if (!force && configFile) {
     logger9.warn("config exists", configExistsMessage(cmd));
   } else {
-    const content = outdent28`
+    const content = outdent27`
        import { defineConfig } from "css-panda"
 
        export default defineConfig({
@@ -2403,7 +2406,7 @@ async function setupConfig(cwd, { force }) {
 }
 async function setupPostcss(cwd) {
   logger9.info({ type: "init", msg: `creating postcss config file: ${quote3("postcss.config.cjs")}` });
-  const content = outdent28`
+  const content = outdent27`
   module.exports = {
     plugins: {
       'css-panda/postcss': {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/node",
-  "version": "0.0.0-dev-20230104161128",
+  "version": "0.0.0-dev-20230105082451",
   "description": "The core css panda library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -30,15 +30,15 @@
     "telejson": "7.0.4",
     "ts-pattern": "4.0.6",
     "ts-morph": "17.0.1",
-    "@pandacss/types": "0.0.0-dev-20230104161128",
-    "@pandacss/is-valid-prop": "0.0.0-dev-20230104161128",
-    "@pandacss/error": "0.0.0-dev-20230104161128",
-    "@pandacss/parser": "0.0.0-dev-20230104161128",
-    "@pandacss/shared": "0.0.0-dev-20230104161128",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230104161128",
-    "@pandacss/logger": "0.0.0-dev-20230104161128",
-    "@pandacss/core": "0.0.0-dev-20230104161128",
-    "@pandacss/config": "0.0.0-dev-20230104161128"
+    "@pandacss/types": "0.0.0-dev-20230105082451",
+    "@pandacss/is-valid-prop": "0.0.0-dev-20230105082451",
+    "@pandacss/error": "0.0.0-dev-20230105082451",
+    "@pandacss/parser": "0.0.0-dev-20230105082451",
+    "@pandacss/shared": "0.0.0-dev-20230105082451",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230105082451",
+    "@pandacss/logger": "0.0.0-dev-20230105082451",
+    "@pandacss/core": "0.0.0-dev-20230105082451",
+    "@pandacss/config": "0.0.0-dev-20230105082451"
   },
   "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-20230104161128"
+    "@pandacss/fixture": "0.0.0-dev-20230105082451"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=cjs,esm --shims --dts",