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

package/dist/index.mjs

@@ -13,8 +13,7 @@ function extractFile(ctx, file) {
   let result;
   const done = logger.time.debug(`Extracted ${quote(file)}`);
   try {
-    const source = ctx.getSourceFile(file);
-    data = ctx.parseSourceFile(source);
+    data = ctx.project.parseSourceFile(ctx.absPath(file));
   } catch (error) {
     logger.error("file:parse", error);
   }
@@ -36,16 +35,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
@@ -53,6 +52,7 @@ async function extractChunks(ctx) {
   const sheet = new 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';"
@@ -61,15 +61,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) {
   logger2.info("chunk:change", `File changed: ${file}`);
@@ -81,7 +81,7 @@ async function writeFileChunk(ctx, file) {
 
 // src/generators/index.ts
 import { readFileSync as readFileSync3 } from "fs";
-import outdent23 from "outdent";
+import outdent24 from "outdent";
 
 // src/generators/conditions.ts
 import outdent from "outdent";
@@ -946,9 +946,45 @@ function generateLayoutGrid(ctx) {
   return layoutGridMap[ctx.jsxFramework]();
 }
 
+// src/generators/layout-grid.ts
+import { outdent as outdent17 } from "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 outdent17`
+  @layer base {
+      ${layoutGrid}
+  }`;
+}
+
 // src/generators/pattern.ts
 import { capitalize, dashCase, unionType } from "@pandacss/shared";
-import { outdent as outdent17 } from "outdent";
+import { outdent as outdent18 } from "outdent";
 import { stringify as stringify2 } from "javascript-stringify";
 import { match as match4 } from "ts-pattern";
 function generate4(ctx, name, pattern) {
@@ -956,7 +992,7 @@ function generate4(ctx, name, pattern) {
   const { upperName, styleFn, blocklistType } = ctx.getPatternDetails(name, pattern);
   return {
     name: dashCase(name),
-    dts: outdent17`
+    dts: outdent18`
     import type { SystemStyleObject, ConditionalValue } from '../types'
     import type { PropertyValue } from '../types/prop-type'
     import type { Properties } from '../types/csstype'
@@ -980,7 +1016,7 @@ function generate4(ctx, name, pattern) {
     }).join("\n	")}
     }
 
-    ${strict ? outdent17`export declare function ${name}(options: ${upperName}Properties): string` : outdent17`
+    ${strict ? outdent18`export declare function ${name}(options: ${upperName}Properties): string` : outdent18`
                 
         type ${upperName}Options = ${upperName}Properties & Omit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}>
 
@@ -989,7 +1025,7 @@ function generate4(ctx, name, pattern) {
         `}
 
    `,
-    js: outdent17`
+    js: outdent18`
   ${ctx.getImport("mapObject", "../helpers")}
   ${ctx.getImport("css", "../css/index")}
 
@@ -1028,11 +1064,11 @@ function generatePackageJSON(ctx) {
 }
 
 // src/generators/prop-types.ts
-import { outdent as outdent18 } from "outdent";
+import { outdent as outdent19 } from "outdent";
 function generatePropTypes(utility, strict) {
   const strictText = `${strict ? "" : " | NativeValue<T>"}`;
   const result = [
-    outdent18`
+    outdent19`
     import type { ConditionalValue } from './conditions';
     import type { Properties as CSSProperties } from './csstype'
     import type { Tokens } from './token'
@@ -1055,7 +1091,7 @@ function generatePropTypes(utility, strict) {
     result.push(`	${key}: Shorthand<${JSON.stringify(value)}>;`);
   });
   result.push("}");
-  return outdent18`
+  return outdent19`
   ${result.join("\n")}
 
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
@@ -1068,14 +1104,14 @@ function generatePropTypes(utility, strict) {
 
 // src/generators/recipe.ts
 import { capitalize as capitalize2, unionType as unionType2 } from "@pandacss/shared";
-import { outdent as outdent19 } from "outdent";
+import { outdent as outdent20 } from "outdent";
 function generateRecipes(ctx) {
   const { recipes = {}, hash, hasRecipes, utility } = ctx;
   const { separator } = utility;
   if (!hasRecipes)
     return;
   const js = [
-    outdent19`
+    outdent20`
    ${ctx.getImport("createCss, withoutSpace, compact", "../helpers")}
 
    const createRecipe = (name, defaultVariants) => {
@@ -1109,17 +1145,17 @@ function generateRecipes(ctx) {
   `
   ];
   const dts = [
-    outdent19`
+    outdent20`
   import type { ConditionalValue } from '../types'
   `
   ];
   Object.values(recipes).forEach((recipe) => {
     const { name, description, defaultVariants, variants } = recipe;
-    js.push(outdent19`
+    js.push(outdent20`
     export const ${name} = createRecipe('${name}', ${JSON.stringify(defaultVariants ?? {})})
     ${name}.variants = ${JSON.stringify(Object.keys(variants ?? {}))}
     `);
-    dts.push(outdent19`
+    dts.push(outdent20`
     export type ${capitalize2(name)}Variants = {
       ${Object.keys(variants ?? {}).map((key) => {
       const value = variants[key];
@@ -1133,14 +1169,14 @@ function generateRecipes(ctx) {
     `);
   });
   return {
-    js: outdent19.string(js.join("\n\n")),
-    dts: outdent19.string(dts.join("\n\n"))
+    js: outdent20.string(js.join("\n\n")),
+    dts: outdent20.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;
   }
@@ -1233,7 +1269,7 @@ var reset = css`
     top: -0.5em;
   }
 `;
-function generateReset() {
+function generateResetCss() {
   return `@layer reset {
     ${reset}
   }`;
@@ -1256,11 +1292,11 @@ function generateTokenCss(ctx, varRoot) {
     if (Object.keys(varsObj).length === 0)
       continue;
     if (key === "base") {
-      const { css: css3 } = toCss({ [root]: varsObj });
-      results.push(css3);
+      const { css: css4 } = toCss({ [root]: varsObj });
+      results.push(css4);
     } else {
       const keys = key.split(":");
-      const { css: css3 } = toCss(varsObj);
+      const { css: css4 } = toCss(varsObj);
       const mapped = keys.map((key2) => conditions.get(key2)).filter(Boolean).map((condition) => {
         const parent = extractParentSelectors(condition);
         return parent ? `&${parent}` : condition;
@@ -1268,13 +1304,13 @@ function generateTokenCss(ctx, varRoot) {
       const rule = getDeepestRule(root, mapped);
       if (!rule)
         continue;
-      getDeepestNode(rule)?.append(css3);
+      getDeepestNode(rule)?.append(css4);
       results.push(expandNestedCss(rule.toString()));
     }
   }
-  const css2 = results.join("\n\n");
+  const css3 = results.join("\n\n");
   return `@layer tokens {
-    ${prettifyCss(cleanupSelectors(css2, root))}
+    ${prettifyCss(cleanupSelectors(css3, root))}
   }
   `;
 }
@@ -1298,8 +1334,8 @@ function getDeepestNode(node) {
   }
   return node;
 }
-function cleanupSelectors(css2, varSelector) {
-  const root = postcss.parse(css2);
+function cleanupSelectors(css3, varSelector) {
+  const root = postcss.parse(css3);
   root.walkRules((rule) => {
     rule.selectors.forEach((selector) => {
       const res = selector.split(varSelector).filter(Boolean);
@@ -1313,7 +1349,7 @@ function cleanupSelectors(css2, varSelector) {
 
 // src/generators/token-dts.ts
 import { unionType as unionType3, capitalize as capitalize3 } from "@pandacss/shared";
-import { outdent as outdent20 } from "outdent";
+import { outdent as outdent21 } from "outdent";
 import pluralize from "pluralize";
 function generateTokenDts(dict) {
   const set = /* @__PURE__ */ new Set();
@@ -1331,11 +1367,11 @@ function generateTokenDts(dict) {
   }
   result.add("} & { [token: string]: never }");
   set.add(Array.from(result).join("\n"));
-  return outdent20.string(Array.from(set).join("\n\n"));
+  return outdent21.string(Array.from(set).join("\n\n"));
 }
 
 // src/generators/token-js.ts
-import outdent21 from "outdent";
+import outdent22 from "outdent";
 function generateTokenJs(dict) {
   const map = /* @__PURE__ */ new Map();
   dict.allTokens.forEach((token) => {
@@ -1345,7 +1381,7 @@ function generateTokenJs(dict) {
   });
   const obj = Object.fromEntries(map);
   return {
-    js: outdent21`
+    js: outdent22`
   const tokens = ${JSON.stringify(obj, null, 2)}
   
   export function token(path, fallback) {
@@ -1358,7 +1394,7 @@ function generateTokenJs(dict) {
 
   token.var = tokenVar
   `,
-    dts: outdent21`
+    dts: outdent22`
   import type { Token } from '../types/token'
 
   export declare function token(path: Token, fallback?: string): string & {
@@ -1371,7 +1407,7 @@ function generateTokenJs(dict) {
 // src/generators/types.ts
 import { allCssProperties } from "@pandacss/is-valid-prop";
 import { readFileSync as readFileSync2 } from "fs-extra";
-import outdent22 from "outdent";
+import outdent23 from "outdent";
 function getType(file) {
   const filepath = getEntrypoint("@pandacss/types", { dev: file });
   return readFileSync2(filepath, "utf8");
@@ -1384,7 +1420,7 @@ function generateCssType(ctx) {
     selectors: getType("selectors.d.ts"),
     recipe: getType("recipe.d.ts"),
     composition: getType("composition.d.ts"),
-    global: outdent22`
+    global: outdent23`
     import { RecipeVariantRecord, RecipeConfig } from './recipe'
     import { GlobalStyleObject } from './system-types'
     import { CompositionStyles } from './composition'
@@ -1396,14 +1432,14 @@ function generateCssType(ctx) {
       export function defineLayerStyles(definition: CompositionStyles['layerStyles']): CompositionStyles['layerStyles']
     }
     `,
-    exported: outdent22`
+    exported: outdent23`
     import './global'
     export { ConditionalValue } from './conditions'
     export { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
     
     export type Assign<Target, Override> = Omit<Target, keyof Override> & Override
     `,
-    styleProps: outdent22`
+    styleProps: outdent23`
     import { PropertyValue } from './prop-type'
     import { Token } from './token'
 
@@ -1437,11 +1473,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 }
     ]
@@ -1518,8 +1554,8 @@ function setupPatterns(ctx) {
   if (!files)
     return;
   const index = {
-    js: outdent23.string(files.map((file) => ctx.getExport(`./${file.name}`)).join("\n")),
-    dts: outdent23.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
+    js: outdent24.string(files.map((file) => ctx.getExport(`./${file.name}`)).join("\n")),
+    dts: outdent24.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.pattern,
@@ -1538,17 +1574,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: outdent23`
+    js: outdent24`
   ${ctx.getExport("./factory")}
   ${ctx.getExport("./layout-grid")}
-  ${outdent23.string(patterns.map((file) => ctx.getExport(`./${file.name}`)).join("\n"))}
+  ${outdent24.string(patterns.map((file) => ctx.getExport(`./${file.name}`)).join("\n"))}
   `,
-    dts: outdent23`
+    dts: outdent24`
   export * from './factory'
   export * from './layout-grid'
-  ${outdent23.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  ${outdent24.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
   export type { ${ctx.jsxFactoryDetails.typeName} } from '../types/jsx'
     `
   };
@@ -1557,8 +1593,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 },
@@ -1569,12 +1605,12 @@ function setupJsx(ctx) {
 }
 function setupCssIndex(ctx) {
   const index = {
-    js: outdent23`
+    js: outdent24`
   ${ctx.getExport("./css")}
   ${ctx.getExport("./cx")}
   ${ctx.getExport("./cva")}
  `,
-    dts: outdent23`
+    dts: outdent24`
   export * from './css'
   export * from './cx'
   export * from './cva'
@@ -1588,12 +1624,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;
@@ -1614,37 +1654,38 @@ function generateSystem(ctx) {
     setupPatterns(ctx),
     setupCssIndex(ctx),
     setupJsx(ctx),
-    setupReset(ctx),
+    setupResetCss(ctx),
+    setupLayoutGridCss(),
     setupPackageJson(ctx)
   ].filter(Boolean);
 }
 
 // src/messages.ts
 import { colors, logger as logger3, quote as quote2 } from "@pandacss/logger";
-import { outdent as outdent24 } from "outdent";
+import { outdent as outdent25 } from "outdent";
 var tick = colors.green().bold("\u2714\uFE0F");
 function artifactsGeneratedMessage(ctx) {
   return [
-    outdent24`
+    outdent25`
       ${tick} ${quote2(ctx.outdir, "/css")}: the css function to author styles
     `,
-    ctx.hasTokens && outdent24`
+    ctx.hasTokens && outdent25`
       ${tick} ${quote2(ctx.outdir, "/tokens")}: the css variables and js function to query your tokens
     `,
-    ctx.hasPatterns && outdent24`
+    ctx.hasPatterns && outdent25`
       ${tick} ${quote2(ctx.outdir, "/patterns")}: functions to implement common css patterns
     `,
-    ctx.hasRecipes && outdent24`
+    ctx.hasRecipes && outdent25`
       ${tick} ${quote2(ctx.outdir, "/recipes")}: functions to create multi-variant styles
     `,
-    ctx.jsxFramework && outdent24`
+    ctx.jsxFramework && outdent25`
       ${tick} ${quote2(ctx.outdir, "/jsx")}: style prop powered elements for ${ctx.jsxFramework}
     `,
     "\n"
   ].filter(Boolean).join("\n");
 }
 function configExistsMessage(cmd) {
-  return outdent24`
+  return outdent25`
       \n
       It looks like you already have panda created\`.
       
@@ -1653,7 +1694,7 @@ function configExistsMessage(cmd) {
       `;
 }
 function thankYouMessage() {
-  return outdent24`
+  return outdent25`
 
   🚀 Thanks for choosing ${colors.cyan("Panda")} to write your css.
 
@@ -1665,7 +1706,7 @@ var randomWords = ["Sweet", "Divine", "Pandalicious", "Super"];
 var pickRandom = (arr) => arr[Math.floor(Math.random() * arr.length)];
 function scaffoldCompleteMessage() {
   return logger3.box(
-    outdent24`
+    outdent25`
 
   ${colors.bold().cyan("Next steps:")}
   
@@ -1681,12 +1722,12 @@ function scaffoldCompleteMessage() {
   );
 }
 function watchMessage() {
-  return outdent24`
+  return outdent25`
   Watching for file changes...
   `;
 }
 function buildCompleteMessage(ctx) {
-  return outdent24`
+  return outdent25`
   Successfully extracted css from ${ctx.files.length} file(s) ✨
   `;
 }
@@ -1710,16 +1751,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
 import { discardDuplicate, mergeCss as mergeCss2, Stylesheet as Stylesheet3 } from "@pandacss/core";
@@ -1730,6 +1761,19 @@ import { existsSync as existsSync2, readFileSync as readFileSync5 } from "fs";
 import { statSync } from "fs-extra";
 import { resolve as resolve3 } from "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
 import { loadConfigFile } from "@pandacss/config";
 import { lookItUpSync } from "look-it-up";
@@ -1745,7 +1789,7 @@ import {
 } from "@pandacss/core";
 import { isCssProperty } from "@pandacss/is-valid-prop";
 import { logger as logger4 } from "@pandacss/logger";
-import { createParser, createProject } from "@pandacss/parser";
+import { createProject } from "@pandacss/parser";
 import { capitalize as capitalize4, compact, dashCase as dashCase2, mapObject, splitProps, uncapitalize } from "@pandacss/shared";
 import { TokenDictionary } from "@pandacss/token-dictionary";
 import glob from "fast-glob";
@@ -1754,7 +1798,6 @@ 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 postcss2 from "postcss";
-import { ScriptKind } from "ts-morph";
 import { match as match5, P } from "ts-pattern";
 var helpers = {
   map: mapObject
@@ -1969,10 +2012,10 @@ function createContext(conf, io = fileSystem) {
     format(file) {
       return relative(cwd, file).replaceAll(sep, "__").replace(extname(file), ".css");
     },
-    async write(file, css2) {
+    async write(file, css3) {
       const fileName = chunks.format(file);
       const oldCss = await chunks.readFile(file);
-      const newCss = mergeCss(oldCss, css2);
+      const newCss = mergeCss(oldCss, css3);
       logger4.debug("chunk:write", { file, path: fileName });
       return write(paths.chunk, [{ file: fileName, code: newCss }]);
     },
@@ -1992,84 +2035,30 @@ function createContext(conf, io = fileSystem) {
   }
   const files = getFiles();
   logger4.debug("ctx:files", files);
-  const tsProject = createProject();
-  function addSourceFile(file) {
-    tsProject.createSourceFile(file, readFileSync4(file, "utf8"), {
-      overwrite: true,
-      scriptKind: ScriptKind.TSX
-    });
-  }
-  function reloadSourceFile(file) {
-    const sourceFile = tsProject.getSourceFile(file);
-    sourceFile?.refreshFromFileSystemSync();
-  }
-  function reloadSourceFiles() {
-    const files2 = getFiles();
-    for (const file of files2) {
-      const source = tsProject.getSourceFile(file);
-      if (source) {
-        source.refreshFromFileSystemSync();
-      } else {
-        tsProject.addSourceFileAtPath(file);
-      }
-    }
-  }
-  function getSourceFile(file) {
-    return tsProject.getSourceFile(absPath(file));
-  }
-  function removeSourceFile(file) {
-    const sourceFile = tsProject.getSourceFile(absPath(file));
-    if (sourceFile) {
-      return tsProject.removeSourceFile(sourceFile);
-    }
-  }
-  files.forEach((file) => {
-    addSourceFile(file);
-  });
   const importMap = {
     css: `${outdir}/css`,
     recipe: `${outdir}/recipes`,
     pattern: `${outdir}/patterns`,
     jsx: `${outdir}/jsx`
   };
-  const parseSourceFile = createParser({
-    importMap,
-    jsx: {
-      factory: jsxFactory,
-      isStyleProp,
-      nodes: [...patternNodes, ...recipeNodes]
+  const project = createProject({
+    getFiles,
+    readFile(filePath) {
+      return readFileSync4(filePath, "utf8");
+    },
+    parserOptions: {
+      importMap,
+      jsx: {
+        factory: jsxFactory,
+        isStyleProp,
+        nodes: [...patternNodes, ...recipeNodes]
+      }
     }
   });
   function getGlobalCss() {
     const sheet = new Stylesheet2(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);
@@ -2089,8 +2078,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]) => {
@@ -2112,8 +2101,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 };
       match5([name, type]).with([P.string, "pattern"], ([name2]) => {
         collector.setPattern(getPatternFnName(name2), { data: styles });
       }).with([P.string, "recipe"], ([name2]) => {
@@ -2146,7 +2135,7 @@ function createContext(conf, io = fileSystem) {
         logger4.error("pattern", error);
       }
     });
-    if (collector.isEmpty) {
+    if (collector.isEmpty()) {
       return;
     }
     return {
@@ -2171,12 +2160,8 @@ function createContext(conf, io = fileSystem) {
     exclude,
     conditions,
     importMap,
-    reloadSourceFiles,
-    getSourceFile,
-    addSourceFile,
-    reloadSourceFile,
-    removeSourceFile,
-    parseSourceFile,
+    absPath,
+    project,
     getPath,
     paths,
     write,
@@ -2283,16 +2268,16 @@ var Builder = class {
   fileCssMap = /* @__PURE__ */ new Map();
   context;
   configChanged = true;
-  updateFile(file, css2) {
+  updateFile(file, css3) {
     const oldCss = this.fileCssMap?.get(file) ?? "";
-    const newCss = mergeCss2(oldCss, css2);
+    const newCss = mergeCss2(oldCss, css3);
     this.fileCssMap?.set(file, newCss);
   }
   async setup() {
     const configHash = getConfigHash();
     const cachedContext = contextCache.get(configHash);
     if (cachedContext) {
-      cachedContext.reloadSourceFiles();
+      cachedContext.project.reloadSourceFiles();
       this.context = cachedContext;
       this.fileCssMap = builderCache.get(cachedContext).fileCssMap;
       this.fileModifiedMap = builderCache.get(cachedContext).fileModifiedMap;
@@ -2333,8 +2318,8 @@ var Builder = class {
   toString() {
     const ctx = this.ensure();
     const sheet = new Stylesheet3(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) {
@@ -2424,13 +2409,13 @@ async function createContentWatcher(ctx, callback) {
   watcher.on("all", async (event, file) => {
     logger7.debug(`file:${event}`, file);
     match6(event).with("unlink", () => {
-      ctx.removeSourceFile(file);
+      ctx.project.removeSourceFile(ctx.absPath(file));
       ctx.chunks.rm(file);
     }).with("change", async () => {
-      ctx.reloadSourceFile(file);
+      ctx.project.reloadSourceFile(file);
       await callback(file);
     }).with("add", async () => {
-      ctx.addSourceFile(file);
+      ctx.project.createSourceFile(file);
       await callback(file);
     }).otherwise(() => {
     });
@@ -2489,9 +2474,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 outdent25 from "outdent";
+import outdent26 from "outdent";
 function setupGitIgnore(ctx) {
-  const txt = outdent25`## CSS Panda
+  const txt = outdent26`## CSS Panda
   ${ctx.outdir}
   ${ctx.outdir}-static
   `;
@@ -2509,7 +2494,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 outdent26 } from "outdent";
+import { outdent as outdent27 } from "outdent";
 import { join as join3 } from "path";
 import getPackageManager2 from "preferred-pm";
 async function setupConfig(cwd, { force }) {
@@ -2523,7 +2508,7 @@ async function setupConfig(cwd, { force }) {
   if (!force && configFile) {
     logger9.warn("init:config", configExistsMessage(cmd));
   } else {
-    const content = outdent26`
+    const content = outdent27`
        import { defineConfig } from "css-panda"
 
        export default defineConfig({
@@ -2549,7 +2534,7 @@ async function setupConfig(cwd, { force }) {
 }
 async function setupPostcss(cwd) {
   logger9.info("init:postcss", `creating postcss config file: ${quote3("postcss.config.cjs")}`);
-  const content = outdent26`
+  const content = outdent27`
   module.exports = {
     plugins: {
       'css-panda/postcss': {},