@pandacss/webpack 2.0.0-beta.9 → 2.0.1

package/dist/css-loader.cjs

@@ -23,12 +23,47 @@ __export(css_loader_exports, {
   default: () => pandaCssLoader
 });
 module.exports = __toCommonJS(css_loader_exports);
+var import_compiler_shared = require("@pandacss/compiler-shared");
 function pandaCssLoader(source) {
   const driver = this.getOptions().getDriver();
   if (!driver || !driver.compiler.hasLayerDeclaration(source)) return source;
-  for (const file of driver.scan()) this.addDependency(file);
-  if (driver.configPath) this.addDependency(driver.configPath);
-  const { css } = driver.cssgen({ emitLayerDeclaration: false });
-  return `${source}
-${css}`;
+  addPandaDependencies(this, driver);
+  warnDiagnostics(this, driver.designSystemDiagnostics, "while loading the design system");
+  const polyfill = driver.config.polyfill === true;
+  const output = driver.cssgen({ emitLayerDeclaration: false, polyfill });
+  warnDiagnostics(this, output.diagnostics, "while compiling the stylesheet");
+  const entry = polyfill ? driver.compiler.stripLayerOrderStatements(source) : source;
+  return `${entry}
+${output.css}`;
+}
+function addPandaDependencies(loader, driver) {
+  const seen = /* @__PURE__ */ new Set();
+  const watch = (file) => {
+    if (seen.has(file)) return;
+    seen.add(file);
+    loader.addDependency(file);
+  };
+  for (const file of driver.scan()) watch(file);
+  for (const dep of driver.watchTargets().config) {
+    watch(driver.resolvePath(dep));
+  }
+  if (driver.configPath) {
+    watch(driver.configPath);
+  }
+  for (const target of driver.designSystemWatchTargets?.() ?? []) {
+    watch(target.manifestPath);
+    watch(target.buildInfoPath);
+    watch(target.presetPath);
+    for (const file of target.sourceFiles) {
+      watch(file);
+    }
+  }
+}
+function warnDiagnostics(loader, diagnostics, context) {
+  if (!diagnostics?.length) return;
+  const shown = diagnostics.slice(0, 3).map((diagnostic) => (0, import_compiler_shared.formatDiagnostic)((0, import_compiler_shared.withDiagnosticFile)(diagnostic))).join("\n");
+  const hidden = diagnostics.length > 3 ? `
+...and ${diagnostics.length - 3} more` : "";
+  loader.emitWarning(new Error(`panda: ${diagnostics.length} diagnostic(s) ${context}
+${shown}${hidden}`));
 }

package/dist/css-loader.d.cts

@@ -9,8 +9,8 @@ interface PandaCssLoaderOptions {
  * `pre` loader for `.css` files. When a stylesheet declares Panda layers
  * (`@layer reset, base, …;`), append the generated CSS in-memory — the webpack
  * analog of the Vite plugin's `.css` transform. No file is written to disk.
- * Registers every source file (and the config) as a dependency so webpack
- * rebuilds this stylesheet when they change.
+ * Registers project sources, config deps, and design-system watch targets so
+ * webpack rebuilds this stylesheet when they change.
  */
 declare function pandaCssLoader(this: LoaderContext<PandaCssLoaderOptions>, source: string): string;
 

package/dist/css-loader.d.ts

@@ -9,8 +9,8 @@ interface PandaCssLoaderOptions {
  * `pre` loader for `.css` files. When a stylesheet declares Panda layers
  * (`@layer reset, base, …;`), append the generated CSS in-memory — the webpack
  * analog of the Vite plugin's `.css` transform. No file is written to disk.
- * Registers every source file (and the config) as a dependency so webpack
- * rebuilds this stylesheet when they change.
+ * Registers project sources, config deps, and design-system watch targets so
+ * webpack rebuilds this stylesheet when they change.
  */
 declare function pandaCssLoader(this: LoaderContext<PandaCssLoaderOptions>, source: string): string;
 

package/dist/css-loader.js

@@ -1,12 +1,47 @@
 // src/css-loader.ts
+import { formatDiagnostic, withDiagnosticFile } from "@pandacss/compiler-shared";
 function pandaCssLoader(source) {
   const driver = this.getOptions().getDriver();
   if (!driver || !driver.compiler.hasLayerDeclaration(source)) return source;
-  for (const file of driver.scan()) this.addDependency(file);
-  if (driver.configPath) this.addDependency(driver.configPath);
-  const { css } = driver.cssgen({ emitLayerDeclaration: false });
-  return `${source}
-${css}`;
+  addPandaDependencies(this, driver);
+  warnDiagnostics(this, driver.designSystemDiagnostics, "while loading the design system");
+  const polyfill = driver.config.polyfill === true;
+  const output = driver.cssgen({ emitLayerDeclaration: false, polyfill });
+  warnDiagnostics(this, output.diagnostics, "while compiling the stylesheet");
+  const entry = polyfill ? driver.compiler.stripLayerOrderStatements(source) : source;
+  return `${entry}
+${output.css}`;
+}
+function addPandaDependencies(loader, driver) {
+  const seen = /* @__PURE__ */ new Set();
+  const watch = (file) => {
+    if (seen.has(file)) return;
+    seen.add(file);
+    loader.addDependency(file);
+  };
+  for (const file of driver.scan()) watch(file);
+  for (const dep of driver.watchTargets().config) {
+    watch(driver.resolvePath(dep));
+  }
+  if (driver.configPath) {
+    watch(driver.configPath);
+  }
+  for (const target of driver.designSystemWatchTargets?.() ?? []) {
+    watch(target.manifestPath);
+    watch(target.buildInfoPath);
+    watch(target.presetPath);
+    for (const file of target.sourceFiles) {
+      watch(file);
+    }
+  }
+}
+function warnDiagnostics(loader, diagnostics, context) {
+  if (!diagnostics?.length) return;
+  const shown = diagnostics.slice(0, 3).map((diagnostic) => formatDiagnostic(withDiagnosticFile(diagnostic))).join("\n");
+  const hidden = diagnostics.length > 3 ? `
+...and ${diagnostics.length - 3} more` : "";
+  loader.emitWarning(new Error(`panda: ${diagnostics.length} diagnostic(s) ${context}
+${shown}${hidden}`));
 }
 export {
   pandaCssLoader as default

package/dist/index.cjs

@@ -25,12 +25,14 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 var import_compiler = require("@pandacss/compiler");
+var import_compiler_shared = require("@pandacss/compiler-shared");
 var import_transformer = require("@pandacss/transformer");
 var NAME = "PandaWebpackPlugin";
 var PandaWebpackPlugin = class {
   #options;
   #driver;
   #ready;
+  #designSystemDiagnosticsRef;
   constructor(options = {}) {
     this.#options = options;
   }
@@ -48,11 +50,21 @@ var PandaWebpackPlugin = class {
   /** Watch-mode incremental sync: fold changed files into the driver before this
    *  rebuild's modules (including the layer-declaring CSS) are read. The driver
    *  re-reads changed files through its own fs. */
-  async #sync(cwd, changed) {
+  async #sync(cwd, changed, removed, warn) {
     await this.#build(cwd);
     const driver = this.#driver;
     let configChanged = false;
+    let designSystemChanged = false;
+    for (const file of removed) {
+      if (driver.isSourceFile(file)) driver.applyChange({ path: file, kind: "unlink" });
+    }
     for (const file of changed) {
+      const designSystemFile = driver.isDesignSystemFile?.(file) ?? false;
+      if (designSystemFile) {
+        const synced = await driver.syncDesignSystemFileChange({ path: file, kind: "change" });
+        if (synced) designSystemChanged = true;
+        continue;
+      }
       if (driver.isConfigFile(file)) {
         configChanged = true;
       } else if (driver.isSourceFile(file)) {
@@ -64,17 +76,34 @@ var PandaWebpackPlugin = class {
       if (diff.hasChanged) {
         driver.codegen({ cwd, outdir: this.#options.outdir });
         driver.parseFiles();
+        designSystemChanged = true;
       }
     }
+    if (designSystemChanged) {
+      this.#warnDesignSystemDiagnostics(warn);
+    }
+  }
+  #warnDesignSystemDiagnostics(warn) {
+    if (!warn) return;
+    const diagnostics = this.#driver?.designSystemDiagnostics ?? [];
+    if (diagnostics === this.#designSystemDiagnosticsRef) return;
+    this.#designSystemDiagnosticsRef = diagnostics;
+    if (!diagnostics.length) return;
+    const shown = diagnostics.slice(0, 3).map((diagnostic) => (0, import_compiler_shared.formatDiagnostic)((0, import_compiler_shared.withDiagnosticFile)(diagnostic))).join("\n");
+    const hidden = diagnostics.length > 3 ? `
+...and ${diagnostics.length - 3} more` : "";
+    warn(`panda: ${diagnostics.length} diagnostic(s) while loading the design system
+${shown}${hidden}`);
   }
   apply(compiler) {
     const cwd = this.#options.cwd ?? compiler.context ?? process.cwd();
-    const { cwd: _cwd, configPath: _configPath, outdir: _outdir, ...transformerOptions } = this.#options;
-    import_transformer.pandaTransformer.webpack({
-      exclude: [/node_modules/],
-      ...transformerOptions,
-      getCompiler: () => this.#driver?.compiler
-    }).apply(compiler);
+    const logger = compiler.getInfrastructureLogger?.(NAME);
+    if (this.#options.transform) {
+      import_transformer.pandaTransformer.webpack({
+        exclude: [/node_modules/],
+        getCompiler: () => this.#driver?.compiler
+      }).apply(compiler);
+    }
     const options = { getDriver: () => this.#driver };
     compiler.options.module.rules.push({
       test: /\.css$/,
@@ -83,7 +112,10 @@ var PandaWebpackPlugin = class {
       use: [{ loader: "@pandacss/webpack/css-loader", options }]
     });
     compiler.hooks.beforeCompile.tapPromise(NAME, () => this.#build(cwd));
-    compiler.hooks.watchRun.tapPromise(NAME, (c) => this.#sync(cwd, c.modifiedFiles ?? []));
+    compiler.hooks.watchRun.tapPromise(
+      NAME,
+      (c) => this.#sync(cwd, c.modifiedFiles ?? [], c.removedFiles ?? [], (message) => logger?.warn(message))
+    );
   }
 };
 var index_default = PandaWebpackPlugin;

package/dist/index.d.cts

@@ -1,19 +1,23 @@
-import { PandaTransformerOptions } from '@pandacss/transformer';
 import { Compiler } from 'webpack';
 
-interface PandaWebpackPluginOptions extends PandaTransformerOptions {
+interface PandaWebpackPluginOptions {
     /** Project root. Defaults to the webpack compiler `context`. */
     cwd?: string;
     /** Explicit config file (relative to `cwd`); otherwise discovered upward. */
     configPath?: string;
     /** Where codegen artifacts are written. Defaults to the config `outdir`. */
     outdir?: string;
+    /**
+     * Opt-in source rewrite (`css()` → class strings, etc.). Default: `false`.
+     * CSS injection, codegen, and watch sync always run.
+     */
+    transform?: boolean;
 }
 /**
- * webpack plugin for Panda CSS. Runs codegen and rewrites source via the native
- * transform loader (shared `@pandacss/transformer` unplugin, which also resolves
- * the `@pandacss-internal/css` runtime module). Generated CSS is injected
- * in-memory into any stylesheet that declares Panda layers — no file is written.
+ * webpack plugin for Panda CSS. Runs codegen and injects generated CSS
+ * in-memory into any stylesheet that declares Panda layers — no file is
+ * written. Pass `transform: true` to also rewrite source via the shared
+ * `@pandacss/transformer` unplugin (and resolve `@pandacss-internal/css`).
  */
 declare class PandaWebpackPlugin {
     #private;

package/dist/index.d.ts

@@ -1,19 +1,23 @@
-import { PandaTransformerOptions } from '@pandacss/transformer';
 import { Compiler } from 'webpack';
 
-interface PandaWebpackPluginOptions extends PandaTransformerOptions {
+interface PandaWebpackPluginOptions {
     /** Project root. Defaults to the webpack compiler `context`. */
     cwd?: string;
     /** Explicit config file (relative to `cwd`); otherwise discovered upward. */
     configPath?: string;
     /** Where codegen artifacts are written. Defaults to the config `outdir`. */
     outdir?: string;
+    /**
+     * Opt-in source rewrite (`css()` → class strings, etc.). Default: `false`.
+     * CSS injection, codegen, and watch sync always run.
+     */
+    transform?: boolean;
 }
 /**
- * webpack plugin for Panda CSS. Runs codegen and rewrites source via the native
- * transform loader (shared `@pandacss/transformer` unplugin, which also resolves
- * the `@pandacss-internal/css` runtime module). Generated CSS is injected
- * in-memory into any stylesheet that declares Panda layers — no file is written.
+ * webpack plugin for Panda CSS. Runs codegen and injects generated CSS
+ * in-memory into any stylesheet that declares Panda layers — no file is
+ * written. Pass `transform: true` to also rewrite source via the shared
+ * `@pandacss/transformer` unplugin (and resolve `@pandacss-internal/css`).
  */
 declare class PandaWebpackPlugin {
     #private;

package/dist/index.js

@@ -1,11 +1,13 @@
 // src/index.ts
 import { createNodeDriver } from "@pandacss/compiler";
+import { formatDiagnostic, withDiagnosticFile } from "@pandacss/compiler-shared";
 import { pandaTransformer } from "@pandacss/transformer";
 var NAME = "PandaWebpackPlugin";
 var PandaWebpackPlugin = class {
   #options;
   #driver;
   #ready;
+  #designSystemDiagnosticsRef;
   constructor(options = {}) {
     this.#options = options;
   }
@@ -23,11 +25,21 @@ var PandaWebpackPlugin = class {
   /** Watch-mode incremental sync: fold changed files into the driver before this
    *  rebuild's modules (including the layer-declaring CSS) are read. The driver
    *  re-reads changed files through its own fs. */
-  async #sync(cwd, changed) {
+  async #sync(cwd, changed, removed, warn) {
     await this.#build(cwd);
     const driver = this.#driver;
     let configChanged = false;
+    let designSystemChanged = false;
+    for (const file of removed) {
+      if (driver.isSourceFile(file)) driver.applyChange({ path: file, kind: "unlink" });
+    }
     for (const file of changed) {
+      const designSystemFile = driver.isDesignSystemFile?.(file) ?? false;
+      if (designSystemFile) {
+        const synced = await driver.syncDesignSystemFileChange({ path: file, kind: "change" });
+        if (synced) designSystemChanged = true;
+        continue;
+      }
       if (driver.isConfigFile(file)) {
         configChanged = true;
       } else if (driver.isSourceFile(file)) {
@@ -39,17 +51,34 @@ var PandaWebpackPlugin = class {
       if (diff.hasChanged) {
         driver.codegen({ cwd, outdir: this.#options.outdir });
         driver.parseFiles();
+        designSystemChanged = true;
       }
     }
+    if (designSystemChanged) {
+      this.#warnDesignSystemDiagnostics(warn);
+    }
+  }
+  #warnDesignSystemDiagnostics(warn) {
+    if (!warn) return;
+    const diagnostics = this.#driver?.designSystemDiagnostics ?? [];
+    if (diagnostics === this.#designSystemDiagnosticsRef) return;
+    this.#designSystemDiagnosticsRef = diagnostics;
+    if (!diagnostics.length) return;
+    const shown = diagnostics.slice(0, 3).map((diagnostic) => formatDiagnostic(withDiagnosticFile(diagnostic))).join("\n");
+    const hidden = diagnostics.length > 3 ? `
+...and ${diagnostics.length - 3} more` : "";
+    warn(`panda: ${diagnostics.length} diagnostic(s) while loading the design system
+${shown}${hidden}`);
   }
   apply(compiler) {
     const cwd = this.#options.cwd ?? compiler.context ?? process.cwd();
-    const { cwd: _cwd, configPath: _configPath, outdir: _outdir, ...transformerOptions } = this.#options;
-    pandaTransformer.webpack({
-      exclude: [/node_modules/],
-      ...transformerOptions,
-      getCompiler: () => this.#driver?.compiler
-    }).apply(compiler);
+    const logger = compiler.getInfrastructureLogger?.(NAME);
+    if (this.#options.transform) {
+      pandaTransformer.webpack({
+        exclude: [/node_modules/],
+        getCompiler: () => this.#driver?.compiler
+      }).apply(compiler);
+    }
     const options = { getDriver: () => this.#driver };
     compiler.options.module.rules.push({
       test: /\.css$/,
@@ -58,7 +87,10 @@ var PandaWebpackPlugin = class {
       use: [{ loader: "@pandacss/webpack/css-loader", options }]
     });
     compiler.hooks.beforeCompile.tapPromise(NAME, () => this.#build(cwd));
-    compiler.hooks.watchRun.tapPromise(NAME, (c) => this.#sync(cwd, c.modifiedFiles ?? []));
+    compiler.hooks.watchRun.tapPromise(
+      NAME,
+      (c) => this.#sync(cwd, c.modifiedFiles ?? [], c.removedFiles ?? [], (message) => logger?.warn(message))
+    );
   }
 };
 var index_default = PandaWebpackPlugin;

package/dist/next.cjs

@@ -27,12 +27,14 @@ module.exports = __toCommonJS(next_exports);
 
 // src/index.ts
 var import_compiler = require("@pandacss/compiler");
+var import_compiler_shared = require("@pandacss/compiler-shared");
 var import_transformer = require("@pandacss/transformer");
 var NAME = "PandaWebpackPlugin";
 var PandaWebpackPlugin = class {
   #options;
   #driver;
   #ready;
+  #designSystemDiagnosticsRef;
   constructor(options = {}) {
     this.#options = options;
   }
@@ -50,11 +52,21 @@ var PandaWebpackPlugin = class {
   /** Watch-mode incremental sync: fold changed files into the driver before this
    *  rebuild's modules (including the layer-declaring CSS) are read. The driver
    *  re-reads changed files through its own fs. */
-  async #sync(cwd, changed) {
+  async #sync(cwd, changed, removed, warn) {
     await this.#build(cwd);
     const driver = this.#driver;
     let configChanged = false;
+    let designSystemChanged = false;
+    for (const file of removed) {
+      if (driver.isSourceFile(file)) driver.applyChange({ path: file, kind: "unlink" });
+    }
     for (const file of changed) {
+      const designSystemFile = driver.isDesignSystemFile?.(file) ?? false;
+      if (designSystemFile) {
+        const synced = await driver.syncDesignSystemFileChange({ path: file, kind: "change" });
+        if (synced) designSystemChanged = true;
+        continue;
+      }
       if (driver.isConfigFile(file)) {
         configChanged = true;
       } else if (driver.isSourceFile(file)) {
@@ -66,17 +78,34 @@ var PandaWebpackPlugin = class {
       if (diff.hasChanged) {
         driver.codegen({ cwd, outdir: this.#options.outdir });
         driver.parseFiles();
+        designSystemChanged = true;
       }
     }
+    if (designSystemChanged) {
+      this.#warnDesignSystemDiagnostics(warn);
+    }
+  }
+  #warnDesignSystemDiagnostics(warn) {
+    if (!warn) return;
+    const diagnostics = this.#driver?.designSystemDiagnostics ?? [];
+    if (diagnostics === this.#designSystemDiagnosticsRef) return;
+    this.#designSystemDiagnosticsRef = diagnostics;
+    if (!diagnostics.length) return;
+    const shown = diagnostics.slice(0, 3).map((diagnostic) => (0, import_compiler_shared.formatDiagnostic)((0, import_compiler_shared.withDiagnosticFile)(diagnostic))).join("\n");
+    const hidden = diagnostics.length > 3 ? `
+...and ${diagnostics.length - 3} more` : "";
+    warn(`panda: ${diagnostics.length} diagnostic(s) while loading the design system
+${shown}${hidden}`);
   }
   apply(compiler) {
     const cwd = this.#options.cwd ?? compiler.context ?? process.cwd();
-    const { cwd: _cwd, configPath: _configPath, outdir: _outdir, ...transformerOptions } = this.#options;
-    import_transformer.pandaTransformer.webpack({
-      exclude: [/node_modules/],
-      ...transformerOptions,
-      getCompiler: () => this.#driver?.compiler
-    }).apply(compiler);
+    const logger = compiler.getInfrastructureLogger?.(NAME);
+    if (this.#options.transform) {
+      import_transformer.pandaTransformer.webpack({
+        exclude: [/node_modules/],
+        getCompiler: () => this.#driver?.compiler
+      }).apply(compiler);
+    }
     const options = { getDriver: () => this.#driver };
     compiler.options.module.rules.push({
       test: /\.css$/,
@@ -85,7 +114,10 @@ var PandaWebpackPlugin = class {
       use: [{ loader: "@pandacss/webpack/css-loader", options }]
     });
     compiler.hooks.beforeCompile.tapPromise(NAME, () => this.#build(cwd));
-    compiler.hooks.watchRun.tapPromise(NAME, (c) => this.#sync(cwd, c.modifiedFiles ?? []));
+    compiler.hooks.watchRun.tapPromise(
+      NAME,
+      (c) => this.#sync(cwd, c.modifiedFiles ?? [], c.removedFiles ?? [], (message) => logger?.warn(message))
+    );
   }
 };
 

package/dist/next.d.cts

@@ -1,5 +1,4 @@
 import { PandaWebpackPluginOptions } from './index.cjs';
-import '@pandacss/transformer';
 import 'webpack';
 
 type WebpackConfig = {
@@ -10,9 +9,13 @@ type NextConfig = {
     [key: string]: unknown;
 };
 /**
- * Wrap a Next.js config to run Panda's webpack transform. Composes with any
+ * Wrap a Next.js config to run Panda's webpack plugin. Composes with any
  * existing `webpack` function. Only affects the webpack build — Turbopack needs
- * its own integration.
+ * its own integration. Pass `transform: true` in `pandaOptions` to enable
+ * source rewrite.
+ *
+ * Next.js 16 defaults to Turbopack and fails the build when a webpack config is
+ * present, so run `next dev --webpack` and `next build --webpack`.
  */
 declare function withPandaCss(nextConfig?: NextConfig, pandaOptions?: PandaWebpackPluginOptions): NextConfig;
 

package/dist/next.d.ts

@@ -1,5 +1,4 @@
 import { PandaWebpackPluginOptions } from './index.js';
-import '@pandacss/transformer';
 import 'webpack';
 
 type WebpackConfig = {
@@ -10,9 +9,13 @@ type NextConfig = {
     [key: string]: unknown;
 };
 /**
- * Wrap a Next.js config to run Panda's webpack transform. Composes with any
+ * Wrap a Next.js config to run Panda's webpack plugin. Composes with any
  * existing `webpack` function. Only affects the webpack build — Turbopack needs
- * its own integration.
+ * its own integration. Pass `transform: true` in `pandaOptions` to enable
+ * source rewrite.
+ *
+ * Next.js 16 defaults to Turbopack and fails the build when a webpack config is
+ * present, so run `next dev --webpack` and `next build --webpack`.
  */
 declare function withPandaCss(nextConfig?: NextConfig, pandaOptions?: PandaWebpackPluginOptions): NextConfig;
 

package/dist/next.js

@@ -1,11 +1,13 @@
 // src/index.ts
 import { createNodeDriver } from "@pandacss/compiler";
+import { formatDiagnostic, withDiagnosticFile } from "@pandacss/compiler-shared";
 import { pandaTransformer } from "@pandacss/transformer";
 var NAME = "PandaWebpackPlugin";
 var PandaWebpackPlugin = class {
   #options;
   #driver;
   #ready;
+  #designSystemDiagnosticsRef;
   constructor(options = {}) {
     this.#options = options;
   }
@@ -23,11 +25,21 @@ var PandaWebpackPlugin = class {
   /** Watch-mode incremental sync: fold changed files into the driver before this
    *  rebuild's modules (including the layer-declaring CSS) are read. The driver
    *  re-reads changed files through its own fs. */
-  async #sync(cwd, changed) {
+  async #sync(cwd, changed, removed, warn) {
     await this.#build(cwd);
     const driver = this.#driver;
     let configChanged = false;
+    let designSystemChanged = false;
+    for (const file of removed) {
+      if (driver.isSourceFile(file)) driver.applyChange({ path: file, kind: "unlink" });
+    }
     for (const file of changed) {
+      const designSystemFile = driver.isDesignSystemFile?.(file) ?? false;
+      if (designSystemFile) {
+        const synced = await driver.syncDesignSystemFileChange({ path: file, kind: "change" });
+        if (synced) designSystemChanged = true;
+        continue;
+      }
       if (driver.isConfigFile(file)) {
         configChanged = true;
       } else if (driver.isSourceFile(file)) {
@@ -39,17 +51,34 @@ var PandaWebpackPlugin = class {
       if (diff.hasChanged) {
         driver.codegen({ cwd, outdir: this.#options.outdir });
         driver.parseFiles();
+        designSystemChanged = true;
       }
     }
+    if (designSystemChanged) {
+      this.#warnDesignSystemDiagnostics(warn);
+    }
+  }
+  #warnDesignSystemDiagnostics(warn) {
+    if (!warn) return;
+    const diagnostics = this.#driver?.designSystemDiagnostics ?? [];
+    if (diagnostics === this.#designSystemDiagnosticsRef) return;
+    this.#designSystemDiagnosticsRef = diagnostics;
+    if (!diagnostics.length) return;
+    const shown = diagnostics.slice(0, 3).map((diagnostic) => formatDiagnostic(withDiagnosticFile(diagnostic))).join("\n");
+    const hidden = diagnostics.length > 3 ? `
+...and ${diagnostics.length - 3} more` : "";
+    warn(`panda: ${diagnostics.length} diagnostic(s) while loading the design system
+${shown}${hidden}`);
   }
   apply(compiler) {
     const cwd = this.#options.cwd ?? compiler.context ?? process.cwd();
-    const { cwd: _cwd, configPath: _configPath, outdir: _outdir, ...transformerOptions } = this.#options;
-    pandaTransformer.webpack({
-      exclude: [/node_modules/],
-      ...transformerOptions,
-      getCompiler: () => this.#driver?.compiler
-    }).apply(compiler);
+    const logger = compiler.getInfrastructureLogger?.(NAME);
+    if (this.#options.transform) {
+      pandaTransformer.webpack({
+        exclude: [/node_modules/],
+        getCompiler: () => this.#driver?.compiler
+      }).apply(compiler);
+    }
     const options = { getDriver: () => this.#driver };
     compiler.options.module.rules.push({
       test: /\.css$/,
@@ -58,7 +87,10 @@ var PandaWebpackPlugin = class {
       use: [{ loader: "@pandacss/webpack/css-loader", options }]
     });
     compiler.hooks.beforeCompile.tapPromise(NAME, () => this.#build(cwd));
-    compiler.hooks.watchRun.tapPromise(NAME, (c) => this.#sync(cwd, c.modifiedFiles ?? []));
+    compiler.hooks.watchRun.tapPromise(
+      NAME,
+      (c) => this.#sync(cwd, c.modifiedFiles ?? [], c.removedFiles ?? [], (message) => logger?.warn(message))
+    );
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/webpack",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.1",
   "description": "webpack plugin for Panda CSS (Next.js compatible)",
   "type": "module",
   "main": "./dist/index.js",
@@ -39,9 +39,9 @@
     "dist"
   ],
   "dependencies": {
-    "@pandacss/compiler": "2.0.0-beta.9",
-    "@pandacss/compiler-shared": "2.0.0-beta.9",
-    "@pandacss/transformer": "2.0.0-beta.9"
+    "@pandacss/compiler": "2.0.1",
+    "@pandacss/compiler-shared": "2.0.1",
+    "@pandacss/transformer": "2.0.1"
   },
   "peerDependencies": {
     "webpack": ">=5.0.0"