@pandacss/node 0.0.0-dev-20230513102701 → 0.0.0-dev-20230515185702

package/dist/index.d.ts

@@ -176,20 +176,27 @@ declare function analyzeTokens(ctx: PandaContext, options?: {
 };
 declare const writeAnalyzeJSON: (fileName: string, result: ReturnType<typeof analyzeTokens>, ctx: PandaContext) => Promise<void>;
 
+type ConfigDepsResult = {
+    modifiedMap: Map<string, number>;
+    isModified: boolean;
+};
 declare class Builder {
     /**
-     * Map of file path to modified time
-     */
-    fileModifiedMap: Map<string, number>;
-    /**
-     * Map of file path to css
+     * The current panda context
      */
-    fileCssMap: Map<string, string>;
     context: PandaContext | undefined;
-    configChanged: boolean;
-    writeFile(file: string, css: string): void;
+    writeFileCss(file: string, css: string): void;
+    checkConfigDeps(configPath: string, deps: Set<string>): ConfigDepsResult;
+    getConfigPath(): string;
     setup(): Promise<void>;
-    ensure(): PandaContext;
+    setupContext(options: {
+        configPath: string;
+        depsModifiedMap: Map<string, number>;
+    }): Promise<void>;
+    getContextOrThrow(): PandaContext;
+    get fileModifiedMap(): Map<string, number>;
+    get fileCssMap(): Map<string, string>;
+    extractFile(ctx: PandaContext, file: string): Promise<string | undefined>;
     extract(): Promise<void>;
     toString(): string;
     isValidRoot(root: Root): boolean;

package/dist/index.js

@@ -885,10 +885,9 @@ init_cjs_shims();
 var import_core2 = require("@pandacss/core");
 var import_error = require("@pandacss/error");
 var import_logger4 = require("@pandacss/logger");
-var import_shared = require("@pandacss/shared");
-var import_fs = require("fs");
+var import_fs2 = require("fs");
 var import_fs_extra2 = require("fs-extra");
-var import_path3 = require("path");
+var import_path4 = require("path");
 
 // src/config.ts
 init_cjs_shims();
@@ -904,18 +903,18 @@ var import_lil_fp = require("lil-fp");
 // src/chunk-engine.ts
 init_cjs_shims();
 var import_core = require("@pandacss/core");
-var getChunkEngine = ({ paths, config, runtime: { path: path2, fs: fs2 } }) => ({
-  dir: path2.join(...paths.chunk),
+var getChunkEngine = ({ paths, config, runtime: { path: path3, fs: fs3 } }) => ({
+  dir: path3.join(...paths.chunk),
   readFile(file) {
-    const fileName = path2.join(...paths.chunk, this.format(file));
-    return fs2.existsSync(fileName) ? fs2.readFileSync(fileName) : "";
+    const fileName = path3.join(...paths.chunk, this.format(file));
+    return fs3.existsSync(fileName) ? fs3.readFileSync(fileName) : "";
   },
   getFiles() {
-    const files = fs2.existsSync(this.dir) ? fs2.readDirSync(this.dir) : [];
-    return files.map((file) => fs2.readFileSync(path2.join(this.dir, file)));
+    const files = fs3.existsSync(this.dir) ? fs3.readDirSync(this.dir) : [];
+    return files.map((file) => fs3.readFileSync(path3.join(this.dir, file)));
   },
   format(file) {
-    return path2.relative(config.cwd, file).replaceAll(path2.sep, "__").replace(path2.extname(file), ".css");
+    return path3.relative(config.cwd, file).replaceAll(path3.sep, "__").replace(path3.extname(file), ".css");
   },
   getArtifact(file, css) {
     const fileName = this.format(file);
@@ -926,10 +925,10 @@ var getChunkEngine = ({ paths, config, runtime: { path: path2, fs: fs2 } }) => (
     };
   },
   rm(file) {
-    return fs2.rmFileSync(path2.join(...paths.chunk, this.format(file)));
+    return fs3.rmFileSync(path3.join(...paths.chunk, this.format(file)));
   },
   empty() {
-    return fs2.rmDirSync(this.dir);
+    return fs3.rmDirSync(this.dir);
   },
   get glob() {
     return [`${this.dir}/**/*.css`];
@@ -976,8 +975,8 @@ var nodeRuntime = {
     readDirSync: import_fs_extra.readdirSync,
     rmDirSync: import_fs_extra.emptyDirSync,
     rmFileSync: import_fs_extra.removeSync,
-    ensureDirSync(path2) {
-      return (0, import_fs_extra.ensureDirSync)(path2);
+    ensureDirSync(path3) {
+      return (0, import_fs_extra.ensureDirSync)(path3);
     },
     watch(options) {
       const { include, exclude, cwd, poll } = options;
@@ -1008,20 +1007,20 @@ process.on("uncaughtException", (reason) => {
 
 // src/output-engine.ts
 init_cjs_shims();
-var getOutputEngine = ({ paths, runtime: { path: path2, fs: fs2 } }) => ({
+var getOutputEngine = ({ paths, runtime: { path: path3, fs: fs3 } }) => ({
   empty() {
-    fs2.rmDirSync(path2.join(...paths.root));
+    fs3.rmDirSync(path3.join(...paths.root));
   },
   async write(output) {
     if (!output)
       return;
     const { dir = paths.root, files } = output;
-    fs2.ensureDirSync(path2.join(...dir));
+    fs3.ensureDirSync(path3.join(...dir));
     return Promise.all(
       files.map(async ({ file, code }) => {
-        const absPath = path2.join(...dir, file);
+        const absPath = path3.join(...dir, file);
         if (code) {
-          return fs2.writeFile(absPath, code);
+          return fs3.writeFile(absPath, code);
         }
       })
     );
@@ -1036,14 +1035,14 @@ var createContext = (conf) => (0, import_lil_fp.pipe)(
   (0, import_lil_fp.tap)(({ config, runtime }) => {
     config.cwd ||= runtime.cwd();
   }),
-  import_lil_fp.Obj.bind("getFiles", ({ config, runtime: { fs: fs2 } }) => () => {
+  import_lil_fp.Obj.bind("getFiles", ({ config, runtime: { fs: fs3 } }) => () => {
     const { include, exclude, cwd } = config;
-    return fs2.glob({ include, exclude, cwd });
+    return fs3.glob({ include, exclude, cwd });
   }),
-  import_lil_fp.Obj.bind("project", ({ getFiles, runtime: { fs: fs2 }, parserOptions }) => {
+  import_lil_fp.Obj.bind("project", ({ getFiles, runtime: { fs: fs3 }, parserOptions }) => {
     return (0, import_parser.createProject)({
       getFiles,
-      readFile: fs2.readFileSync,
+      readFile: fs3.readFileSync,
       parserOptions
     });
   }),
@@ -2376,8 +2375,8 @@ async function bundleChunks(ctx) {
   });
 }
 async function writeFileChunk(ctx, file) {
-  const { path: path2 } = ctx.runtime;
-  import_logger3.logger.debug("chunk:write", `File: ${path2.relative(ctx.config.cwd, file)}`);
+  const { path: path3 } = ctx.runtime;
+  import_logger3.logger.debug("chunk:write", `File: ${path3.relative(ctx.config.cwd, file)}`);
   const css = extractFile(ctx, file);
   if (!css)
     return;
@@ -2386,11 +2385,11 @@ async function writeFileChunk(ctx, file) {
 }
 function extractFile(ctx, file) {
   const {
-    runtime: { path: path2 },
+    runtime: { path: path3 },
     config: { cwd }
   } = ctx;
   return (0, import_lil_fp2.pipe)(
-    { file: path2.abs(cwd, file) },
+    { file: path3.abs(cwd, file) },
     (0, import_lil_fp2.tap)(() => import_logger3.logger.debug("file:extract", file)),
     import_lil_fp2.Obj.bind("measure", () => import_logger3.logger.time.debug(`Extracted ${file}`)),
     import_lil_fp2.Obj.bind(
@@ -2432,10 +2431,62 @@ async function extractCss(ctx) {
   return ctx.messages.buildComplete(ctx.getFiles().length);
 }
 
+// src/get-mod-deps.ts
+init_cjs_shims();
+var import_fs = __toESM(require("fs"));
+var import_path2 = __toESM(require("path"));
+var jsExtensions = [".js", ".cjs", ".mjs"];
+var jsResolutionOrder = ["", ".js", ".cjs", ".mjs", ".ts", ".cts", ".mts", ".jsx", ".tsx"];
+var tsResolutionOrder = ["", ".ts", ".cts", ".mts", ".tsx", ".js", ".cjs", ".mjs", ".jsx"];
+function resolveWithExtension(file, extensions) {
+  for (const ext of extensions) {
+    const full = `${file}${ext}`;
+    if (import_fs.default.existsSync(full) && import_fs.default.statSync(full).isFile()) {
+      return full;
+    }
+  }
+  for (const ext of extensions) {
+    const full = `${file}/index${ext}`;
+    if (import_fs.default.existsSync(full)) {
+      return full;
+    }
+  }
+  return null;
+}
+function* getDeps(filename, base, seen, ext = import_path2.default.extname(filename)) {
+  const absoluteFile = resolveWithExtension(
+    import_path2.default.resolve(base, filename),
+    jsExtensions.includes(ext) ? jsResolutionOrder : tsResolutionOrder
+  );
+  if (absoluteFile === null)
+    return;
+  if (seen.has(absoluteFile))
+    return;
+  seen.add(absoluteFile);
+  yield absoluteFile;
+  base = import_path2.default.dirname(absoluteFile);
+  ext = import_path2.default.extname(absoluteFile);
+  const contents = import_fs.default.readFileSync(absoluteFile, "utf-8");
+  for (const match2 of [
+    ...contents.matchAll(/import[\s\S]*?['"](.{3,}?)['"]/gi),
+    ...contents.matchAll(/import[\s\S]*from[\s\S]*?['"](.{3,}?)['"]/gi),
+    ...contents.matchAll(/require\(['"`](.+)['"`]\)/gi)
+  ]) {
+    if (!match2[1].startsWith("."))
+      continue;
+    yield* getDeps(match2[1], base, seen, ext);
+  }
+}
+function getModuleDependencies(filePath) {
+  if (filePath === null)
+    return /* @__PURE__ */ new Set();
+  return new Set(getDeps(filePath, import_path2.default.dirname(filePath), /* @__PURE__ */ new Set()));
+}
+
 // src/parse-dependency.ts
 init_cjs_shims();
 var import_is_glob = __toESM(require("is-glob"));
-var import_path2 = require("path");
+var import_path3 = require("path");
 
 // src/parse-glob.ts
 init_cjs_shims();
@@ -2466,9 +2517,9 @@ function parseDependency(fileOrGlob) {
   let message = null;
   if ((0, import_is_glob.default)(fileOrGlob)) {
     const { base, glob: glob2 } = parseGlob(fileOrGlob);
-    message = { type: "dir-dependency", dir: (0, import_path2.resolve)(base), glob: glob2 };
+    message = { type: "dir-dependency", dir: (0, import_path3.resolve)(base), glob: glob2 };
   } else {
-    message = { type: "dependency", file: (0, import_path2.resolve)(fileOrGlob) };
+    message = { type: "dependency", file: (0, import_path3.resolve)(fileOrGlob) };
   }
   if (message.type === "dir-dependency" && process.env.ROLLUP_WATCH === "true") {
     message = { type: "dependency", file: message.dir };
@@ -2477,78 +2528,120 @@ function parseDependency(fileOrGlob) {
 }
 
 // src/builder.ts
-var contextCache = /* @__PURE__ */ new Map();
-var builderCache = /* @__PURE__ */ new WeakMap();
-function getConfigHash() {
-  const file = findConfig();
-  if (!file) {
-    throw new import_error.ConfigNotFoundError();
-  }
-  return (0, import_shared.toHash)((0, import_fs.readFileSync)(file, "utf-8"));
-}
+var configCache = /* @__PURE__ */ new Map();
+var contentFilesCache = /* @__PURE__ */ new WeakMap();
 var setupCount = 0;
 var Builder = class {
   /**
-   * Map of file path to modified time
-   */
-  fileModifiedMap = /* @__PURE__ */ new Map();
-  /**
-   * Map of file path to css
+   * The current panda context
    */
-  fileCssMap = /* @__PURE__ */ new Map();
   context;
-  configChanged = true;
-  writeFile(file, css) {
+  writeFileCss(file, css) {
     const oldCss = this.fileCssMap?.get(file) ?? "";
     const newCss = (0, import_core2.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 time = (0, import_fs_extra2.statSync)(file).mtimeMs;
+      newModified.set(file, time);
+      if (!prevModified || !prevModified.has(file) || time > prevModified.get(file)) {
+        modified = true;
+      }
+    }
+    if (!modified) {
+      return { isModified: false, modifiedMap: prevModified };
+    }
+    for (const file of deps) {
+      delete require.cache[file];
+    }
+    if (setupCount > 0) {
+      import_logger4.logger.info("postcss", "\u2699\uFE0F Config changed, reloading");
+    }
+    return { isModified: true, modifiedMap: newModified };
+  }
+  getConfigPath() {
+    const configPath = findConfig();
+    if (!configPath) {
+      throw new import_error.ConfigNotFoundError();
+    }
+    return configPath;
+  }
   async setup() {
-    const configHash = getConfigHash();
-    const cachedContext = contextCache.get(configHash);
-    if (cachedContext) {
-      cachedContext.project.reloadSourceFiles();
-      this.context = cachedContext;
-      this.fileCssMap = builderCache.get(cachedContext).fileCssMap;
-      this.fileModifiedMap = builderCache.get(cachedContext).fileModifiedMap;
+    const configPath = this.getConfigPath();
+    const configDeps = getModuleDependencies(configPath);
+    const deps = this.checkConfigDeps(configPath, configDeps);
+    if (deps.isModified) {
+      return this.setupContext({
+        configPath,
+        depsModifiedMap: deps.modifiedMap
+      });
+    }
+    const cache = configCache.get(configPath);
+    if (cache) {
+      this.context = cache.context;
+      this.context.project.reloadSourceFiles();
     } else {
-      this.context = await loadConfigAndCreateContext();
-      if (setupCount > 0) {
-        emitArtifacts(this.context);
-      }
-      this.fileCssMap = /* @__PURE__ */ new Map();
-      this.fileModifiedMap = /* @__PURE__ */ new Map();
-      contextCache.set(configHash, this.context);
-      builderCache.set(this.context, { fileCssMap: this.fileCssMap, fileModifiedMap: this.fileModifiedMap });
+      await this.setupContext({
+        configPath,
+        depsModifiedMap: deps.modifiedMap
+      });
     }
     setupCount++;
   }
-  ensure() {
-    if (!this.context)
+  async setupContext(options) {
+    const { configPath, depsModifiedMap } = options;
+    this.context = await loadConfigAndCreateContext({ configPath });
+    if (setupCount > 0) {
+      emitArtifacts(this.context);
+    }
+    configCache.set(configPath, {
+      context: this.context,
+      deps: new Set(this.context.configDependencies),
+      depsModifiedMap
+    });
+    contentFilesCache.set(this.context, {
+      fileCssMap: /* @__PURE__ */ new Map(),
+      fileModifiedMap: /* @__PURE__ */ new Map()
+    });
+  }
+  getContextOrThrow() {
+    if (!this.context) {
       throw new Error("context not loaded");
+    }
     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;
+  }
+  async extractFile(ctx, file) {
+    const mtime = (0, import_fs2.existsSync)(file) ? (0, import_fs_extra2.statSync)(file).mtimeMs : -Infinity;
+    const isUnchanged = this.fileModifiedMap.has(file) && mtime === this.fileModifiedMap.get(file);
+    if (isUnchanged)
+      return;
+    const css = extractFile(ctx, file);
+    if (!css)
+      return;
+    this.fileModifiedMap.set(file, mtime);
+    this.writeFileCss(file, css);
+    return css;
+  }
   async extract() {
-    const ctx = this.ensure();
+    const ctx = this.getContextOrThrow();
     const done = import_logger4.logger.time.info("Extracted in");
-    await Promise.all(
-      ctx.getFiles().map(async (file) => {
-        const mtime = (0, import_fs.existsSync)(file) ? (0, import_fs_extra2.statSync)(file).mtimeMs : -Infinity;
-        const isUnchanged = this.fileModifiedMap.has(file) && mtime === this.fileModifiedMap.get(file);
-        if (isUnchanged)
-          return;
-        const css = extractFile(ctx, file);
-        if (!css)
-          return;
-        this.fileModifiedMap.set(file, mtime);
-        this.writeFile(file, css);
-        return css;
-      })
-    );
+    await Promise.all(ctx.getFiles().map((file) => this.extractFile(ctx, file)));
     done();
   }
   toString() {
-    const ctx = this.ensure();
+    const ctx = this.getContextOrThrow();
     return ctx.getCss({
       files: Array.from(this.fileCssMap.values()),
       resolve: true
@@ -2576,7 +2669,7 @@ var Builder = class {
     );
   }
   registerDependency(fn) {
-    const ctx = this.ensure();
+    const ctx = this.getContextOrThrow();
     for (const fileOrGlob of ctx.config.include) {
       const dependency = parseDependency(fileOrGlob);
       if (dependency) {
@@ -2584,7 +2677,7 @@ var Builder = class {
       }
     }
     for (const file of ctx.dependencies) {
-      fn({ type: "dependency", file: (0, import_path3.resolve)(file) });
+      fn({ type: "dependency", file: (0, import_path4.resolve)(file) });
     }
   }
 };
@@ -2593,7 +2686,7 @@ var Builder = class {
 init_cjs_shims();
 var import_logger5 = require("@pandacss/logger");
 var import_promises2 = require("fs/promises");
-var path = __toESM(require("path"));
+var path2 = __toESM(require("path"));
 async function debugFiles(ctx, options) {
   const files = ctx.getFiles();
   const measureTotal = import_logger5.logger.time.debug(`Done parsing ${files.length} files`);
@@ -2633,10 +2726,10 @@ async function debugFiles(ctx, options) {
       }
       if (options.outdir) {
         filesWithCss.push(file);
-        const parsedPath = path.parse(file);
-        const relative3 = path.relative(ctx.config.cwd, parsedPath.dir);
-        const astJsonPath = `${relative3}/${parsedPath.name}.ast.json`.replaceAll(path.sep, "__");
-        const cssPath = `${relative3}/${parsedPath.name}.css`.replaceAll(path.sep, "__");
+        const parsedPath = path2.parse(file);
+        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_logger5.logger.info("cli", `Writing ${import_logger5.colors.bold(`${options.outdir}/${astJsonPath}`)}`);
         import_logger5.logger.info("cli", `Writing ${import_logger5.colors.bold(`${options.outdir}/${cssPath}`)}`);
         return Promise.all([
@@ -2704,22 +2797,22 @@ async function generate(config, configPath) {
   const ctx = ctxRef.current;
   await build(ctx);
   const {
-    runtime: { fs: fs2, path: path2 },
+    runtime: { fs: fs3, path: path3 },
     dependencies,
     config: { cwd }
   } = ctx;
   if (ctx.config.watch) {
-    const configWatcher = fs2.watch({ include: dependencies });
+    const configWatcher = fs3.watch({ include: dependencies });
     configWatcher.on("change", async () => {
       import_logger7.logger.info("config:change", "Config changed, restarting...");
       await loadCtx();
       return build(ctxRef.current);
     });
-    const contentWatcher = fs2.watch(ctx.config);
+    const contentWatcher = fs3.watch(ctx.config);
     contentWatcher.on("all", async (event, file) => {
       import_logger7.logger.info(`file:${event}`, file);
       (0, import_ts_pattern.match)(event).with("unlink", () => {
-        ctx.project.removeSourceFile(path2.abs(cwd, file));
+        ctx.project.removeSourceFile(path3.abs(cwd, file));
         ctx.chunks.rm(file);
       }).with("change", async () => {
         ctx.project.reloadSourceFile(file);
@@ -2737,7 +2830,7 @@ async function generate(config, configPath) {
 
 // src/git-ignore.ts
 init_cjs_shims();
-var import_fs2 = require("fs");
+var import_fs3 = require("fs");
 var import_look_it_up2 = require("look-it-up");
 var import_outdent = __toESM(require("outdent"));
 function setupGitIgnore({ config: { outdir, gitignore = true } }) {
@@ -2749,11 +2842,11 @@ function setupGitIgnore({ config: { outdir, gitignore = true } }) {
   `;
   const file = (0, import_look_it_up2.lookItUpSync)(".gitignore");
   if (!file) {
-    return (0, import_fs2.writeFileSync)(".gitignore", txt);
+    return (0, import_fs3.writeFileSync)(".gitignore", txt);
   }
-  const content = (0, import_fs2.readFileSync)(file, "utf-8");
+  const content = (0, import_fs3.readFileSync)(file, "utf-8");
   if (!content.includes(outdir)) {
-    (0, import_fs2.appendFileSync)(file, txt);
+    (0, import_fs3.appendFileSync)(file, txt);
   }
 }
 
@@ -2764,7 +2857,7 @@ var import_generator2 = require("@pandacss/generator");
 var import_fs_extra3 = require("fs-extra");
 var import_look_it_up3 = require("look-it-up");
 var import_outdent2 = require("outdent");
-var import_path4 = require("path");
+var import_path5 = require("path");
 var import_preferred_pm2 = __toESM(require("preferred-pm"));
 async function setupConfig(cwd, { force }) {
   const configFile = findConfig();
@@ -2794,7 +2887,7 @@ async function setupConfig(cwd, { force }) {
         outdir: "styled-system",
        })
     `;
-    await (0, import_fs_extra3.writeFile)((0, import_path4.join)(cwd, file), content);
+    await (0, import_fs_extra3.writeFile)((0, import_path5.join)(cwd, file), content);
     import_logger8.logger.log(import_generator2.messages.thankYou());
   }
 }
@@ -2807,7 +2900,7 @@ async function setupPostcss(cwd) {
     },
   }
   `;
-  await (0, import_fs_extra3.writeFile)((0, import_path4.join)(cwd, "postcss.config.cjs"), content);
+  await (0, import_fs_extra3.writeFile)((0, import_path5.join)(cwd, "postcss.config.cjs"), content);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -865,8 +865,7 @@ init_esm_shims();
 import { discardDuplicate, mergeCss as mergeCss2 } from "@pandacss/core";
 import { ConfigNotFoundError } from "@pandacss/error";
 import { logger as logger4 } from "@pandacss/logger";
-import { toHash } from "@pandacss/shared";
-import { existsSync as existsSync2, readFileSync as readFileSync2 } from "fs";
+import { existsSync as existsSync2 } from "fs";
 import { statSync } from "fs-extra";
 import { resolve as resolve2 } from "path";
 
@@ -884,18 +883,18 @@ import { Obj, pipe, tap } from "lil-fp";
 // src/chunk-engine.ts
 init_esm_shims();
 import { mergeCss } from "@pandacss/core";
-var getChunkEngine = ({ paths, config, runtime: { path: path2, fs } }) => ({
-  dir: path2.join(...paths.chunk),
+var getChunkEngine = ({ paths, config, runtime: { path: path3, fs: fs2 } }) => ({
+  dir: path3.join(...paths.chunk),
   readFile(file) {
-    const fileName = path2.join(...paths.chunk, this.format(file));
-    return fs.existsSync(fileName) ? fs.readFileSync(fileName) : "";
+    const fileName = path3.join(...paths.chunk, this.format(file));
+    return fs2.existsSync(fileName) ? fs2.readFileSync(fileName) : "";
   },
   getFiles() {
-    const files = fs.existsSync(this.dir) ? fs.readDirSync(this.dir) : [];
-    return files.map((file) => fs.readFileSync(path2.join(this.dir, file)));
+    const files = fs2.existsSync(this.dir) ? fs2.readDirSync(this.dir) : [];
+    return files.map((file) => fs2.readFileSync(path3.join(this.dir, file)));
   },
   format(file) {
-    return path2.relative(config.cwd, file).replaceAll(path2.sep, "__").replace(path2.extname(file), ".css");
+    return path3.relative(config.cwd, file).replaceAll(path3.sep, "__").replace(path3.extname(file), ".css");
   },
   getArtifact(file, css) {
     const fileName = this.format(file);
@@ -906,10 +905,10 @@ var getChunkEngine = ({ paths, config, runtime: { path: path2, fs } }) => ({
     };
   },
   rm(file) {
-    return fs.rmFileSync(path2.join(...paths.chunk, this.format(file)));
+    return fs2.rmFileSync(path3.join(...paths.chunk, this.format(file)));
   },
   empty() {
-    return fs.rmDirSync(this.dir);
+    return fs2.rmDirSync(this.dir);
   },
   get glob() {
     return [`${this.dir}/**/*.css`];
@@ -965,8 +964,8 @@ var nodeRuntime = {
     readDirSync: readdirSync,
     rmDirSync: emptyDirSync,
     rmFileSync: removeSync,
-    ensureDirSync(path2) {
-      return ensureDirSync(path2);
+    ensureDirSync(path3) {
+      return ensureDirSync(path3);
     },
     watch(options) {
       const { include, exclude, cwd, poll } = options;
@@ -997,20 +996,20 @@ process.on("uncaughtException", (reason) => {
 
 // src/output-engine.ts
 init_esm_shims();
-var getOutputEngine = ({ paths, runtime: { path: path2, fs } }) => ({
+var getOutputEngine = ({ paths, runtime: { path: path3, fs: fs2 } }) => ({
   empty() {
-    fs.rmDirSync(path2.join(...paths.root));
+    fs2.rmDirSync(path3.join(...paths.root));
   },
   async write(output) {
     if (!output)
       return;
     const { dir = paths.root, files } = output;
-    fs.ensureDirSync(path2.join(...dir));
+    fs2.ensureDirSync(path3.join(...dir));
     return Promise.all(
       files.map(async ({ file, code }) => {
-        const absPath = path2.join(...dir, file);
+        const absPath = path3.join(...dir, file);
         if (code) {
-          return fs.writeFile(absPath, code);
+          return fs2.writeFile(absPath, code);
         }
       })
     );
@@ -1025,14 +1024,14 @@ var createContext = (conf) => pipe(
   tap(({ config, runtime }) => {
     config.cwd ||= runtime.cwd();
   }),
-  Obj.bind("getFiles", ({ config, runtime: { fs } }) => () => {
+  Obj.bind("getFiles", ({ config, runtime: { fs: fs2 } }) => () => {
     const { include, exclude, cwd } = config;
-    return fs.glob({ include, exclude, cwd });
+    return fs2.glob({ include, exclude, cwd });
   }),
-  Obj.bind("project", ({ getFiles, runtime: { fs }, parserOptions }) => {
+  Obj.bind("project", ({ getFiles, runtime: { fs: fs2 }, parserOptions }) => {
     return createProject({
       getFiles,
-      readFile: fs.readFileSync,
+      readFile: fs2.readFileSync,
       parserOptions
     });
   }),
@@ -2365,8 +2364,8 @@ async function bundleChunks(ctx) {
   });
 }
 async function writeFileChunk(ctx, file) {
-  const { path: path2 } = ctx.runtime;
-  logger3.debug("chunk:write", `File: ${path2.relative(ctx.config.cwd, file)}`);
+  const { path: path3 } = ctx.runtime;
+  logger3.debug("chunk:write", `File: ${path3.relative(ctx.config.cwd, file)}`);
   const css = extractFile(ctx, file);
   if (!css)
     return;
@@ -2375,11 +2374,11 @@ async function writeFileChunk(ctx, file) {
 }
 function extractFile(ctx, file) {
   const {
-    runtime: { path: path2 },
+    runtime: { path: path3 },
     config: { cwd }
   } = ctx;
   return pipe2(
-    { file: path2.abs(cwd, file) },
+    { file: path3.abs(cwd, file) },
     tap2(() => logger3.debug("file:extract", file)),
     Obj2.bind("measure", () => logger3.time.debug(`Extracted ${file}`)),
     Obj2.bind(
@@ -2421,6 +2420,58 @@ async function extractCss(ctx) {
   return ctx.messages.buildComplete(ctx.getFiles().length);
 }
 
+// src/get-mod-deps.ts
+init_esm_shims();
+import fs from "fs";
+import path from "path";
+var jsExtensions = [".js", ".cjs", ".mjs"];
+var jsResolutionOrder = ["", ".js", ".cjs", ".mjs", ".ts", ".cts", ".mts", ".jsx", ".tsx"];
+var tsResolutionOrder = ["", ".ts", ".cts", ".mts", ".tsx", ".js", ".cjs", ".mjs", ".jsx"];
+function resolveWithExtension(file, extensions) {
+  for (const ext of extensions) {
+    const full = `${file}${ext}`;
+    if (fs.existsSync(full) && fs.statSync(full).isFile()) {
+      return full;
+    }
+  }
+  for (const ext of extensions) {
+    const full = `${file}/index${ext}`;
+    if (fs.existsSync(full)) {
+      return full;
+    }
+  }
+  return null;
+}
+function* getDeps(filename, base, seen, ext = path.extname(filename)) {
+  const absoluteFile = resolveWithExtension(
+    path.resolve(base, filename),
+    jsExtensions.includes(ext) ? jsResolutionOrder : tsResolutionOrder
+  );
+  if (absoluteFile === null)
+    return;
+  if (seen.has(absoluteFile))
+    return;
+  seen.add(absoluteFile);
+  yield absoluteFile;
+  base = path.dirname(absoluteFile);
+  ext = path.extname(absoluteFile);
+  const contents = fs.readFileSync(absoluteFile, "utf-8");
+  for (const match2 of [
+    ...contents.matchAll(/import[\s\S]*?['"](.{3,}?)['"]/gi),
+    ...contents.matchAll(/import[\s\S]*from[\s\S]*?['"](.{3,}?)['"]/gi),
+    ...contents.matchAll(/require\(['"`](.+)['"`]\)/gi)
+  ]) {
+    if (!match2[1].startsWith("."))
+      continue;
+    yield* getDeps(match2[1], base, seen, ext);
+  }
+}
+function getModuleDependencies(filePath) {
+  if (filePath === null)
+    return /* @__PURE__ */ new Set();
+  return new Set(getDeps(filePath, path.dirname(filePath), /* @__PURE__ */ new Set()));
+}
+
 // src/parse-dependency.ts
 init_esm_shims();
 import isGlob from "is-glob";
@@ -2466,78 +2517,120 @@ function parseDependency(fileOrGlob) {
 }
 
 // src/builder.ts
-var contextCache = /* @__PURE__ */ new Map();
-var builderCache = /* @__PURE__ */ new WeakMap();
-function getConfigHash() {
-  const file = findConfig();
-  if (!file) {
-    throw new ConfigNotFoundError();
-  }
-  return toHash(readFileSync2(file, "utf-8"));
-}
+var configCache = /* @__PURE__ */ new Map();
+var contentFilesCache = /* @__PURE__ */ new WeakMap();
 var setupCount = 0;
 var Builder = class {
   /**
-   * Map of file path to modified time
+   * The current panda context
    */
-  fileModifiedMap = /* @__PURE__ */ new Map();
-  /**
-   * Map of file path to css
-   */
-  fileCssMap = /* @__PURE__ */ new Map();
   context;
-  configChanged = true;
-  writeFile(file, css) {
+  writeFileCss(file, css) {
     const oldCss = this.fileCssMap?.get(file) ?? "";
     const newCss = mergeCss2(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 time = statSync(file).mtimeMs;
+      newModified.set(file, time);
+      if (!prevModified || !prevModified.has(file) || time > prevModified.get(file)) {
+        modified = true;
+      }
+    }
+    if (!modified) {
+      return { isModified: false, modifiedMap: prevModified };
+    }
+    for (const file of deps) {
+      delete __require.cache[file];
+    }
+    if (setupCount > 0) {
+      logger4.info("postcss", "\u2699\uFE0F Config changed, reloading");
+    }
+    return { isModified: true, modifiedMap: newModified };
+  }
+  getConfigPath() {
+    const configPath = findConfig();
+    if (!configPath) {
+      throw new ConfigNotFoundError();
+    }
+    return configPath;
+  }
   async setup() {
-    const configHash = getConfigHash();
-    const cachedContext = contextCache.get(configHash);
-    if (cachedContext) {
-      cachedContext.project.reloadSourceFiles();
-      this.context = cachedContext;
-      this.fileCssMap = builderCache.get(cachedContext).fileCssMap;
-      this.fileModifiedMap = builderCache.get(cachedContext).fileModifiedMap;
+    const configPath = this.getConfigPath();
+    const configDeps = getModuleDependencies(configPath);
+    const deps = this.checkConfigDeps(configPath, configDeps);
+    if (deps.isModified) {
+      return this.setupContext({
+        configPath,
+        depsModifiedMap: deps.modifiedMap
+      });
+    }
+    const cache = configCache.get(configPath);
+    if (cache) {
+      this.context = cache.context;
+      this.context.project.reloadSourceFiles();
     } else {
-      this.context = await loadConfigAndCreateContext();
-      if (setupCount > 0) {
-        emitArtifacts(this.context);
-      }
-      this.fileCssMap = /* @__PURE__ */ new Map();
-      this.fileModifiedMap = /* @__PURE__ */ new Map();
-      contextCache.set(configHash, this.context);
-      builderCache.set(this.context, { fileCssMap: this.fileCssMap, fileModifiedMap: this.fileModifiedMap });
+      await this.setupContext({
+        configPath,
+        depsModifiedMap: deps.modifiedMap
+      });
     }
     setupCount++;
   }
-  ensure() {
-    if (!this.context)
+  async setupContext(options) {
+    const { configPath, depsModifiedMap } = options;
+    this.context = await loadConfigAndCreateContext({ configPath });
+    if (setupCount > 0) {
+      emitArtifacts(this.context);
+    }
+    configCache.set(configPath, {
+      context: this.context,
+      deps: new Set(this.context.configDependencies),
+      depsModifiedMap
+    });
+    contentFilesCache.set(this.context, {
+      fileCssMap: /* @__PURE__ */ new Map(),
+      fileModifiedMap: /* @__PURE__ */ new Map()
+    });
+  }
+  getContextOrThrow() {
+    if (!this.context) {
       throw new Error("context not loaded");
+    }
     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;
+  }
+  async extractFile(ctx, file) {
+    const mtime = existsSync2(file) ? statSync(file).mtimeMs : -Infinity;
+    const isUnchanged = this.fileModifiedMap.has(file) && mtime === this.fileModifiedMap.get(file);
+    if (isUnchanged)
+      return;
+    const css = extractFile(ctx, file);
+    if (!css)
+      return;
+    this.fileModifiedMap.set(file, mtime);
+    this.writeFileCss(file, css);
+    return css;
+  }
   async extract() {
-    const ctx = this.ensure();
+    const ctx = this.getContextOrThrow();
     const done = logger4.time.info("Extracted in");
-    await Promise.all(
-      ctx.getFiles().map(async (file) => {
-        const mtime = existsSync2(file) ? statSync(file).mtimeMs : -Infinity;
-        const isUnchanged = this.fileModifiedMap.has(file) && mtime === this.fileModifiedMap.get(file);
-        if (isUnchanged)
-          return;
-        const css = extractFile(ctx, file);
-        if (!css)
-          return;
-        this.fileModifiedMap.set(file, mtime);
-        this.writeFile(file, css);
-        return css;
-      })
-    );
+    await Promise.all(ctx.getFiles().map((file) => this.extractFile(ctx, file)));
     done();
   }
   toString() {
-    const ctx = this.ensure();
+    const ctx = this.getContextOrThrow();
     return ctx.getCss({
       files: Array.from(this.fileCssMap.values()),
       resolve: true
@@ -2565,7 +2658,7 @@ var Builder = class {
     );
   }
   registerDependency(fn) {
-    const ctx = this.ensure();
+    const ctx = this.getContextOrThrow();
     for (const fileOrGlob of ctx.config.include) {
       const dependency = parseDependency(fileOrGlob);
       if (dependency) {
@@ -2582,7 +2675,7 @@ var Builder = class {
 init_esm_shims();
 import { colors, logger as logger5 } from "@pandacss/logger";
 import { mkdir, writeFile as writeFile3 } from "fs/promises";
-import * as path from "path";
+import * as path2 from "path";
 async function debugFiles(ctx, options) {
   const files = ctx.getFiles();
   const measureTotal = logger5.time.debug(`Done parsing ${files.length} files`);
@@ -2622,10 +2715,10 @@ async function debugFiles(ctx, options) {
       }
       if (options.outdir) {
         filesWithCss.push(file);
-        const parsedPath = path.parse(file);
-        const relative3 = path.relative(ctx.config.cwd, parsedPath.dir);
-        const astJsonPath = `${relative3}/${parsedPath.name}.ast.json`.replaceAll(path.sep, "__");
-        const cssPath = `${relative3}/${parsedPath.name}.css`.replaceAll(path.sep, "__");
+        const parsedPath = path2.parse(file);
+        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, "__");
         logger5.info("cli", `Writing ${colors.bold(`${options.outdir}/${astJsonPath}`)}`);
         logger5.info("cli", `Writing ${colors.bold(`${options.outdir}/${cssPath}`)}`);
         return Promise.all([
@@ -2693,22 +2786,22 @@ async function generate(config, configPath) {
   const ctx = ctxRef.current;
   await build(ctx);
   const {
-    runtime: { fs, path: path2 },
+    runtime: { fs: fs2, path: path3 },
     dependencies,
     config: { cwd }
   } = ctx;
   if (ctx.config.watch) {
-    const configWatcher = fs.watch({ include: dependencies });
+    const configWatcher = fs2.watch({ include: dependencies });
     configWatcher.on("change", async () => {
       logger7.info("config:change", "Config changed, restarting...");
       await loadCtx();
       return build(ctxRef.current);
     });
-    const contentWatcher = fs.watch(ctx.config);
+    const contentWatcher = fs2.watch(ctx.config);
     contentWatcher.on("all", async (event, file) => {
       logger7.info(`file:${event}`, file);
       match(event).with("unlink", () => {
-        ctx.project.removeSourceFile(path2.abs(cwd, file));
+        ctx.project.removeSourceFile(path3.abs(cwd, file));
         ctx.chunks.rm(file);
       }).with("change", async () => {
         ctx.project.reloadSourceFile(file);
@@ -2726,7 +2819,7 @@ async function generate(config, configPath) {
 
 // src/git-ignore.ts
 init_esm_shims();
-import { appendFileSync, readFileSync as readFileSync3, writeFileSync as writeFileSync2 } from "fs";
+import { appendFileSync, readFileSync as readFileSync2, writeFileSync as writeFileSync2 } from "fs";
 import { lookItUpSync as lookItUpSync2 } from "look-it-up";
 import outdent from "outdent";
 function setupGitIgnore({ config: { outdir, gitignore = true } }) {
@@ -2740,7 +2833,7 @@ function setupGitIgnore({ config: { outdir, gitignore = true } }) {
   if (!file) {
     return writeFileSync2(".gitignore", txt);
   }
-  const content = readFileSync3(file, "utf-8");
+  const content = readFileSync2(file, "utf-8");
   if (!content.includes(outdir)) {
     appendFileSync(file, txt);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/node",
-  "version": "0.0.0-dev-20230513102701",
+  "version": "0.0.0-dev-20230515185702",
   "description": "The core css panda library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -33,17 +33,17 @@
     "preferred-pm": "^3.0.3",
     "ts-morph": "18.0.0",
     "ts-pattern": "4.3.0",
-    "@pandacss/config": "0.0.0-dev-20230513102701",
-    "@pandacss/core": "0.0.0-dev-20230513102701",
-    "@pandacss/error": "0.0.0-dev-20230513102701",
-    "@pandacss/generator": "0.0.0-dev-20230513102701",
-    "@pandacss/is-valid-prop": "0.0.0-dev-20230513102701",
-    "@pandacss/logger": "0.0.0-dev-20230513102701",
-    "@pandacss/parser": "0.0.0-dev-20230513102701",
-    "@pandacss/extractor": "0.0.0-dev-20230513102701",
-    "@pandacss/shared": "0.0.0-dev-20230513102701",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230513102701",
-    "@pandacss/types": "0.0.0-dev-20230513102701"
+    "@pandacss/config": "0.0.0-dev-20230515185702",
+    "@pandacss/core": "0.0.0-dev-20230515185702",
+    "@pandacss/error": "0.0.0-dev-20230515185702",
+    "@pandacss/generator": "0.0.0-dev-20230515185702",
+    "@pandacss/is-valid-prop": "0.0.0-dev-20230515185702",
+    "@pandacss/logger": "0.0.0-dev-20230515185702",
+    "@pandacss/parser": "0.0.0-dev-20230515185702",
+    "@pandacss/extractor": "0.0.0-dev-20230515185702",
+    "@pandacss/shared": "0.0.0-dev-20230515185702",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230515185702",
+    "@pandacss/types": "0.0.0-dev-20230515185702"
   },
   "devDependencies": {
     "@types/fs-extra": "11.0.1",
@@ -53,7 +53,7 @@
     "@types/pluralize": "0.0.29",
     "boxen": "^7.1.0",
     "gzip-size": "^7.0.0",
-    "@pandacss/fixture": "0.0.0-dev-20230513102701"
+    "@pandacss/fixture": "0.0.0-dev-20230515185702"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=cjs,esm --shims --dts",