@kanso-labs/unplugin-style-dictionary 0.7.0 → 0.8.0

package/README.md

@@ -27,6 +27,9 @@ build on Rolldown/tsdown) that both need tokens compiled ahead of them.
 - **Config flexibility**: Supports file paths (JSON, JSON5, JSONC, JS, MJS, TS),
   configuration objects, or functions — including registering custom formats at
   config-resolution time.
+- **Error overlay**: A rebuild that fails under Vite's dev server is pushed to
+  the error overlay rather than only to the terminal, and cleared on the next
+  one that succeeds.
 - **Atomic writes**: Every generated file is written to a temporary sibling and
   renamed into place, so code importing a token file while it is being rebuilt
   never reads a half-written file.
@@ -191,6 +194,38 @@ source and no config file does not reach it, so a dev server editing unrelated
 project files leaves it alone — treat it as the place to prepare a build, not as
 a general file-change hook.
 
+**It is handed what the host is doing**, so the configuration it returns can
+depend on it — build an expensive platform on `vite build` and skip it while the
+dev server runs:
+
+```typescript
+styleDictionaryPlugin({
+  config: ({ command, mode, watch }) => ({
+    source: ['tokens/**/*.json'],
+    platforms: {
+      css: {
+        transformGroup: 'css',
+        buildPath: 'dist/',
+        files: [{ destination: 'vars.css', format: 'css/variables' }],
+      },
+      // Shells out to a native toolchain, so it is worth a minute of a real
+      // build and not worth a second of every rebuild.
+      ...(command === 'build' && !watch ? { ios: iosPlatform(mode) } : {}),
+    },
+  }),
+})
+```
+
+`command` is `'serve'` only under Vite's dev server; every other target builds.
+`mode` is Vite's or webpack's own, and follows `command` on rollup and rolldown,
+which have no such concept. `watch` is read from the host rather than inferred
+from `command`, because `rollup --watch` both watches and builds. The full
+contract is [`StyleDictionaryConfigContext`](#options-reference).
+
+A function taking no arguments stays valid — TypeScript accepts one of fewer
+parameters and JavaScript ignores the extra argument — so the example below
+needs no change.
+
 ```typescript
 // Named `styleDictionaryPlugin` here to avoid colliding with the `StyleDictionary`
 // class imported from the `style-dictionary` package itself, below.
@@ -355,6 +390,41 @@ A compile that fails is reported at every level, including `'silent'`, which is
 why there is no `'error'`. `log.warnings` is never touched: if your
 configuration turns a warning into a thrown build, that stays your decision.
 
+### Where the messages go
+
+Through your bundler, not straight to the console, and each one takes them its
+own way:
+
+| Target             | Progress lines           | A failed compile                   |
+| ------------------ | ------------------------ | ---------------------------------- |
+| Vite               | `config.logger.info`     | `config.logger.error`              |
+| Rollup, Rolldown   | the plugin context's log | the context's warning channel      |
+| Webpack            | the console              | `compilation.warnings`, so `stats` |
+| No host (one-shot) | the console              | the console                        |
+
+That is what makes a `customLogger` and `clearScreen` work under Vite, and what
+puts a failed compile into `stats.toJson()` under webpack — where it reaches CI
+annotations and anything else reading the build's own output.
+
+**A failure is reported as a warning, never on the host's error channel.**
+Rollup's `this.error` aborts the bundle, so reporting a failure through it would
+stop every build that reported one — taking the decision `failOnError` exists to
+make. The same reasoning puts webpack's report in `compilation.warnings` rather
+than `compilation.errors`, so `failOnError: false` really does leave the build
+passing.
+
+**Your bundler's own log level applies.** `vite --logLevel silent` silences
+Vite's logger, and the plugin's lines are Vite's logger's now, so they go too.
+Nothing is lost by it that matters: `failOnError` decides whether a broken token
+set stops the build, and it decides that whether or not anything was printed.
+
+Colour follows the usual conventions, which it previously ignored entirely: no
+escapes when `NO_COLOR` is set, or when the stream is not a terminal, or under
+`TERM=dumb`; escapes when `FORCE_COLOR` is set to anything but `0`, including on
+a non-terminal, which is what that variable is for. `NO_COLOR` wins over
+`FORCE_COLOR`. stdout and stderr are decided separately, because they are
+redirected separately.
+
 ## Failing the Build
 
 A token compile that fails stops the build. `vite build`, `rollup` and `webpack`
@@ -373,17 +443,68 @@ StyleDictionary({
 })
 ```
 
-A failure is always reported, whatever `failOnError` and `silent` are set to.
+A failure is always reported by the plugin, whatever `failOnError` and `silent`
+are set to — see [Where the messages go](#where-the-messages-go) for which
+channel it arrives on, and for the one thing that can still suppress it.
+
+Under Vite's dev server it is reported to the browser as well. A failed rebuild
+is pushed to Vite's error overlay, naming this plugin and carrying Style
+Dictionary's message, and the overlay is dismissed by the next rebuild that
+succeeds — so a page left rendering the last good token file says so instead of
+looking current. Set `errorOverlay: false` to keep the failure in the terminal
+only.
+
+`failOnError` and `errorOverlay` answer different questions and do not interact:
+the first decides whether the host stops, the second whether the browser is
+told. The dev server's default is not to stop, which is exactly when the overlay
+is the only thing that can report the failure.
+
+## Build Hooks
+
+Three optional callbacks, for work that has to happen around a compile rather
+than inside one — formatting the generated files, type-checking them, telling
+something else they have landed.
+
+```typescript
+StyleDictionary({
+  config: 'sd.config.json',
+  onBuildStart: () => console.log('compiling tokens'),
+  onBuildEnd: async (files, durationMs) => {
+    console.log(`wrote ${files.length} files in ${durationMs}ms`)
+    await formatGeneratedFiles(files)
+  },
+  onBuildError: (error) => notifySomething(error),
+})
+```
+
+`files` holds the absolute, platform-native path of every file the build
+declares, sorted. It is what the build declares rather than what it happened to
+write this time: a configuration skipped because its output was already current
+contributes its destinations too, so a post-processing step still sees the whole
+set on a rebuild that changed one file.
+
+A rebuild is a build, so all three fire again on every watch-triggered one.
+
+**A hook cannot fail the build that called it.** The return value is not
+awaited, so nothing waits for post-processing; a hook that throws is reported
+and the build stands, and a promise that rejects is caught and reported rather
+than reaching the host as an unhandled rejection — which would otherwise take a
+dev server down from inside a step meant to reformat a file.
+
+`onBuildError` fires whatever `failOnError` is set to, and before that option
+decides whether to rethrow. The two answer different questions: one is whether
+the host stops, the other is that a build went wrong.
 
 ## Public API
 
-Small on purpose. Four bundler entry points, one root entry, and one type.
+Small on purpose. Four bundler entry points, one root entry, and two types.
 
 | Import                                          | What it is                                                                                                             |
 | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
 | `…/vite`, `…/rolldown`, `…/rollup`, `…/webpack` | Default export: the plugin for that bundler. Call it with the options below.                                           |
 | `…` (the root)                                  | Default export, also named `unplugin`: the unplugin instance, carrying `.vite`, `.rolldown`, `.rollup` and `.webpack`. |
 | `UnpluginStyleDictionaryOptions`                | The options type, exported from every entry above.                                                                     |
+| `StyleDictionaryConfigContext`                  | What the function form of `config` is handed, exported from every entry above.                                         |
 
 Anything not in that table is internal, whatever a build output happens to
 contain. In particular the watch filter and the raw unplugin factory are not
@@ -415,12 +536,72 @@ const plugin = styleDictionary.rollup({ config: 'sd.config.json' })
  * build (e.g. `tsdown`/`rolldown build` without `--watch`) only builds once, in
  * `buildStart`.
  *
+ * Everything the plugin says goes through the host rather than to the console:
+ * Vite's `config.logger`, the plugin context under rollup and rolldown, and
+ * `compilation.warnings` under webpack, which is what puts a failed compile in
+ * `stats.toJson()`. A failure is reported on the warning channel and never the
+ * error one — rollup's `this.error` aborts the bundle, and that decision is
+ * `failOnError`'s alone. Where no host offers a channel the console is used,
+ * with colour gated on `NO_COLOR`, `FORCE_COLOR` and whether the stream is a
+ * terminal.
+ *
+ * The three `onBuild*` hooks are called synchronously and their return value
+ * is not awaited, so a build never waits for one. A hook may still be written
+ * `async`: a promise it returns is left to run on its own, and a rejection is
+ * caught and reported rather than reaching the host as an unhandled one. A
+ * hook that throws is reported and does not fail the build that called it.
+ *
+ * They return `Promise<void> | void` rather than `void` for that reason. Both
+ * accept an `async` hook as far as the compiler is concerned, but `void` alone
+ * makes one a `no-misused-promises` error under the type-aware lint rules a
+ * consumer is likely to be running — for a hook this documents as supported.
+ *
  * Rolldown's watch mode is the exception, and it is not about glob patterns.
  * `addWatchFile` is accepted either way, but what happens next differs by
  * platform — on macOS a file registered through it is watched by nothing, while
  * on a Linux runner the same edit reaches a rebuild. Do not rely on a token
  * edit triggering a rebuild there.
  */
+/**
+ * What the host is doing, handed to the function form of `config` so it can
+ * decide what to build.
+ *
+ * Only Vite reports all three. Where a host does not say, the value is
+ * derived rather than guessed at, and each field below says how.
+ */
+export interface StyleDictionaryConfigContext {
+  /**
+   * Whether the host is serving or building.
+   *
+   * `'serve'` comes from Vite's own `config.command` and is the dev server.
+   * Every other target builds, so it is `'build'` there — rollup, rolldown and
+   * webpack have no serving mode of their own to report.
+   */
+  command: 'build' | 'serve'
+
+  /**
+   * The host's mode, as it names it.
+   *
+   * Vite reports its `config.mode` — `'development'` serving,
+   * `'production'` building, or whatever `--mode` named. webpack reports its
+   * `mode` option. rollup and rolldown have no such concept, so the value
+   * follows `command`: `'development'` when serving, `'production'` when
+   * building.
+   */
+  mode: string
+
+  /**
+   * Whether the host will keep rebuilding.
+   *
+   * `true` under Vite's dev server, `rollup --watch`, `rolldown.watch()` and
+   * `webpack --watch`; `false` for a one-shot build. It is read from the
+   * host — the plugin context's `meta.watchMode` on the three rollup-shaped
+   * targets, and `compiler.watchMode` on webpack — rather than inferred from
+   * `command`, because `rollup --watch` both watches and builds.
+   */
+  watch: boolean
+}
+
 export interface UnpluginStyleDictionaryOptions {
   /**
    * Whether a configuration whose output is already up to date may skip its
@@ -462,18 +643,51 @@ export interface UnpluginStyleDictionaryOptions {
    * - A function that returns a config or array of configs (or resolves to them).
    *   Useful for calling `StyleDictionary.registerFormat()` (or other `register*`
    *   methods) before returning a config that references the custom format by name.
+   *   It is handed a `StyleDictionaryConfigContext` describing what the host is
+   *   doing, so an expensive platform can be built only when it is wanted —
+   *   skipped under the dev server, built by `vite build`. A function taking no
+   *   arguments stays valid: TypeScript accepts one of fewer parameters, and
+   *   JavaScript ignores the extra argument.
    *
    * If not provided, the root directory is searched for 'sd.config.json',
    * 'config.json', 'sd.config.js' and 'sd.config.mjs', in that order. The
    * first one that exists wins, and the rest are not looked at.
    */
   config?:
-    | (() => Config | Config[] | Promise<Config | Config[]>)
+    | ((
+        context: StyleDictionaryConfigContext,
+      ) => Config | Config[] | Promise<Config | Config[]>)
     | Config
     | Config[]
     | string
     | string[]
 
+  /**
+   * Whether a failed rebuild is pushed to Vite's error overlay.
+   *
+   * A rebuild that fails under the dev server used to reach the browser
+   * nowhere: the page went on rendering the last good generated file, and the
+   * only trace was one red terminal line the developer may not have been
+   * looking at. With this on, the failure is sent to the page as an error
+   * frame naming this plugin, and the overlay is dismissed on the next
+   * rebuild that succeeds.
+   *
+   * This is Vite's overlay, so it does nothing on the other three targets,
+   * and nothing under `vite build` — there is no page to draw on.
+   *
+   * It is not `failOnError`'s job, and the two are independent. `failOnError`
+   * decides whether the host stops; this decides whether the browser is told.
+   * A dev server deliberately keeps serving through a failed rebuild, which is
+   * precisely the case where the overlay is the only thing that can say so.
+   *
+   * A failure Style Dictionary raises before this plugin can catch it — a
+   * token file that is not valid JSON, which rejects out of band — reaches
+   * neither the overlay nor this option.
+   *
+   * @default true
+   */
+  errorOverlay?: boolean
+
   /**
    * Whether a compile that fails should throw rather than only be reported.
    *
@@ -513,11 +727,59 @@ export interface UnpluginStyleDictionaryOptions {
    * A compile that fails is reported at every level, so there is no
    * `'error'`: `'silent'` is the quietest and still reports a failure.
    *
+   * This option governs what the plugin says, not where it goes. The messages
+   * are handed to the host — Vite's `config.logger`, the rollup and rolldown
+   * plugin context, webpack's `compilation` — so a host silenced by its own
+   * log level suppresses them after this option has let them through. A
+   * failure still stops the build whenever `failOnError` says it should,
+   * printed or not.
+   *
    * @default undefined, which prints the plugin's own lines and leaves the
    * configuration's `log.verbosity` alone
    */
   logLevel?: 'info' | 'silent' | 'verbose' | 'warn'
 
+  /**
+   * Called once a build has finished, with every file it declares and how long
+   * it took in milliseconds.
+   *
+   * The paths are absolute and platform-native, sorted so two runs of the same
+   * configuration hand back the same order. They are what the build declares
+   * rather than what it wrote this time: a configuration skipped by `cache`
+   * contributes its destinations too, because they are on disk and current,
+   * and a post-processing step that ignored them would leave half the output
+   * untouched on a rebuild that changed one file.
+   *
+   * This is where formatting the generated files, type-checking them, or
+   * telling something else they have landed belongs.
+   *
+   * @default undefined
+   */
+  onBuildEnd?: (files: string[], durationMs: number) => Promise<void> | void
+
+  /**
+   * Called when a build fails, with whatever was thrown.
+   *
+   * It fires whatever `failOnError` is set to, and before that option decides
+   * whether to rethrow — the two answer different questions, and under a dev
+   * server the default is not to throw at all.
+   *
+   * The failure is reported to the console either way, so this is for reacting
+   * to one rather than for noticing it.
+   *
+   * @default undefined
+   */
+  onBuildError?: (error: unknown) => Promise<void> | void
+
+  /**
+   * Called before a build begins, once per build.
+   *
+   * A watch-triggered rebuild is a build, so this fires again for each one.
+   *
+   * @default undefined
+   */
+  onBuildStart?: () => Promise<void> | void
+
   /**
    * Whether the table of generated files and their sizes is produced.
    *

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import { UnpluginStyleDictionaryOptions } from "./types.js";
+import { StyleDictionaryConfigContext, UnpluginStyleDictionaryOptions } from "./types.js";
 //#region src/index.d.ts
 export declare const unplugin: import("unplugin").UnpluginInstance<UnpluginStyleDictionaryOptions | undefined, false>;
 //#endregion
-export { type UnpluginStyleDictionaryOptions, unplugin as default };
+export { type StyleDictionaryConfigContext, type UnpluginStyleDictionaryOptions, unplugin as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -11,6 +11,14 @@ import { createUnplugin } from "unplugin";
 function asError(error) {
 	return error instanceof Error ? error : new Error(errorMessage(error));
 }
+function colourAllowed(stream) {
+	if (process.env.NO_COLOR) return false;
+	const forced = process.env.FORCE_COLOR;
+	if (forced === "0") return false;
+	if (forced !== void 0 && forced !== "") return true;
+	if (process.env.TERM === "dumb") return false;
+	return stream.isTTY === true;
+}
 function discardTemporaryFile(temporary) {
 	try {
 		fs.rmSync(temporary, { force: true });
@@ -22,6 +30,15 @@ function errorMessage(error) {
 function isConfig(value) {
 	return typeof value === "object" && value !== null;
 }
+function isMessageChannel(value) {
+	return typeof value === "function";
+}
+function isThenable(value) {
+	return typeof value === "object" && value !== null && "then" in value && typeof value.then === "function";
+}
+function paint(code, value, allowed) {
+	return allowed ? `\u001B[${code}m${value}\u001B[0m` : value;
+}
 function unwrapDefault(value) {
 	return typeof value === "object" && value !== null && "default" in value ? value.default ?? value : value;
 }
@@ -123,11 +140,25 @@ function statOrNull(file) {
 }
 const unpluginFactory = (options = {}, meta) => {
 	const isWebpack = meta.framework === "webpack";
-	const { cache = true, failOnError = "build", logLevel, report = true, root: rootOption, silent = false } = options;
+	const { cache = true, errorOverlay = true, failOnError = "build", logLevel, onBuildEnd, onBuildError, onBuildStart, report = true, root: rootOption, silent = false } = options;
 	const level = logLevel ?? (silent ? "silent" : void 0);
 	const quiet = level === "silent" || level === "warn";
 	const verbosity = level === void 0 ? void 0 : level === "verbose" ? "verbose" : level === "silent" ? "silent" : "default";
 	const failsTheBuild = (context) => failOnError === true || (context === void 0 ? failOnError === "build" : failOnError === "serve");
+	let hostCommand = "build";
+	let hostMode;
+	let isWatching = false;
+	const configContext = () => ({
+		command: hostCommand,
+		mode: hostMode ?? (hostCommand === "serve" ? "development" : "production"),
+		watch: isWatching
+	});
+	const adoptWatchMode = (context) => {
+		const hookMeta = "meta" in context ? context.meta : void 0;
+		if (typeof hookMeta !== "object" || hookMeta === null) return;
+		const watching = "watchMode" in hookMeta ? hookMeta.watchMode : void 0;
+		if (typeof watching === "boolean") isWatching = watching;
+	};
 	let root = rootOption ? path.resolve(process.cwd(), rootOption) : process.cwd();
 	const generatedDestinations = /* @__PURE__ */ new Set();
 	let cachedPatterns;
@@ -149,15 +180,52 @@ const unpluginFactory = (options = {}, meta) => {
 		return Array.from(paths);
 	};
 	const isWatchedSource = (file, patterns) => !generatedDestinations.has(file.replace(/\\/g, "/")) && matchesWatchedFile(file, patterns);
+	const stdoutColour = colourAllowed(process.stdout);
+	const stderrColour = colourAllowed(process.stderr);
+	let host;
+	const adoptHost = (context) => {
+		if (host) return;
+		const warn = "warn" in context ? context.warn : void 0;
+		if (!isMessageChannel(warn)) return;
+		const info = "info" in context ? context.info : void 0;
+		host = {
+			error: (message) => {
+				warn.call(context, message);
+			},
+			info: isMessageChannel(info) ? (message) => {
+				info.call(context, message);
+			} : void 0
+		};
+	};
 	const log = (message, type = "info") => {
 		const prefix = "[unplugin-style-dictionary]";
 		if (type === "error") {
-			console.error(`\x1b[31m${prefix} ${message}\x1b[0m`);
+			if (host) {
+				host.error(`${prefix} ${message}`);
+				return;
+			}
+			console.error(paint("31", `${prefix} ${message}`, stderrColour));
 			return;
 		}
 		if (quiet) return;
-		if (type === "success") console.log(`\x1b[32m${prefix} ${message}\x1b[0m`);
-		else console.log(`\x1b[36m${prefix} ${message}\x1b[0m`);
+		if (host?.info) {
+			host.info(`${prefix} ${message}`);
+			return;
+		}
+		console.log(paint(type === "success" ? "32" : "36", `${prefix} ${message}`, stdoutColour));
+	};
+	const callHook = (name, hook, ...args) => {
+		let result;
+		try {
+			result = hook(...args);
+		} catch (err) {
+			log(`The ${name} hook threw: ${errorMessage(err)}`, "error");
+			return;
+		}
+		if (!isThenable(result)) return;
+		Promise.resolve(result).catch((err) => {
+			log(`The ${name} hook rejected: ${errorMessage(err)}`, "error");
+		});
 	};
 	const resolveConfigs = async () => {
 		let rawConfig = options.config;
@@ -177,7 +245,7 @@ const unpluginFactory = (options = {}, meta) => {
 			log("No configuration specified and no default config file found. Style Dictionary will not compile.", "error");
 			return [];
 		}
-		if (typeof rawConfig === "function") rawConfig = await rawConfig();
+		if (typeof rawConfig === "function") rawConfig = await rawConfig(configContext());
 		return (Array.isArray(rawConfig) ? rawConfig : [rawConfig]).map((conf) => {
 			if (typeof conf === "string") {
 				const fullPath = path.resolve(root, conf);
@@ -307,7 +375,7 @@ const unpluginFactory = (options = {}, meta) => {
 			const displayPath = path.relative(root, filePath).replace(/\\/g, "/");
 			const dir = path.dirname(displayPath);
 			const base = path.basename(displayPath);
-			const coloredPath = dir === "." ? `\x1b[32m${base}\x1b[0m` : `\x1b[90m${dir}/\x1b[0m\x1b[32m${base}\x1b[0m`;
+			const coloredPath = dir === "." ? paint("32", base, stdoutColour) : paint("90", `${dir}/`, stdoutColour) + paint("32", base, stdoutColour);
 			try {
 				const sizeStr = `${(fs.statSync(filePath).size / 1024).toFixed(2)} kB`;
 				const content = fs.readFileSync(filePath);
@@ -326,7 +394,7 @@ const unpluginFactory = (options = {}, meta) => {
 			for (const info of fileInfos) {
 				const pathPadding = " ".repeat(Math.max(2, longestPathLength - info.relativeDisplayPath.length + 2));
 				const sizePadded = info.sizeStr.padStart(longestSizeLength);
-				console.log(`${info.coloredPath}${pathPadding}\x1b[90m${sizePadded} │ gzip: ${info.gzipSizeStr}\x1b[0m`);
+				console.log(info.coloredPath + pathPadding + paint("90", `${sizePadded} │ gzip: ${info.gzipSizeStr}`, stdoutColour));
 			}
 		}
 	};
@@ -336,6 +404,7 @@ const unpluginFactory = (options = {}, meta) => {
 		let skipped = 0;
 		try {
 			if (!context) log("Compiling design tokens...", "info");
+			if (onBuildStart) callHook("onBuildStart", onBuildStart);
 			for (const item of resolvedConfigs) {
 				const declared = cache ? await readConfigObject(item, false) : null;
 				if (declared && await isUpToDate(item, declared)) {
@@ -366,10 +435,17 @@ const unpluginFactory = (options = {}, meta) => {
 		} catch (err) {
 			const duration = Date.now() - startTime;
 			log(`Compilation failed after ${duration}ms: ${errorMessage(err)}`, "error");
+			notifyBuildOutcome?.(asError(err));
+			if (onBuildError) callHook("onBuildError", onBuildError, err);
 			if (failsTheBuild(context)) throw err;
 			return;
 		}
+		notifyBuildOutcome?.(null);
 		const duration = Date.now() - startTime;
+		if (onBuildEnd) {
+			const files = Array.from(generatedFiles).sort((left, right) => left.localeCompare(right));
+			callHook("onBuildEnd", onBuildEnd, files, duration);
+		}
 		const everythingSkipped = skipped === resolvedConfigs.length;
 		if (context) {
 			log(everythingSkipped ? `Design tokens already up to date after change in ${context} (${duration}ms)` : `Rebuilt design tokens due to change in ${context} (${duration}ms)`, "success");
@@ -411,6 +487,7 @@ const unpluginFactory = (options = {}, meta) => {
 	let inFlight;
 	let waiting = [];
 	let refreshServerWatchList;
+	let notifyBuildOutcome;
 	const drain = async () => {
 		while (pendingReason !== void 0) {
 			const reason = pendingReason;
@@ -430,7 +507,10 @@ const unpluginFactory = (options = {}, meta) => {
 				}
 			} catch (err) {
 				failure = { error: err };
-				if (!compiling) log(`Rebuild failed: ${errorMessage(err)}`, "error");
+				if (!compiling) {
+					log(`Rebuild failed: ${errorMessage(err)}`, "error");
+					notifyBuildOutcome?.(asError(err));
+				}
 			}
 			for (const settle of resolvers) settle(failure);
 		}
@@ -453,6 +533,8 @@ const unpluginFactory = (options = {}, meta) => {
 	};
 	return {
 		async buildStart() {
+			adoptHost(this);
+			adoptWatchMode(this);
 			const resolved = await resolveConfigs();
 			if (resolved.length === 0) return;
 			const { paths } = await getWatchTargets(resolved);
@@ -469,8 +551,19 @@ const unpluginFactory = (options = {}, meta) => {
 		vite: {
 			configResolved(config) {
 				if (rootOption === void 0) root = config.root || process.cwd();
+				hostCommand = config.command;
+				hostMode = config.mode;
+				host = {
+					error: (message) => {
+						config.logger.error(message);
+					},
+					info: (message) => {
+						config.logger.info(message);
+					}
+				};
 			},
 			async configureServer(server) {
+				isWatching = true;
 				const resolved = await resolveConfigs();
 				if (resolved.length === 0) return;
 				let targets = await getWatchTargets(resolved);
@@ -479,6 +572,29 @@ const unpluginFactory = (options = {}, meta) => {
 					targets = await getWatchTargets(rebuilt);
 					server.watcher.add(targets.paths);
 				};
+				if (errorOverlay) {
+					let overlayShowing = false;
+					notifyBuildOutcome = (error) => {
+						if (error) {
+							overlayShowing = true;
+							server.hot.send({
+								err: {
+									message: error.message,
+									plugin: "unplugin-style-dictionary",
+									stack: error.stack ?? ""
+								},
+								type: "error"
+							});
+							return;
+						}
+						if (!overlayShowing) return;
+						overlayShowing = false;
+						server.hot.send({
+							type: "update",
+							updates: []
+						});
+					};
+				}
 				server.watcher.on("all", (_event, file) => {
 					if (!isWatchedSource(file, targets.patterns)) return;
 					schedule(path.basename(file)).catch(() => {});
@@ -486,6 +602,8 @@ const unpluginFactory = (options = {}, meta) => {
 			}
 		},
 		async watchChange(id) {
+			adoptHost(this);
+			adoptWatchMode(this);
 			watchRebuild = true;
 			if (cachedPatterns && !isWatchedSource(id, cachedPatterns)) return;
 			const resolved = await resolveConfigs();
@@ -497,7 +615,25 @@ const unpluginFactory = (options = {}, meta) => {
 		},
 		webpack(compiler) {
 			if (rootOption === void 0) root = compiler.options.context ?? process.cwd();
+			hostMode = compiler.options.mode;
+			const pending = [];
+			host = { error: (message) => {
+				pending.push(message);
+			} };
+			compiler.hooks.compilation.tap("unplugin-style-dictionary", (compilation) => {
+				for (const message of pending.splice(0)) {
+					const reported = new Error(message);
+					reported.name = "UnpluginStyleDictionaryWarning";
+					compilation.warnings.push(reported);
+				}
+			});
+			const drainToConsole = () => {
+				for (const message of pending.splice(0)) console.error(paint("31", message, stderrColour));
+			};
+			compiler.hooks.failed.tap("unplugin-style-dictionary", drainToConsole);
+			compiler.hooks.done.tap("unplugin-style-dictionary", drainToConsole);
 			compiler.hooks.beforeCompile.tapPromise("unplugin-style-dictionary", async () => {
+				isWatching = compiler.watchMode;
 				const resolved = await resolveConfigs();
 				if (resolved.length === 0) return;
 				await compileOnceAcrossInstances(resolved);