@pandacss/node 0.19.0 → 0.21.0

package/dist/index.js

@@ -11,9 +11,9 @@ var __esm = (fn, res) => function __init() {
 var __commonJS = (cb, mod) => function __require() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+var __export = (target, all2) => {
+  for (var name in all2)
+    __defProp(target, name, { get: all2[name], enumerable: true });
 };
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
@@ -404,12 +404,11 @@ var require_ansi_align = __commonJS({
 var src_exports = {};
 __export(src_exports, {
   Builder: () => Builder,
+  PandaContext: () => PandaContext,
   analyzeTokens: () => analyzeTokens,
   bundleCss: () => bundleCss,
   bundleMinimalFilesCss: () => bundleMinimalFilesCss,
-  createContext: () => createContext,
   debugFiles: () => debugFiles,
-  emitArtfifactsAndCssChunks: () => emitArtfifactsAndCssChunks,
   emitArtifacts: () => emitArtifacts,
   execCommand: () => execCommand,
   extractFile: () => extractFile,
@@ -720,7 +719,7 @@ function analyzeTokens(ctx, options = {}) {
   const chunkFiles = ctx.chunks.getFiles();
   ctx.config.optimize = true;
   ctx.config.minify = false;
-  const css = ctx.getCss({ files: chunkFiles });
+  const css2 = ctx.getCss({ files: chunkFiles });
   ctx.config.minify = true;
   const minifiedCss = ctx.getCss({ files: chunkFiles });
   ctx.config.minify = minify;
@@ -735,11 +734,11 @@ function analyzeTokens(ctx, options = {}) {
         classify: classifyMs
       },
       fileSizes: {
-        lineCount: css.split("\n").length,
-        normal: (0, import_filesize.filesize)(Buffer.byteLength(css, "utf-8")),
+        lineCount: css2.split("\n").length,
+        normal: (0, import_filesize.filesize)(Buffer.byteLength(css2, "utf-8")),
         minified: (0, import_filesize.filesize)(Buffer.byteLength(minifiedCss, "utf-8")),
         gzip: {
-          normal: (0, import_filesize.filesize)(gzipSizeSync(css)),
+          normal: (0, import_filesize.filesize)(gzipSizeSync(css2)),
           minified: (0, import_filesize.filesize)(gzipSizeSync(minifiedCss))
         }
       }
@@ -781,13 +780,11 @@ var writeAnalyzeJSON = (filePath, result, ctx) => {
 
 // src/builder.ts
 init_cjs_shims();
-var import_config2 = require("@pandacss/config");
 var import_core3 = require("@pandacss/core");
 var import_error = require("@pandacss/error");
-var import_logger5 = require("@pandacss/logger");
+var import_logger6 = require("@pandacss/logger");
 var import_fs = require("fs");
 var import_fs_extra2 = __toESM(require("fs-extra"));
-var import_path2 = require("path");
 
 // ../../node_modules/.pnpm/p-limit@4.0.0/node_modules/p-limit/index.js
 init_cjs_shims();
@@ -896,17 +893,20 @@ function pLimit(concurrency) {
   return generator;
 }
 
+// src/builder.ts
+var import_pathe2 = require("pathe");
+
 // src/config.ts
 init_cjs_shims();
-var import_config = require("@pandacss/config");
+var import_config2 = require("@pandacss/config");
 var import_hookable = require("hookable");
 var import_look_it_up = require("look-it-up");
 var import_tsconfck = require("tsconfck");
 
 // src/create-context.ts
 init_cjs_shims();
-var import_generator = require("@pandacss/generator");
-var import_logger3 = require("@pandacss/logger");
+var import_generator2 = require("@pandacss/generator");
+var import_logger4 = require("@pandacss/logger");
 var import_parser = require("@pandacss/parser");
 
 // src/chunk-engine.ts
@@ -929,10 +929,11 @@ var getChunkEngine = ({
   format(file) {
     return path2.relative(config.cwd, file).replaceAll(path2.sep, "__").replace(path2.extname(file), ".css");
   },
-  getArtifact(file, css) {
+  getArtifact(file, css2) {
     const fileName = this.format(file);
-    const newCss = (0, import_core.mergeCss)(this.readFile(file), css);
+    const newCss = (0, import_core.mergeCss)(this.readFile(file), css2);
     return {
+      id: fileName,
       dir: paths.chunk,
       files: [{ file: fileName, code: newCss }]
     };
@@ -1024,58 +1025,200 @@ process.on("uncaughtException", (reason) => {
 
 // src/output-engine.ts
 init_cjs_shims();
-var getOutputEngine = ({
-  paths,
-  runtime: { path: path2, fs }
-}) => ({
+var import_logger3 = require("@pandacss/logger");
+var PandaOutputEngine = class {
+  paths;
+  fs;
+  path;
+  constructor({ paths, runtime: { path: path2, fs } }) {
+    this.paths = paths;
+    this.fs = fs;
+    this.path = path2;
+  }
   empty() {
-    fs.rmDirSync(path2.join(...paths.root));
-  },
+    this.fs.rmDirSync(this.path.join(...this.paths.root));
+  }
   async write(output) {
     if (!output)
       return;
-    const { dir = paths.root, files } = output;
-    fs.ensureDirSync(path2.join(...dir));
+    const { dir = this.paths.root, files } = output;
+    this.fs.ensureDirSync(this.path.join(...dir));
     return Promise.allSettled(
       files.map(async (artifact) => {
-        if (!artifact)
+        if (!artifact?.code)
           return;
         const { file, code } = artifact;
-        const absPath = path2.join(...dir, file);
-        if (!code)
-          return;
-        return fs.writeFile(absPath, code);
+        const absPath = this.path.join(...dir, file);
+        import_logger3.logger.debug("write:file", dir.slice(-1).concat(file).join("/"));
+        return this.fs.writeFile(absPath, code);
       })
     );
   }
-});
+};
+
+// src/diff-engine.ts
+init_cjs_shims();
+var import_config = require("@pandacss/config");
+var import_generator = require("@pandacss/generator");
+var import_shared = require("@pandacss/shared");
+var import_microdiff = __toESM(require("microdiff"));
+
+// src/matcher.ts
+init_cjs_shims();
+function createMatcher(id, patterns) {
+  if (!patterns?.length)
+    return () => void 0;
+  const includePatterns = [];
+  const excludePatterns = [];
+  const deduped = new Set(patterns);
+  deduped.forEach((pattern) => {
+    const regexString = pattern.replace(/\*/g, ".*");
+    if (pattern.startsWith("!")) {
+      excludePatterns.push(regexString.slice(1));
+    } else {
+      includePatterns.push(regexString);
+    }
+  });
+  const include = new RegExp(includePatterns.join("|"));
+  const exclude = new RegExp(excludePatterns.join("|"));
+  return (path2) => {
+    if (excludePatterns.length && exclude.test(path2))
+      return;
+    return include.test(path2) ? id : void 0;
+  };
+}
+
+// src/diff-engine.ts
+var all = ["outdir", "forceConsistentTypeExtension", "outExtension"];
+var format = ["syntax", "hash", "prefix", "separator"];
+var tokens = ["utilities", "conditions", "theme.tokens", "theme.semanticTokens", "theme.breakpoints"];
+var jsx = ["jsxFramework", "jsxFactory", "jsxStyleProps", "syntax"];
+var css = ["layers", "optimize", "minify"];
+var common = tokens.concat(jsx, format);
+var artifactConfigDeps = {
+  helpers: ["syntax", "jsxFramework"],
+  keyframes: ["theme.keyframes", "layers"],
+  "design-tokens": ["layers", "!utilities.*.className"].concat(tokens),
+  types: ["!utilities.*.className"].concat(common),
+  "css-fn": common,
+  cva: ["syntax"],
+  sva: ["syntax"],
+  cx: [],
+  "create-recipe": ["separator", "prefix", "hash"],
+  "recipes-index": ["theme.recipes", "theme.slotRecipes"],
+  recipes: ["theme.recipes", "theme.slotRecipes"],
+  "patterns-index": ["syntax", "patterns"],
+  patterns: ["syntax", "patterns"],
+  "jsx-is-valid-prop": common,
+  "jsx-factory": jsx,
+  "jsx-helpers": jsx,
+  "jsx-patterns": jsx.concat("patterns"),
+  "jsx-patterns-index": jsx.concat("patterns"),
+  "css-index": ["syntax"],
+  "reset.css": ["preflight", "layers"],
+  "global.css": ["globalCss"].concat(css),
+  "static.css": ["staticCss", "theme.breakpoints"].concat(css),
+  "styles.css": tokens.concat(format),
+  "package.json": ["emitPackage"]
+};
+var configDeps = {
+  artifacts: artifactConfigDeps
+};
+var matchers = {
+  artifacts: Object.keys(configDeps.artifacts).map((key) => {
+    const paths = configDeps.artifacts[key];
+    if (!paths.length)
+      return () => void 0;
+    return createMatcher(key, paths.concat(all));
+  })
+};
+var DiffEngine = class {
+  constructor(ctx) {
+    this.ctx = ctx;
+    this.previousConfig = ctx.conf.deserialize();
+  }
+  previousConfig;
+  /**
+   * Reload config from disk and refresh the context
+   */
+  async reloadConfigAndRefreshContext(fn) {
+    const conf = await (0, import_config.loadConfigFile)({ cwd: this.ctx.config.cwd, file: this.ctx.conf.path });
+    return this.refresh(conf, fn);
+  }
+  /**
+   * Update the context from the refreshed config
+   * then persist the changes on each affected engines
+   * Returns the list of affected artifacts/engines
+   */
+  refresh(conf, fn) {
+    const affected = {
+      artifacts: /* @__PURE__ */ new Set(),
+      hasConfigChanged: false,
+      diffs: []
+    };
+    if (!this.previousConfig) {
+      affected.hasConfigChanged = true;
+      return affected;
+    }
+    const newConfig = conf.deserialize();
+    const configDiff = (0, import_microdiff.default)(this.previousConfig, newConfig);
+    if (!configDiff.length) {
+      return affected;
+    }
+    affected.hasConfigChanged = true;
+    affected.diffs = configDiff;
+    this.previousConfig = newConfig;
+    fn?.(conf);
+    configDiff.forEach((change) => {
+      const changePath = change.path.join(".");
+      matchers.artifacts.forEach((matcher) => {
+        const id = matcher(changePath);
+        if (!id)
+          return;
+        if (id === "recipes") {
+          const name = (0, import_shared.dashCase)(change.path.slice(1, 3).join("."));
+          affected.artifacts.add(name);
+        }
+        if (id === "patterns") {
+          const name = (0, import_shared.dashCase)(change.path.slice(0, 2).join("."));
+          affected.artifacts.add(name);
+        }
+        affected.artifacts.add(id);
+      });
+    });
+    return affected;
+  }
+};
 
 // src/create-context.ts
-var createContext = (conf) => {
-  const generator = (0, import_generator.createGenerator)(conf);
-  const config = conf.config;
-  const runtime = nodeRuntime;
-  config.cwd ||= runtime.cwd();
-  if (config.logLevel) {
-    import_logger3.logger.level = config.logLevel;
-  }
-  const { include, exclude, cwd } = config;
-  const getFiles = () => runtime.fs.glob({ include, exclude, cwd });
-  const ctx = {
-    ...conf,
-    ...generator,
-    runtime: nodeRuntime,
-    hooks: conf.hooks,
-    getFiles,
-    project: (0, import_parser.createProject)({
+var PandaContext = class extends import_generator2.Generator {
+  runtime;
+  project;
+  getFiles;
+  chunks;
+  output;
+  diff;
+  constructor(conf) {
+    super(conf);
+    const config = conf.config;
+    this.runtime = nodeRuntime;
+    config.cwd ||= this.runtime.cwd();
+    if (config.logLevel) {
+      import_logger4.logger.level = config.logLevel;
+    }
+    const { include, exclude, cwd } = config;
+    this.getFiles = () => this.runtime.fs.glob({ include, exclude, cwd });
+    this.project = (0, import_parser.createProject)({
       ...conf.tsconfig,
-      getFiles,
-      readFile: runtime.fs.readFileSync,
+      getFiles: this.getFiles.bind(this),
+      readFile: this.runtime.fs.readFileSync.bind(this),
       hooks: conf.hooks,
-      parserOptions: { join: runtime.path.join, ...generator.parserOptions }
-    })
-  };
-  return Object.assign(ctx, { chunks: getChunkEngine(ctx), output: getOutputEngine(ctx) });
+      parserOptions: { join: this.runtime.path.join, ...this.parserOptions }
+    });
+    this.chunks = getChunkEngine(this);
+    this.output = new PandaOutputEngine(this);
+    this.diff = new DiffEngine(this);
+  }
 };
 
 // src/config.ts
@@ -1089,27 +1232,33 @@ function findConfig() {
   }
 }
 async function loadConfigAndCreateContext(options = {}) {
-  const hooks = (0, import_hookable.createHooks)();
   const { config, configPath } = options;
   const cwd = options.cwd ?? options?.config?.cwd ?? process.cwd();
-  const conf = await (0, import_config.loadConfigFile)({ cwd, file: configPath });
+  const conf = await (0, import_config2.loadConfigFile)({ cwd, file: configPath });
   if (config) {
     Object.assign(conf.config, config);
   }
   if (options.cwd) {
     conf.config.cwd = options.cwd;
   }
-  const tsconfigResult = await (0, import_tsconfck.parse)(conf.path, { root: cwd, resolveWithEmptyIfConfigNotFound: true });
+  const tsconfigResult = await (0, import_tsconfck.parse)(conf.path, {
+    root: cwd,
+    resolveWithEmptyIfConfigNotFound: true
+  });
   if (tsconfigResult) {
     conf.tsconfig = tsconfigResult.tsconfig;
     conf.tsconfigFile = tsconfigResult.tsconfigFile;
     const options2 = tsconfigResult.tsconfig?.compilerOptions;
     if (options2?.paths) {
       const baseUrl = options2.baseUrl;
-      conf.tsOptions = { baseUrl, pathMappings: (0, import_config.convertTsPathsToRegexes)(options2.paths, baseUrl ?? cwd) };
+      conf.tsOptions = {
+        baseUrl,
+        pathMappings: (0, import_config2.convertTsPathsToRegexes)(options2.paths, baseUrl ?? cwd)
+      };
     }
   }
   conf.config.outdir ??= "styled-system";
+  const hooks = (0, import_hookable.createHooks)();
   if (conf.config.hooks) {
     hooks.addHooks(conf.config.hooks);
   }
@@ -1117,13 +1266,13 @@ async function loadConfigAndCreateContext(options = {}) {
   if (conf.config.logLevel === "debug") {
     (0, import_hookable.createDebugger)(hooks, { tag: "panda" });
   }
-  return createContext({ ...conf, hooks });
+  return new PandaContext({ ...conf, hooks });
 }
 
 // src/extract.ts
 init_cjs_shims();
 var import_core2 = require("@pandacss/core");
-var import_logger4 = require("@pandacss/logger");
+var import_logger5 = require("@pandacss/logger");
 var import_parser2 = require("@pandacss/parser");
 var import_promises2 = require("fs/promises");
 var import_lil_fp = require("lil-fp");
@@ -2445,6 +2594,7 @@ var createBox = (options) => boxen(options.content, {
 async function bundleStyleChunksWithImports(ctx) {
   const files = ctx.chunks.getFiles();
   await ctx.output.write({
+    id: "styles.css",
     dir: ctx.paths.root,
     files: [{ file: "styles.css", code: ctx.getCss({ files }) }]
   });
@@ -2452,11 +2602,11 @@ async function bundleStyleChunksWithImports(ctx) {
 }
 async function writeFileChunk(ctx, file) {
   const { path: path2 } = ctx.runtime;
-  import_logger4.logger.debug("chunk:write", `File: ${path2.relative(ctx.config.cwd, file)}`);
-  const css = extractFile(ctx, file);
-  if (!css)
+  import_logger5.logger.debug("chunk:write", `File: ${path2.relative(ctx.config.cwd, file)}`);
+  const css2 = extractFile(ctx, file);
+  if (!css2)
     return;
-  const artifact = ctx.chunks.getArtifact(file, css);
+  const artifact = ctx.chunks.getArtifact(file, css2);
   return ctx.output.write(artifact);
 }
 function extractFile(ctx, file) {
@@ -2466,16 +2616,16 @@ function extractFile(ctx, file) {
   } = ctx;
   return (0, import_lil_fp.pipe)(
     { file: path2.abs(cwd, file) },
-    (0, import_lil_fp.tap)(() => import_logger4.logger.debug("file:extract", file)),
-    import_lil_fp.Obj.bind("measure", () => import_logger4.logger.time.debug(`Extracted ${file}`)),
+    (0, import_lil_fp.tap)(() => import_logger5.logger.debug("file:extract", file)),
+    import_lil_fp.Obj.bind("measure", () => import_logger5.logger.time.debug(`Extracted ${file}`)),
     import_lil_fp.Obj.bind(
       "result",
       (0, import_lil_fp.tryCatch)(
         ({ file: file2 }) => ctx.project.parseSourceFile(file2),
-        (error) => import_logger4.logger.error("file:parse", error)
+        (error) => import_logger5.logger.error("file:parse", error)
       )
     ),
-    import_lil_fp.Obj.bind("measureCss", () => import_logger4.logger.time.debug(`Parsed ${file}`)),
+    import_lil_fp.Obj.bind("measureCss", () => import_logger5.logger.time.debug(`Parsed ${file}`)),
     import_lil_fp.Obj.bind("css", ({ result }) => result ? ctx.getParserCss(result) : void 0),
     (0, import_lil_fp.tap)(({ measure, measureCss }) => [measureCss(), measure()]),
     import_lil_fp.Obj.get("css")
@@ -2487,10 +2637,10 @@ function writeChunks(ctx) {
 var randomWords = ["Sweet", "Divine", "Pandalicious", "Super"];
 var pickRandom = (arr) => arr[Math.floor(Math.random() * arr.length)];
 var limit = pLimit(20);
-async function emitArtifacts(ctx) {
+async function emitArtifacts(ctx, ids) {
   if (ctx.config.clean)
     ctx.output.empty();
-  const promises = ctx.getArtifacts().map((artifact) => limit(() => ctx.output.write(artifact)));
+  const promises = ctx.getArtifacts(ids).map((artifact) => limit(() => ctx.output.write(artifact)));
   await Promise.allSettled(promises);
   void ctx.hooks.callHook("generator:done");
   return {
@@ -2501,13 +2651,6 @@ async function emitArtifacts(ctx) {
     msg: ctx.messages.artifactsGenerated()
   };
 }
-async function emitArtfifactsAndCssChunks(ctx) {
-  await emitArtifacts(ctx);
-  if (ctx.config.emitTokensOnly) {
-    return { files: [], msg: "Successfully rebuilt the css variables and js function to query your tokens \u2728" };
-  }
-  return writeAndBundleCssChunks(ctx);
-}
 async function writeAndBundleCssChunks(ctx) {
   await writeChunks(ctx);
   return bundleStyleChunksWithImports(ctx);
@@ -2524,7 +2667,7 @@ async function bundleMinimalFilesCss(ctx, outfile) {
   const filesWithCss = [];
   const collector = (0, import_parser2.createParserResult)();
   files.forEach((file) => {
-    const measure = import_logger4.logger.time.debug(`Parsed ${file}`);
+    const measure = import_logger5.logger.time.debug(`Parsed ${file}`);
     const result = ctx.project.parseSourceFile(file);
     measure();
     if (!result)
@@ -2532,24 +2675,24 @@ async function bundleMinimalFilesCss(ctx, outfile) {
     collector.merge(result);
     filesWithCss.push(file);
   });
-  const css = ctx.getParserCss(collector);
-  if (!css)
+  const css2 = ctx.getParserCss(collector);
+  if (!css2)
     return { files, msg: ctx.messages.buildComplete(files.length) };
   const minify = ctx.config.minify;
-  await (0, import_promises2.writeFile)(outfile, (0, import_core2.optimizeCss)(css, { minify }));
+  await (0, import_promises2.writeFile)(outfile, (0, import_core2.optimizeCss)(css2, { minify }));
   return { files, msg: ctx.messages.buildComplete(files.length) };
 }
 async function generateCssArtifactOfType(ctx, cssType, outfile) {
   let notFound = false;
-  const css = (0, import_ts_pattern.match)(cssType).with("preflight", () => ctx.getResetCss(ctx)).with("tokens", () => ctx.getTokenCss(ctx)).with("static", () => ctx.getStaticCss(ctx)).with("global", () => ctx.getGlobalCss(ctx)).with("keyframes", () => ctx.getKeyframeCss(ctx)).otherwise(() => {
+  const css2 = (0, import_ts_pattern.match)(cssType).with("preflight", () => ctx.getResetCss()).with("tokens", () => ctx.getTokenCss()).with("static", () => ctx.getStaticCss()).with("global", () => ctx.getGlobalCss()).with("keyframes", () => ctx.getKeyframeCss()).otherwise(() => {
     notFound = true;
   });
   if (notFound)
     return { msg: `No css artifact of type <${cssType}> was found` };
-  if (!css)
+  if (!css2)
     return { msg: `No css to generate for type <${cssType}>` };
   const minify = ctx.config.minify;
-  await (0, import_promises2.writeFile)(outfile, (0, import_core2.optimizeCss)(css, { minify }));
+  await (0, import_promises2.writeFile)(outfile, (0, import_core2.optimizeCss)(css2, { minify }));
   return { msg: `Successfully generated ${cssType} css artifact \u2728` };
 }
 
@@ -2598,8 +2741,8 @@ function parseDependency(fileOrGlob) {
 }
 
 // src/builder.ts
-var configCache = /* @__PURE__ */ new Map();
-var contentFilesCache = /* @__PURE__ */ new WeakMap();
+var fileCssMap = /* @__PURE__ */ new Map();
+var fileModifiedMap = /* @__PURE__ */ new Map();
 var limit2 = pLimit(20);
 var Builder = class {
   /**
@@ -2607,34 +2750,8 @@ var Builder = class {
    */
   context;
   hasEmitted = false;
-  configDependencies = /* @__PURE__ */ new Set();
-  writeFileCss = (file, css) => {
-    const oldCss = this.fileCssMap?.get(file) ?? "";
-    const newCss = (0, import_core3.mergeCss)(oldCss, css);
-    this.fileCssMap?.set(file, newCss);
-  };
-  checkConfigDeps = (configPath, deps) => {
-    let modified = false;
-    const newModified = /* @__PURE__ */ new Map();
-    const prevModified = configCache.get(configPath)?.depsModifiedMap;
-    for (const file of deps) {
-      const stats = import_fs_extra2.default.statSync(file, { throwIfNoEntry: false });
-      if (!stats)
-        continue;
-      const time = stats.mtimeMs;
-      newModified.set(file, time);
-      if (prevModified && (!prevModified.has(file) || time > prevModified.get(file))) {
-        modified = true;
-      }
-    }
-    if (!modified) {
-      return { isModified: false, modifiedMap: prevModified || /* @__PURE__ */ new Map() };
-    }
-    for (const file of deps) {
-      delete require.cache[file];
-    }
-    return { isModified: true, modifiedMap: newModified };
-  };
+  hasConfigChanged = false;
+  affecteds;
   getConfigPath = () => {
     const configPath = findConfig();
     if (!configPath) {
@@ -2642,56 +2759,35 @@ var Builder = class {
     }
     return configPath;
   };
-  hasConfigChanged = false;
   setup = async (options = {}) => {
-    import_logger5.logger.debug("builder", "\u{1F6A7} Setup");
+    import_logger6.logger.debug("builder", "\u{1F6A7} Setup");
     const configPath = options.configPath ?? this.getConfigPath();
-    const tsOptions = this.context?.tsOptions ?? { baseUrl: void 0, pathMappings: [] };
-    const compilerOptions = this.context?.tsconfig?.compilerOptions ?? {};
-    const { deps: foundDeps } = (0, import_config2.getConfigDependencies)(configPath, tsOptions, compilerOptions);
-    const cwd = options?.cwd ?? this.context?.config.cwd ?? process.cwd();
-    const configDeps = /* @__PURE__ */ new Set([...foundDeps, ...(this.context?.dependencies ?? []).map((file) => (0, import_path2.resolve)(cwd, file))]);
-    this.configDependencies = configDeps;
-    const deps = this.checkConfigDeps(configPath, configDeps);
-    this.hasConfigChanged = deps.isModified;
-    if (deps.isModified) {
-      await this.setupContext({
-        configPath,
-        depsModifiedMap: deps.modifiedMap
-      });
-      const ctx = this.getContextOrThrow();
-      import_logger5.logger.debug("builder", "\u2699\uFE0F Config changed, reloading");
-      await ctx.hooks.callHook("config:change", ctx.config);
+    if (!this.context) {
+      return this.setupContext({ configPath, cwd: options.cwd });
     }
-    const cache = configCache.get(configPath);
-    if (cache) {
-      this.context = cache.context;
-      this.context.project.reloadSourceFiles();
-    } else {
-      await this.setupContext({
-        configPath,
-        depsModifiedMap: deps.modifiedMap
-      });
+    const ctx = this.getContextOrThrow();
+    this.affecteds = await ctx.diff.reloadConfigAndRefreshContext((conf) => {
+      this.context = new PandaContext({ ...conf, hooks: ctx.hooks });
+    });
+    this.hasConfigChanged = this.affecteds.hasConfigChanged;
+    if (this.affecteds.hasConfigChanged) {
+      import_logger6.logger.debug("builder", "\u2699\uFE0F Config changed, reloading");
+      await ctx.hooks.callHook("config:change", ctx.config);
+      return;
     }
+    ctx.project.reloadSourceFiles();
   };
-  emit() {
-    if (this.hasEmitted && this.hasConfigChanged) {
-      emitArtifacts(this.getContextOrThrow());
+  async emit() {
+    if (this.hasEmitted && this.affecteds?.hasConfigChanged) {
+      await emitArtifacts(this.getContextOrThrow(), Array.from(this.affecteds.artifacts));
     }
     this.hasEmitted = true;
   }
   setupContext = async (options) => {
-    const { configPath, depsModifiedMap } = options;
-    this.context = await loadConfigAndCreateContext({ configPath });
-    configCache.set(configPath, {
-      context: this.context,
-      deps: new Set(this.context.dependencies ?? []),
-      depsModifiedMap
-    });
-    contentFilesCache.set(this.context, {
-      fileCssMap: /* @__PURE__ */ new Map(),
-      fileModifiedMap: /* @__PURE__ */ new Map()
-    });
+    const { configPath, cwd } = options;
+    const ctx = await loadConfigAndCreateContext({ configPath, cwd });
+    this.context = ctx;
+    return ctx;
   };
   getContextOrThrow = () => {
     if (!this.context) {
@@ -2699,29 +2795,23 @@ var Builder = class {
     }
     return this.context;
   };
-  get fileModifiedMap() {
-    const ctx = this.getContextOrThrow();
-    return contentFilesCache.get(ctx).fileModifiedMap;
-  }
-  get fileCssMap() {
-    const ctx = this.getContextOrThrow();
-    return contentFilesCache.get(ctx).fileCssMap;
-  }
   extractFile = async (ctx, file) => {
     const mtime = (0, import_fs.existsSync)(file) ? import_fs_extra2.default.statSync(file).mtimeMs : -Infinity;
-    const isUnchanged = this.fileModifiedMap.has(file) && mtime === this.fileModifiedMap.get(file);
-    if (isUnchanged)
+    const isUnchanged = fileModifiedMap.has(file) && mtime === fileModifiedMap.get(file);
+    if (isUnchanged && !this.hasConfigChanged)
       return;
-    const css = extractFile(ctx, file);
-    if (!css)
+    const css2 = extractFile(ctx, file);
+    fileModifiedMap.set(file, mtime);
+    if (!css2) {
+      fileCssMap.delete(file);
       return;
-    this.fileModifiedMap.set(file, mtime);
-    this.writeFileCss(file, css);
-    return css;
+    }
+    fileCssMap.set(file, css2);
+    return css2;
   };
   extract = async () => {
     const ctx = this.getContextOrThrow();
-    const done = import_logger5.logger.time.info("Extracted in");
+    const done = import_logger6.logger.time.info("Extracted in");
     const promises = ctx.getFiles().map((file) => limit2(() => this.extractFile(ctx, file)));
     await Promise.allSettled(promises);
     done();
@@ -2729,7 +2819,7 @@ var Builder = class {
   toString = () => {
     const ctx = this.getContextOrThrow();
     return ctx.getCss({
-      files: Array.from(this.fileCssMap.values()),
+      files: Array.from(fileCssMap.values()),
       resolve: true
     });
   };
@@ -2761,29 +2851,26 @@ var Builder = class {
         fn(dependency);
       }
     }
-    for (const file of ctx.dependencies) {
-      fn({ type: "dependency", file: (0, import_path2.resolve)(file) });
-    }
-    for (const file of this.configDependencies) {
-      fn({ type: "dependency", file: (0, import_path2.resolve)(file) });
+    for (const file of ctx.conf.dependencies) {
+      fn({ type: "dependency", file: (0, import_pathe2.resolve)(file) });
     }
   };
 };
 
 // src/debug-files.ts
 init_cjs_shims();
-var import_logger6 = require("@pandacss/logger");
+var import_logger7 = require("@pandacss/logger");
 var nodePath = __toESM(require("path"));
 async function debugFiles(ctx, options) {
   const files = ctx.getFiles();
-  const measureTotal = import_logger6.logger.time.debug(`Done parsing ${files.length} files`);
+  const measureTotal = import_logger7.logger.time.debug(`Done parsing ${files.length} files`);
   ctx.config.minify = false;
   ctx.config.optimize = true;
   const { fs, path: path2 } = ctx.runtime;
   const outdir = options.outdir;
   if (!options.dry && outdir) {
     fs.ensureDirSync(outdir);
-    import_logger6.logger.info("cli", `Writing ${import_logger6.colors.bold(`${outdir}/config.json`)}`);
+    import_logger7.logger.info("cli", `Writing ${import_logger7.colors.bold(`${outdir}/config.json`)}`);
     await fs.writeFile(`${outdir}/config.json`, JSON.stringify(ctx.config, null, 2));
   }
   if (options.onlyConfig) {
@@ -2793,16 +2880,16 @@ async function debugFiles(ctx, options) {
   const filesWithCss = [];
   await Promise.allSettled(
     files.map(async (file) => {
-      const measure = import_logger6.logger.time.debug(`Parsed ${file}`);
+      const measure = import_logger7.logger.time.debug(`Parsed ${file}`);
       const result = ctx.project.parseSourceFile(file);
       measure();
       if (!result)
         return;
-      const css = ctx.getParserCss(result);
-      if (!css)
+      const css2 = ctx.getParserCss(result);
+      if (!css2)
         return;
       if (options.dry) {
-        console.log({ path: file, ast: result, code: css });
+        console.log({ path: file, ast: result, code: css2 });
         return Promise.resolve();
       }
       if (outdir) {
@@ -2811,22 +2898,22 @@ async function debugFiles(ctx, options) {
         const relative3 = path2.relative(ctx.config.cwd, parsedPath.dir);
         const astJsonPath = `${relative3}/${parsedPath.name}.ast.json`.replaceAll(path2.sep, "__");
         const cssPath = `${relative3}/${parsedPath.name}.css`.replaceAll(path2.sep, "__");
-        import_logger6.logger.info("cli", `Writing ${import_logger6.colors.bold(`${outdir}/${astJsonPath}`)}`);
-        import_logger6.logger.info("cli", `Writing ${import_logger6.colors.bold(`${outdir}/${cssPath}`)}`);
+        import_logger7.logger.info("cli", `Writing ${import_logger7.colors.bold(`${outdir}/${astJsonPath}`)}`);
+        import_logger7.logger.info("cli", `Writing ${import_logger7.colors.bold(`${outdir}/${cssPath}`)}`);
         return Promise.allSettled([
           fs.writeFile(`${outdir}/${astJsonPath}`, JSON.stringify(result.toJSON(), null, 2)),
-          fs.writeFile(`${outdir}/${cssPath}`, css)
+          fs.writeFile(`${outdir}/${cssPath}`, css2)
         ]);
       }
     })
   );
-  import_logger6.logger.info("cli", `Found ${import_logger6.colors.bold(`${filesWithCss.length}/${files.length}`)} files using Panda`);
+  import_logger7.logger.info("cli", `Found ${import_logger7.colors.bold(`${filesWithCss.length}/${files.length}`)} files using Panda`);
   measureTotal();
 }
 
 // src/exec-command.ts
 init_cjs_shims();
-var import_logger7 = require("@pandacss/logger");
+var import_logger8 = require("@pandacss/logger");
 var import_child_process = require("child_process");
 var import_preferred_pm = __toESM(require("preferred-pm"));
 async function execCommand(cmd, cwd) {
@@ -2838,66 +2925,56 @@ async function execCommand(cmd, cwd) {
   }
   const check = (0, import_child_process.spawnSync)(pm, args, { cwd, stdio: "pipe" });
   if (check.status !== 0) {
-    import_logger7.logger.error("exec", check.stderr.toString());
+    import_logger8.logger.error("exec", check.stderr.toString());
   }
 }
 
 // src/generate.ts
 init_cjs_shims();
-var import_logger8 = require("@pandacss/logger");
+var import_logger9 = require("@pandacss/logger");
 var import_ts_pattern2 = require("ts-pattern");
-
-// src/load-context.ts
-init_cjs_shims();
-var loadContext = async (config, configPath) => {
-  const ctxRef = { current: void 0 };
-  const load = async () => {
-    const ctx = await loadConfigAndCreateContext({ config, configPath });
-    ctxRef.current = ctx;
-  };
-  await load();
-  return [ctxRef, load];
-};
-
-// src/generate.ts
-async function build(ctx) {
-  const { msg } = await emitArtfifactsAndCssChunks(ctx);
-  import_logger8.logger.info("css:emit", msg);
+async function build(ctx, ids) {
+  await emitArtifacts(ctx, ids);
+  if (ctx.config.emitTokensOnly) {
+    return import_logger9.logger.info("css:emit", "Successfully rebuilt the css variables and js function to query your tokens \u2728");
+  }
+  const { msg } = await writeAndBundleCssChunks(ctx);
+  import_logger9.logger.info("css:emit", msg);
 }
 async function generate(config, configPath) {
-  const [ctxRef, loadCtx] = await loadContext(config, configPath);
-  const ctx = ctxRef.current;
+  const ctx = await loadConfigAndCreateContext({ config, configPath });
   await build(ctx);
   const {
     runtime: { fs, path: path2 },
-    dependencies,
     config: { cwd }
   } = ctx;
   if (ctx.config.watch) {
-    const configWatcher = fs.watch({ include: dependencies });
+    const configWatcher = fs.watch({ include: ctx.conf.dependencies });
     configWatcher.on("change", async () => {
-      import_logger8.logger.info("config:change", "Config changed, restarting...");
-      await loadCtx();
-      await ctxRef.current.hooks.callHook("config:change", ctxRef.current.config);
-      return build(ctxRef.current);
+      const affecteds = await ctx.diff.reloadConfigAndRefreshContext();
+      if (!affecteds.artifacts.size)
+        return;
+      import_logger9.logger.info("config:change", "Config changed, restarting...");
+      await ctx.hooks.callHook("config:change", ctx.config);
+      return build(ctx, Array.from(affecteds.artifacts));
     });
     const contentWatcher = fs.watch(ctx.config);
     contentWatcher.on("all", async (event, file) => {
-      import_logger8.logger.info(`file:${event}`, file);
+      import_logger9.logger.info(`file:${event}`, file);
       (0, import_ts_pattern2.match)(event).with("unlink", () => {
         ctx.project.removeSourceFile(path2.abs(cwd, file));
         ctx.chunks.rm(file);
       }).with("change", async () => {
         ctx.project.reloadSourceFile(file);
-        await writeFileChunk(ctxRef.current, file);
-        return bundleStyleChunksWithImports(ctxRef.current);
+        await writeFileChunk(ctx, file);
+        return bundleStyleChunksWithImports(ctx);
       }).with("add", async () => {
         ctx.project.createSourceFile(file);
-        return bundleStyleChunksWithImports(ctxRef.current);
+        return bundleStyleChunksWithImports(ctx);
       }).otherwise(() => {
       });
     });
-    import_logger8.logger.info("ctx:watch", ctx.messages.watch());
+    import_logger9.logger.info("ctx:watch", ctx.messages.watch());
   }
 }
 
@@ -2928,12 +3005,12 @@ function setupGitIgnore(ctx) {
 
 // src/setup-config.ts
 init_cjs_shims();
-var import_generator2 = require("@pandacss/generator");
-var import_logger9 = require("@pandacss/logger");
+var import_generator3 = require("@pandacss/generator");
+var import_logger10 = require("@pandacss/logger");
 var import_fs_extra3 = __toESM(require("fs-extra"));
 var import_look_it_up3 = require("look-it-up");
 var import_outdent2 = require("outdent");
-var import_path3 = require("path");
+var import_path2 = require("path");
 var import_preferred_pm2 = __toESM(require("preferred-pm"));
 var import_prettier = __toESM(require("prettier"));
 async function setupConfig(cwd, opts = {}) {
@@ -2944,9 +3021,9 @@ async function setupConfig(cwd, opts = {}) {
   const cmd = pm === "npm" ? "npm run" : pm;
   const isTs = (0, import_look_it_up3.lookItUpSync)("tsconfig.json", cwd);
   const file = isTs ? "panda.config.ts" : "panda.config.mjs";
-  import_logger9.logger.info("init:config", `creating panda config file: ${(0, import_logger9.quote)(file)}`);
+  import_logger10.logger.info("init:config", `creating panda config file: ${(0, import_logger10.quote)(file)}`);
   if (!force && configFile) {
-    import_logger9.logger.warn("init:config", import_generator2.messages.configExists(cmd));
+    import_logger10.logger.warn("init:config", import_generator3.messages.configExists(cmd));
   } else {
     const content = import_outdent2.outdent`
 import { defineConfig } from "@pandacss/dev"
@@ -2978,12 +3055,12 @@ jsxFramework: '${jsxFramework}',` : ""}
 syntax: '${syntax}'` : ""}
 })
     `;
-    await import_fs_extra3.default.writeFile((0, import_path3.join)(cwd, file), import_prettier.default.format(content));
-    import_logger9.logger.log(import_generator2.messages.thankYou());
+    await import_fs_extra3.default.writeFile((0, import_path2.join)(cwd, file), import_prettier.default.format(content));
+    import_logger10.logger.log(import_generator3.messages.thankYou());
   }
 }
 async function setupPostcss(cwd) {
-  import_logger9.logger.info("init:postcss", `creating postcss config file: ${(0, import_logger9.quote)("postcss.config.cjs")}`);
+  import_logger10.logger.info("init:postcss", `creating postcss config file: ${(0, import_logger10.quote)("postcss.config.cjs")}`);
   const content = import_outdent2.outdent`
 module.exports = {
   plugins: {
@@ -2991,12 +3068,12 @@ module.exports = {
   },
 }
   `;
-  await import_fs_extra3.default.writeFile((0, import_path3.join)(cwd, "postcss.config.cjs"), content);
+  await import_fs_extra3.default.writeFile((0, import_path2.join)(cwd, "postcss.config.cjs"), content);
 }
 
 // src/ship-files.ts
 init_cjs_shims();
-var import_logger10 = require("@pandacss/logger");
+var import_logger11 = require("@pandacss/logger");
 var import_parser3 = require("@pandacss/parser");
 var import_promises3 = require("fs/promises");
 var path = __toESM(require("path"));
@@ -3008,30 +3085,29 @@ async function shipFiles(ctx, outfile) {
     const result = ctx.project.parseSourceFile(file);
     if (!result || result.isEmpty())
       return;
-    const css = ctx.getParserCss(result);
-    if (!css)
+    const css2 = ctx.getParserCss(result);
+    if (!css2)
       return;
     extractResult.merge(result);
     filesWithCss.push(path.relative(ctx.config.cwd, file));
   });
-  import_logger10.logger.info("cli", `Found ${import_logger10.colors.bold(`${filesWithCss.length}/${files.length}`)} files using Panda`);
+  import_logger11.logger.info("cli", `Found ${import_logger11.colors.bold(`${filesWithCss.length}/${files.length}`)} files using Panda`);
   const minify = ctx.config.minify;
-  import_logger10.logger.info("cli", `Writing ${minify ? "[min] " : " "}${import_logger10.colors.bold(outfile)}`);
+  import_logger11.logger.info("cli", `Writing ${minify ? "[min] " : " "}${import_logger11.colors.bold(outfile)}`);
   const output = JSON.stringify(extractResult.toJSON(), null, minify ? 0 : 2);
   const dirname2 = ctx.runtime.path.dirname(outfile);
   ctx.runtime.fs.ensureDirSync(dirname2);
   await (0, import_promises3.writeFile)(outfile, output);
-  import_logger10.logger.info("cli", "Done!");
+  import_logger11.logger.info("cli", "Done!");
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Builder,
+  PandaContext,
   analyzeTokens,
   bundleCss,
   bundleMinimalFilesCss,
-  createContext,
   debugFiles,
-  emitArtfifactsAndCssChunks,
   emitArtifacts,
   execCommand,
   extractFile,