tailwind-preset-mantine 4.0.0-alpha.6 → 4.0.0

package/README.md

@@ -194,7 +194,7 @@ Options:
 Then import the generated file:
 
 ```css
-@import "./theme.css";
+@import "./mantine-theme.css";
 ```
 
 Use `--format standalone` when generating CSS for pages that do not render `MantineProvider`.

package/package.json

@@ -1,69 +1,69 @@
 {
-	"name": "tailwind-preset-mantine",
-	"version": "4.0.0-alpha.6",
-	"description": "Integrate Mantine with Tailwind CSS",
-	"keywords": [
-		"mantine",
-		"tailwind",
-		"preset"
-	],
-	"homepage": "https://github.com/songkeys/tailwind-preset-mantine#readme",
-	"bugs": {
-		"url": "https://github.com/songkeys/tailwind-preset-mantine/issues"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/songkeys/tailwind-preset-mantine.git"
-	},
-	"license": "MIT",
-	"author": "Songkeys",
-	"type": "module",
-	"exports": {
-		".": "./src/index.css",
-		"./theme.css": "./src/theme.css",
-		"./postcss": {
-			"types": "./src/integrations/postcss.d.ts",
-			"default": "./src/integrations/postcss.js"
-		},
-		"./vite": {
-			"types": "./src/integrations/vite.d.ts",
-			"default": "./src/integrations/vite.js"
-		}
-	},
-	"main": "src/index.css",
-	"bin": {
-		"tailwind-preset-mantine": "src/cli/index.js"
-	},
-	"files": [
-		"src"
-	],
-	"engines": {
-		"node": ">=22.15.0"
-	},
-	"scripts": {
-		"generate": "node scripts/generate.js",
-		"lint": "biome check .",
-		"lint:fix": "biome check . --write",
-		"release": "bumpp",
-		"test": "node --test"
-	},
-	"dependencies": {
-		"es-module-lexer": "^2.0.0",
-		"postcss": "^8.5.6",
-		"tsx": "^4.21.0"
-	},
-	"devDependencies": {
-		"@tailwindcss/postcss": "^4",
-		"@tailwindcss/vite": "^4",
-		"@biomejs/biome": "^2.4.10",
-		"@mantine/core": "^9",
-		"bumpp": "^11.0.1",
-		"tailwindcss": "^4",
-		"vite": "^7"
-	},
-	"peerDependencies": {
-		"@mantine/core": "^7 || ^7 || ^9",
-		"tailwindcss": "^4"
-	},
-	"packageManager": "pnpm@10.33.0"
-}
+  "name": "tailwind-preset-mantine",
+  "version": "4.0.0",
+  "description": "Integrate Mantine with Tailwind CSS",
+  "keywords": [
+    "mantine",
+    "tailwind",
+    "preset"
+  ],
+  "homepage": "https://github.com/songkeys/tailwind-preset-mantine#readme",
+  "bugs": {
+    "url": "https://github.com/songkeys/tailwind-preset-mantine/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/songkeys/tailwind-preset-mantine.git"
+  },
+  "license": "MIT",
+  "author": "Songkeys",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.css",
+    "./theme.css": "./src/theme.css",
+    "./postcss": {
+      "types": "./src/integrations/postcss.d.ts",
+      "default": "./src/integrations/postcss.js"
+    },
+    "./vite": {
+      "types": "./src/integrations/vite.d.ts",
+      "default": "./src/integrations/vite.js"
+    }
+  },
+  "main": "src/index.css",
+  "bin": {
+    "tailwind-preset-mantine": "src/cli/index.js"
+  },
+  "files": [
+    "src"
+  ],
+  "engines": {
+    "node": ">=22.15.0"
+  },
+  "dependencies": {
+    "es-module-lexer": "^2.0.0",
+    "get-tsconfig": "^4.13.7",
+    "postcss": "^8.5.9",
+    "tsx": "^4.21.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.4.11",
+    "@mantine/core": "^9.0.1",
+    "@tailwindcss/postcss": "^4.2.2",
+    "@tailwindcss/vite": "^4.2.2",
+    "bumpp": "^11.0.1",
+    "tailwindcss": "^4.2.2",
+    "vite": "^8.0.8"
+  },
+  "peerDependencies": {
+    "@mantine/core": "^7 || ^8 || ^9",
+    "tailwindcss": "^4"
+  },
+  "scripts": {
+    "generate": "node scripts/generate.js",
+    "lint": "biome check .",
+    "lint:fix": "biome check . --write",
+    "release": "bumpp",
+    "test": "node --test"
+  }
+}

package/src/core/generate.js

@@ -75,7 +75,6 @@ function generateStandaloneMantineVariables(theme = DEFAULT_THEME) {
  * @param {import("@mantine/core").MantineTheme} theme
  */
 export function generateTheme(theme = DEFAULT_THEME) {
-	const isDefault = JSON.stringify(theme) === JSON.stringify(DEFAULT_THEME);
 	const mergedTheme = mergeMantineTheme(DEFAULT_THEME, theme);
 
 	const colorKeys = Object.keys(mergedTheme.colors ?? {});
@@ -91,12 +90,10 @@ export function generateTheme(theme = DEFAULT_THEME) {
 	const defaultShadowKey = shadowKeys.includes("xs")
 		? "xs"
 		: (shadowKeys[0] ?? "xs");
-	const darkVariant = isDefault
-		? `@custom-variant dark (&:where(
+	const darkVariant = `@custom-variant dark (&:where(
 		[data-mantine-color-scheme="dark"],
 		[data-mantine-color-scheme="dark"] *
-	));`
-		: "";
+	));`;
 
 	return `${AUTOGENERATED_COMMENT}${darkVariant}
 

package/src/core/output.js

@@ -1,11 +1,28 @@
-import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { access, mkdir, readFile, writeFile } from "node:fs/promises";
 import { basename, dirname, extname, join, resolve } from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
+import { createPathsMatcher, getTsconfig } from "get-tsconfig";
 import { generateManagedStylesheet } from "./generate.js";
 import { collectThemeDependencies } from "./theme-dependencies.js";
 import { loadThemeFromFile } from "./theme-loader.js";
 
 const OUTPUT_FORMATS = ["theme", "standalone"];
+const PACKAGE_JSON_FILENAMES = ["package.json"];
+const THEME_SOURCE_EXTENSIONS = [
+	".js",
+	".jsx",
+	".mjs",
+	".cjs",
+	".json",
+	".ts",
+	".tsx",
+	".mts",
+	".cts",
+];
+const JSON_FILE_CACHE = new Map();
+const TSCONFIG_DISCOVERY_CACHE = new Map();
+const TSCONFIG_FS_CACHE = new Map();
+const TSCONFIG_PATHS_MATCHER_CACHE = new Map();
 
 function validateOptions(options) {
 	if (!options?.input) {
@@ -60,19 +77,330 @@ export function resolveThemeOutputOptions(options, baseDir = process.cwd()) {
  * @param {string} importer
  */
 async function resolveThemeImport(specifier, importer) {
-	if (!(specifier.startsWith(".") || specifier.startsWith("file:"))) {
-		if (specifier.startsWith("/")) {
-			return specifier;
+	if (specifier.startsWith("/")) {
+		return specifier;
+	}
+
+	try {
+		if (specifier.startsWith("file:")) {
+			return fileURLToPath(specifier);
+		}
+
+		if (specifier.startsWith(".")) {
+			return fileURLToPath(new URL(specifier, pathToFileURL(importer)));
+		}
+	} catch {
+		// Fall through to config-based alias resolution.
+	}
+
+	if (specifier.startsWith("#")) {
+		const packageJsonPath = await findClosestConfig(
+			dirname(importer),
+			PACKAGE_JSON_FILENAMES,
+		);
+		const packageImport = await resolvePackageImport(
+			specifier,
+			packageJsonPath,
+		);
+
+		if (packageImport) {
+			return packageImport;
+		}
+	}
+
+	return resolveTsconfigImport(specifier, dirname(importer));
+}
+
+function matchSpecifierPattern(specifier, pattern) {
+	const wildcardIndex = pattern.indexOf("*");
+
+	if (wildcardIndex === -1) {
+		return specifier === pattern ? "" : null;
+	}
+
+	const prefix = pattern.slice(0, wildcardIndex);
+	const suffix = pattern.slice(wildcardIndex + 1);
+
+	if (!specifier.startsWith(prefix) || !specifier.endsWith(suffix)) {
+		return null;
+	}
+
+	return specifier.slice(prefix.length, specifier.length - suffix.length);
+}
+
+function flattenImportTargets(target) {
+	if (typeof target === "string") {
+		return [target];
+	}
+
+	if (Array.isArray(target)) {
+		return target.flatMap((item) => flattenImportTargets(item));
+	}
+
+	if (!target || typeof target !== "object") {
+		return [];
+	}
+
+	const orderedConditions = ["default", "import", "node"];
+	const orderedTargets = [];
+
+	for (const condition of orderedConditions) {
+		if (condition in target) {
+			orderedTargets.push(target[condition]);
+		}
+	}
+
+	for (const [condition, value] of Object.entries(target)) {
+		if (!orderedConditions.includes(condition)) {
+			orderedTargets.push(value);
+		}
+	}
+
+	return orderedTargets.flatMap((value) => flattenImportTargets(value));
+}
+
+function getMappedImportCandidates(
+	specifier,
+	mappings,
+	baseDirectory,
+	localOnly,
+) {
+	if (!mappings || typeof mappings !== "object") {
+		return [];
+	}
+
+	for (const [pattern, target] of Object.entries(mappings)) {
+		const match = matchSpecifierPattern(specifier, pattern);
+
+		if (match == null) {
+			continue;
+		}
+
+		const resolvedCandidates = [];
+
+		for (const candidate of flattenImportTargets(target)) {
+			if (typeof candidate !== "string") {
+				continue;
+			}
+
+			if (localOnly && !candidate.startsWith("./")) {
+				continue;
+			}
+
+			const resolvedTarget = candidate.includes("*")
+				? candidate.replace("*", match)
+				: candidate;
+
+			if (
+				/^[a-z]+:/i.test(resolvedTarget) &&
+				!resolvedTarget.startsWith("file:")
+			) {
+				continue;
+			}
+
+			resolvedCandidates.push(
+				resolvedTarget.startsWith("file:")
+					? fileURLToPath(resolvedTarget)
+					: resolve(baseDirectory, resolvedTarget),
+			);
+		}
+
+		return resolvedCandidates;
+	}
+
+	return [];
+}
+
+async function pathExists(path) {
+	try {
+		await access(path);
+		return true;
+	} catch {
+		return false;
+	}
+}
+
+/**
+ * @param {string} path
+ */
+async function readJsonFile(path) {
+	if (JSON_FILE_CACHE.has(path)) {
+		return JSON_FILE_CACHE.get(path);
+	}
+
+	const json = await readFile(path, "utf8")
+		.then((source) => JSON.parse(source))
+		.catch(() => null);
+
+	JSON_FILE_CACHE.set(path, json);
+	return json;
+}
+
+/**
+ * @param {string} startDirectory
+ * @param {string[]} filenames
+ */
+async function findClosestConfig(startDirectory, filenames) {
+	let currentDirectory = startDirectory;
+
+	while (true) {
+		for (const filename of filenames) {
+			const candidate = join(currentDirectory, filename);
+
+			if (await pathExists(candidate)) {
+				return candidate;
+			}
+		}
+
+		const parentDirectory = dirname(currentDirectory);
+
+		if (parentDirectory === currentDirectory) {
+			return null;
 		}
 
+		currentDirectory = parentDirectory;
+	}
+}
+
+/**
+ * @param {string} specifier
+ * @param {string | null} packageJsonPath
+ */
+async function resolvePackageImport(specifier, packageJsonPath) {
+	if (!packageJsonPath) {
 		return null;
 	}
 
+	const packageJson = await readJsonFile(packageJsonPath);
+	return resolveFirstExistingThemeSource(
+		getMappedImportCandidates(
+			specifier,
+			packageJson?.imports,
+			dirname(packageJsonPath),
+			true,
+		),
+	);
+}
+
+function getTsconfigPathsMatcher(tsconfigPath) {
+	if (TSCONFIG_PATHS_MATCHER_CACHE.has(tsconfigPath.path)) {
+		return TSCONFIG_PATHS_MATCHER_CACHE.get(tsconfigPath.path);
+	}
+
+	let matcher = null;
+
 	try {
-		return fileURLToPath(new URL(specifier, pathToFileURL(importer)));
+		matcher = createPathsMatcher(tsconfigPath);
 	} catch {
+		// Ignore unreadable or invalid configs and continue without alias support.
+	}
+
+	TSCONFIG_PATHS_MATCHER_CACHE.set(tsconfigPath.path, matcher);
+	return matcher;
+}
+
+function getConfigDistance(startDirectory, configPath) {
+	let currentDirectory = resolve(startDirectory);
+	const configDirectory = dirname(configPath);
+	let distance = 0;
+
+	while (true) {
+		if (currentDirectory === configDirectory) {
+			return distance;
+		}
+
+		const parentDirectory = dirname(currentDirectory);
+
+		if (parentDirectory === currentDirectory) {
+			return Number.POSITIVE_INFINITY;
+		}
+
+		currentDirectory = parentDirectory;
+		distance += 1;
+	}
+}
+
+function getClosestTsconfigResult(startDirectory) {
+	if (TSCONFIG_DISCOVERY_CACHE.has(startDirectory)) {
+		return TSCONFIG_DISCOVERY_CACHE.get(startDirectory);
+	}
+
+	const tsconfigResult = getTsconfig(
+		startDirectory,
+		"tsconfig.json",
+		TSCONFIG_FS_CACHE,
+	);
+	const jsconfigResult = getTsconfig(
+		startDirectory,
+		"jsconfig.json",
+		TSCONFIG_FS_CACHE,
+	);
+
+	let closestResult = tsconfigResult ?? jsconfigResult;
+
+	if (tsconfigResult && jsconfigResult) {
+		const tsconfigDistance = getConfigDistance(
+			startDirectory,
+			tsconfigResult.path,
+		);
+		const jsconfigDistance = getConfigDistance(
+			startDirectory,
+			jsconfigResult.path,
+		);
+
+		closestResult =
+			jsconfigDistance < tsconfigDistance ? jsconfigResult : tsconfigResult;
+	}
+
+	TSCONFIG_DISCOVERY_CACHE.set(startDirectory, closestResult);
+	return closestResult;
+}
+
+function getThemeSourceCandidates(path) {
+	const candidates = [path];
+
+	if (extname(path)) {
+		return candidates;
+	}
+
+	for (const extension of THEME_SOURCE_EXTENSIONS) {
+		candidates.push(`${path}${extension}`);
+	}
+
+	for (const extension of THEME_SOURCE_EXTENSIONS) {
+		candidates.push(join(path, `index${extension}`));
+	}
+
+	return candidates;
+}
+
+async function resolveFirstExistingThemeSource(candidatePaths) {
+	for (const candidatePath of candidatePaths) {
+		for (const candidate of getThemeSourceCandidates(candidatePath)) {
+			if (await pathExists(candidate)) {
+				return candidate;
+			}
+		}
+	}
+
+	return null;
+}
+
+/**
+ * @param {string} specifier
+ * @param {string} startDirectory
+ */
+async function resolveTsconfigImport(specifier, startDirectory) {
+	const tsconfigResult = getClosestTsconfigResult(startDirectory);
+
+	if (!tsconfigResult) {
 		return null;
 	}
+
+	const pathsMatcher = getTsconfigPathsMatcher(tsconfigResult);
+	return pathsMatcher
+		? resolveFirstExistingThemeSource(pathsMatcher(specifier))
+		: null;
 }
 
 /**
@@ -86,12 +414,9 @@ export async function buildThemeOutput(options, runtimeOptions = {}) {
 		options,
 		baseDir,
 	);
-	const { absolutePath, theme } = await loadThemeFromFile(inputPath);
+	const dependencies = await collectThemeDependencies(inputPath, resolveImport);
+	const { absolutePath, theme } = await loadThemeFromFile(inputPath, baseDir);
 	const css = generateManagedStylesheet(theme, format);
-	const dependencies = await collectThemeDependencies(
-		absolutePath,
-		resolveImport,
-	);
 
 	return {
 		css,

package/src/core/theme-dependencies.js

@@ -1,5 +1,5 @@
-import { readFile } from "node:fs/promises";
-import { extname } from "node:path";
+import { access, readFile } from "node:fs/promises";
+import { extname, join } from "node:path";
 import { init, parse } from "es-module-lexer";
 
 const THEME_SOURCE_EXTENSIONS = new Set([
@@ -7,11 +7,78 @@ const THEME_SOURCE_EXTENSIONS = new Set([
 	".jsx",
 	".mjs",
 	".cjs",
+	".json",
 	".ts",
 	".tsx",
 	".mts",
 	".cts",
 ]);
+const COMMONJS_REQUIRE_PATTERN =
+	/\brequire\s*\(\s*(['"`])([^'"`\n\r]+)\1\s*\)/g;
+
+function normalizeResolvedPath(resolved) {
+	return resolved.split("?", 1)[0]?.split("#", 1)[0] ?? resolved;
+}
+
+async function fileExists(file) {
+	try {
+		await access(file);
+		return true;
+	} catch {
+		return false;
+	}
+}
+
+async function resolveThemeSourceDependency(
+	specifier,
+	importer,
+	resolveImport,
+) {
+	const resolved = await resolveImport(specifier, importer);
+
+	if (resolved == null || resolved.startsWith("\0")) {
+		return null;
+	}
+
+	const normalized = normalizeResolvedPath(resolved);
+	const extension = extname(normalized);
+
+	if (THEME_SOURCE_EXTENSIONS.has(extension)) {
+		return normalized;
+	}
+
+	if (extension) {
+		return null;
+	}
+
+	for (const candidateExtension of THEME_SOURCE_EXTENSIONS) {
+		const candidate = `${normalized}${candidateExtension}`;
+
+		if (await fileExists(candidate)) {
+			return candidate;
+		}
+	}
+
+	for (const candidateExtension of THEME_SOURCE_EXTENSIONS) {
+		const candidate = join(normalized, `index${candidateExtension}`);
+
+		if (await fileExists(candidate)) {
+			return candidate;
+		}
+	}
+
+	return null;
+}
+
+function collectRequireSpecifiers(source) {
+	const specifiers = [];
+
+	for (const match of source.matchAll(COMMONJS_REQUIRE_PATTERN)) {
+		specifiers.push(match[2]);
+	}
+
+	return specifiers;
+}
 
 /**
  * @param {string} entryFile
@@ -32,26 +99,33 @@ export async function collectThemeDependencies(entryFile, resolveImport) {
 
 		const source = await readFile(file, "utf8");
 		const [imports] = parse(source);
+		const specifiers = new Set();
 
 		for (const record of imports) {
-			if (record.d !== -1 || record.n == null) {
+			if (record.n == null) {
 				continue;
 			}
 
-			const resolved = await resolveImport(record.n, file);
+			specifiers.add(record.n);
+		}
 
-			if (resolved == null || resolved.startsWith("\0")) {
-				continue;
-			}
+		for (const specifier of collectRequireSpecifiers(source)) {
+			specifiers.add(specifier);
+		}
 
-			const normalized = resolved.split("?", 1)[0];
+		for (const specifier of specifiers) {
+			const dependency = await resolveThemeSourceDependency(
+				specifier,
+				file,
+				resolveImport,
+			);
 
-			if (!THEME_SOURCE_EXTENSIONS.has(extname(normalized))) {
+			if (dependency == null) {
 				continue;
 			}
 
-			dependencies.add(normalized);
-			await visit(normalized);
+			dependencies.add(dependency);
+			await visit(dependency);
 		}
 	}
 

package/src/core/theme-loader.js

@@ -1,9 +1,14 @@
-import "tsx";
-import { stat } from "node:fs/promises";
+import { execFile as execFileCallback } from "node:child_process";
 import * as nodeModule from "node:module";
 import { resolve } from "node:path";
-import { pathToFileURL } from "node:url";
-
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { promisify } from "node:util";
+
+const execFile = promisify(execFileCallback);
+const THIS_FILE = fileURLToPath(import.meta.url);
+const CHILD_RESULT_MARKER = "__TWPM_THEME_RESULT__";
+const require = nodeModule.createRequire(import.meta.url);
+const TSX_LOADER_PATH = require.resolve("tsx");
 const STYLE_EXTENSIONS = [
 	".css",
 	".scss",
@@ -66,7 +71,6 @@ function installThemeImportHooks() {
 
 	themeImportHooksInstalled = true;
 
-	const require = nodeModule.createRequire(import.meta.url);
 	const extensions = require.extensions;
 
 	for (const extension of STYLE_EXTENSIONS) {
@@ -112,13 +116,11 @@ function installThemeImportHooks() {
  * @param {string} themePath
  * @param {string} baseDir
  */
-export async function loadThemeFromFile(themePath, baseDir = process.cwd()) {
+async function loadThemeFromFileInProcess(themePath, baseDir = process.cwd()) {
 	installThemeImportHooks();
 
 	const absolutePath = resolve(baseDir, themePath);
-	const themeURL = pathToFileURL(absolutePath);
-	const { mtimeMs } = await stat(absolutePath);
-	const themeModule = await import(`${themeURL.href}?t=${mtimeMs}`);
+	const themeModule = await import(pathToFileURL(absolutePath).href);
 	const theme = unwrapThemeExport(themeModule);
 
 	if (!theme) {
@@ -129,3 +131,38 @@ export async function loadThemeFromFile(themePath, baseDir = process.cwd()) {
 
 	return { absolutePath, theme };
 }
+
+/**
+ * @param {string} themePath
+ * @param {string} baseDir
+ */
+export async function loadThemeFromFile(themePath, baseDir = process.cwd()) {
+	const { stdout } = await execFile(
+		process.execPath,
+		["--import", TSX_LOADER_PATH, THIS_FILE, "--child", themePath, baseDir],
+		{
+			cwd: resolve(baseDir),
+			maxBuffer: 5 * 1024 * 1024,
+		},
+	);
+	const markerIndex = stdout.lastIndexOf(CHILD_RESULT_MARKER);
+
+	if (markerIndex === -1) {
+		throw new Error("Theme loader child process did not return a result.");
+	}
+
+	return JSON.parse(stdout.slice(markerIndex + CHILD_RESULT_MARKER.length));
+}
+
+if (process.argv[1] === THIS_FILE && process.argv[2] === "--child") {
+	const themePath = process.argv[3];
+	const baseDir = process.argv[4] ?? process.cwd();
+
+	try {
+		const result = await loadThemeFromFileInProcess(themePath, baseDir);
+		process.stdout.write(`${CHILD_RESULT_MARKER}${JSON.stringify(result)}`);
+	} catch (error) {
+		console.error(error);
+		process.exitCode = 1;
+	}
+}

package/src/integrations/postcss.js

@@ -1,3 +1,5 @@
+import { access } from "node:fs/promises";
+import { dirname, resolve } from "node:path";
 import { writeThemeOutput } from "../core/output.js";
 
 /**
@@ -12,11 +14,48 @@ import { writeThemeOutput } from "../core/output.js";
  * @param {MantineThemePluginOptions} options
  */
 function mantineTheme(options) {
+	async function resolveBaseDir(result) {
+		const candidates = [];
+		const cwd = result.opts.cwd ?? process.cwd();
+
+		if (result.opts.from) {
+			let current = resolve(cwd, result.opts.from);
+			current = dirname(current);
+
+			while (true) {
+				candidates.push(current);
+				const parent = dirname(current);
+
+				if (parent === current) {
+					break;
+				}
+
+				current = parent;
+			}
+		}
+
+		candidates.push(cwd);
+
+		const dedupedCandidates = [...new Set(candidates)];
+
+		for (const baseDir of dedupedCandidates) {
+			try {
+				await access(resolve(baseDir, options.input));
+				return baseDir;
+			} catch {
+				// Try the next candidate directory.
+			}
+		}
+
+		return cwd;
+	}
+
 	return {
 		postcssPlugin: "tailwind-preset-mantine",
 		async Once(_, { result }) {
+			const baseDir = await resolveBaseDir(result);
 			const { dependencies } = await writeThemeOutput(options, {
-				baseDir: process.cwd(),
+				baseDir,
 			});
 
 			for (const file of dependencies) {

package/src/integrations/vite.js

@@ -16,22 +16,37 @@ export default function mantineTheme(options) {
 	let outputPath = "";
 	let dependencyFiles = new Set();
 	let generatePromise = null;
+	let pendingRegeneration = false;
 
-	async function generateThemeOutput() {
-		if (!generatePromise) {
-			generatePromise = writeThemeOutput(options, { baseDir: root }).finally(
-				() => {
-					generatePromise = null;
-				},
-			);
-		}
-
-		const result = await generatePromise;
+	async function runGeneration() {
+		const result = await writeThemeOutput(options, { baseDir: root });
 		outputPath = result.outputPath;
 		dependencyFiles = new Set(result.dependencies);
 		return result;
 	}
 
+	async function generateThemeOutput({ queueNextRun = false } = {}) {
+		if (generatePromise) {
+			pendingRegeneration ||= queueNextRun;
+			return generatePromise;
+		}
+
+		generatePromise = (async () => {
+			let result;
+
+			do {
+				pendingRegeneration = false;
+				result = await runGeneration();
+			} while (pendingRegeneration);
+
+			return result;
+		})().finally(() => {
+			generatePromise = null;
+		});
+
+		return generatePromise;
+	}
+
 	return {
 		name: "tailwind-preset-mantine",
 		async configResolved(config) {
@@ -45,8 +60,8 @@ export default function mantineTheme(options) {
 			}
 		},
 		configureServer(server) {
-			const refresh = async () => {
-				const result = await generateThemeOutput();
+			const refresh = async (options = undefined) => {
+				const result = await generateThemeOutput(options);
 				server.watcher.add([...result.dependencies]);
 			};
 
@@ -55,7 +70,7 @@ export default function mantineTheme(options) {
 					return;
 				}
 
-				await refresh();
+				await refresh({ queueNextRun: true });
 			};
 
 			server.watcher.on("change", handleFileChange);