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

package/README.md

@@ -70,7 +70,7 @@ Note that you don't have to import tailwind or mantine styles, this preset will
 
 ### Custom mantine theme
 
-If you have a custom mantine theme (<https://mantine.dev/theming/theme-object/>), the recommended setup is to generate a static stylesheet from your theme file and import that stylesheet after the preset.
+If you have a custom mantine theme (<https://mantine.dev/theming/theme-object/>), the recommended setup is to generate a complete stylesheet from your theme file and import that stylesheet directly.
 
 1. Create a theme file (e.g., `mantine-theme.ts`):
 
@@ -109,6 +109,8 @@ export default theme;
 
 2. Configure the integration to generate a stylesheet from your Mantine theme.
 
+By default, the generated file is written next to the theme file with the same basename and a `.css` extension. For example, `./src/mantine-theme.ts` generates `./src/mantine-theme.css`.
+
 PostCSS:
 
 ```js
@@ -118,8 +120,6 @@ export default {
   plugins: [
     mantineTheme({
       input: "./src/mantine-theme.ts",
-      output: "./src/mantine-theme.css",
-      format: "theme",
     }),
   ],
 };
@@ -135,8 +135,6 @@ export default defineConfig({
   plugins: [
     mantineTheme({
       input: "./src/mantine-theme.ts",
-      output: "./src/mantine-theme.css",
-      format: "theme",
     }),
   ],
 });
@@ -144,14 +142,21 @@ export default defineConfig({
 
 The Vite integration also watches local modules imported by your Mantine theme file, so updates to split files like `theme/colors.ts` or `theme/spacing.ts` trigger the generated stylesheet to update automatically.
 
-3. Import the generated stylesheet after the preset.
+3. Import the generated stylesheet.
 
 ```css
-@import "tailwind-preset-mantine";
 @import "./mantine-theme.css";
 ```
 
-This keeps the default preset import path unchanged while still generating Tailwind theme variables from your merged Mantine theme during development and production builds. Your app and editor tooling both read the generated stylesheet, so custom classes stay available in builds and IDE autocomplete.
+The generated stylesheet includes the default imports and your merged Mantine theme.
+
+#### Integration options
+
+| Option | Required | Default | Description |
+|--------|----------|---------|-------------|
+| `input` | Yes | – | Path to the Mantine theme source file |
+| `output` | No | `input` basename with `.css` extension | Path to the generated stylesheet |
+| `format` | No | `theme` | `theme` generates Tailwind aliases only; `standalone` generates Mantine variables plus Tailwind aliases |
 
 ### Standalone pages without MantineProvider
 
@@ -162,7 +167,6 @@ PostCSS or Vite:
 ```ts
 mantineTheme({
   input: "./src/mantine-theme.ts",
-  output: "./src/mantine-theme.css",
   format: "standalone",
 });
 ```
@@ -180,18 +184,17 @@ If you already render `MantineProvider` on the same page, prefer the default `th
 If your setup does not use PostCSS or Vite, you can still generate the theme CSS with the CLI:
 
 ```bash
-npx tailwind-preset-mantine mantine-theme.ts -o theme.css
+npx tailwind-preset-mantine mantine-theme.ts
 ```
 
 Options:
-- `-o, --output`: Output file name/location (default: "theme.css")
+- `-o, --output`: Output file name/location (defaults to the input filename with a `.css` extension)
 - `--format theme|standalone`: Output either Tailwind aliases only (`theme`, default) or Mantine variables plus Tailwind aliases (`standalone`)
 
-Then import the generated file after the preset:
+Then import the generated file:
 
 ```css
-@import "tailwind-preset-mantine";
-@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.5",
-	"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/cli/index.js

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+import { relative } from "node:path";
 import { parseArgs } from "node:util";
 import { validateOutputFormat, writeThemeOutput } from "../core/output.js";
 
@@ -9,7 +10,6 @@ const options = {
 	output: {
 		type: "string",
 		short: "o",
-		default: "theme.css",
 		description: "Output file name",
 	},
 	format: {
@@ -41,7 +41,7 @@ try {
 }
 
 try {
-	await writeThemeOutput(
+	const { outputPath } = await writeThemeOutput(
 		{
 			input: inputFile,
 			output: outputFile,
@@ -50,7 +50,9 @@ try {
 		{ baseDir: pwd },
 	);
 
-	console.log(`Successfully generated ${outputFile}`);
+	console.log(
+		`Successfully generated ${relative(pwd, outputPath) || outputPath}`,
+	);
 } catch (error) {
 	console.error("Error generating theme:", error.message);
 	process.exit(1);

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}
 
@@ -263,3 +260,21 @@ export function generateStandaloneTheme(theme = DEFAULT_THEME) {
 	return `${AUTOGENERATED_COMMENT}${standaloneMantineCSS}
 ${tailwindThemeCSS}`;
 }
+
+/**
+ * @param {import("@mantine/core").MantineTheme} theme
+ * @param {"theme" | "standalone"} [format]
+ */
+export function generateManagedStylesheet(
+	theme = DEFAULT_THEME,
+	format = "theme",
+) {
+	const themeCSS = stripAutogeneratedComment(
+		format === "standalone"
+			? generateStandaloneTheme(theme)
+			: generateTheme(theme),
+	);
+
+	return `${generateDefaultImports()}
+${themeCSS}`;
+}

package/src/core/output.js

@@ -1,35 +1,61 @@
-import { mkdir, readFile, writeFile } from "node:fs/promises";
-import { dirname, resolve } from "node:path";
+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 { generateStandaloneTheme, generateTheme } from "./generate.js";
+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_FORMAT_GENERATORS = {
-	theme: generateTheme,
-	standalone: generateStandaloneTheme,
-};
+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) {
 		throw new Error("Missing required `input` option.");
 	}
-
-	if (!options?.output) {
-		throw new Error("Missing required `output` option.");
-	}
 }
 
 export function validateOutputFormat(format = "theme") {
-	if (!(format in OUTPUT_FORMAT_GENERATORS)) {
+	if (!OUTPUT_FORMATS.includes(format)) {
 		throw new Error(
-			`Invalid output format: ${format}. Expected one of: ${Object.keys(OUTPUT_FORMAT_GENERATORS).join(", ")}`,
+			`Invalid output format: ${format}. Expected one of: ${OUTPUT_FORMATS.join(", ")}`,
 		);
 	}
 }
 
 /**
- * @param {{ input: string, output: string, format?: "theme" | "standalone" }} options
+ * @param {string} inputPath
+ * @param {string | undefined} output
+ * @param {string} baseDir
+ */
+function resolveOutputPath(inputPath, output, baseDir) {
+	if (output) {
+		return resolve(baseDir, output);
+	}
+
+	const inputDirectory = dirname(inputPath);
+	const inputFilename = basename(inputPath, extname(inputPath));
+
+	return join(inputDirectory, `${inputFilename}.css`);
+}
+
+/**
+ * @param {{ input: string, output?: string, format?: "theme" | "standalone" }} options
  * @param {string} [baseDir]
  */
 export function resolveThemeOutputOptions(options, baseDir = process.cwd()) {
@@ -37,10 +63,11 @@ export function resolveThemeOutputOptions(options, baseDir = process.cwd()) {
 
 	const format = options.format ?? "theme";
 	validateOutputFormat(format);
+	const inputPath = resolve(baseDir, options.input);
 
 	return {
-		inputPath: resolve(baseDir, options.input),
-		outputPath: resolve(baseDir, options.output),
+		inputPath,
+		outputPath: resolveOutputPath(inputPath, options.output, baseDir),
 		format,
 	};
 }
@@ -50,23 +77,334 @@ 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 {
-		return fileURLToPath(new URL(specifier, pathToFileURL(importer)));
+		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 {
+		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 {{ input: string, output: string, format?: "theme" | "standalone" }} options
+ * @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;
+}
+
+/**
+ * @param {{ input: string, output?: string, format?: "theme" | "standalone" }} options
  * @param {{ baseDir?: string, resolveImport?: (specifier: string, importer: string) => Promise<string | null> }} [runtimeOptions]
  */
 export async function buildThemeOutput(options, runtimeOptions = {}) {
@@ -76,12 +414,9 @@ export async function buildThemeOutput(options, runtimeOptions = {}) {
 		options,
 		baseDir,
 	);
-	const { absolutePath, theme } = await loadThemeFromFile(inputPath);
-	const css = OUTPUT_FORMAT_GENERATORS[format](theme);
-	const dependencies = await collectThemeDependencies(
-		absolutePath,
-		resolveImport,
-	);
+	const dependencies = await collectThemeDependencies(inputPath, resolveImport);
+	const { absolutePath, theme } = await loadThemeFromFile(inputPath, baseDir);
+	const css = generateManagedStylesheet(theme, format);
 
 	return {
 		css,
@@ -93,7 +428,7 @@ export async function buildThemeOutput(options, runtimeOptions = {}) {
 }
 
 /**
- * @param {{ input: string, output: string, format?: "theme" | "standalone" }} options
+ * @param {{ input: string, output?: string, format?: "theme" | "standalone" }} options
  * @param {{ baseDir?: string, resolveImport?: (specifier: string, importer: string) => Promise<string | null> }} [runtimeOptions]
  */
 export async function writeThemeOutput(options, runtimeOptions = {}) {

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.d.ts

@@ -1,6 +1,6 @@
 export interface MantineThemePluginOptions {
 	input: string;
-	output: string;
+	output?: string;
 	format?: "theme" | "standalone";
 }
 

package/src/integrations/postcss.js

@@ -1,9 +1,11 @@
+import { access } from "node:fs/promises";
+import { dirname, resolve } from "node:path";
 import { writeThemeOutput } from "../core/output.js";
 
 /**
  * @typedef {{
  * 	input: string;
- * 	output: string;
+ * 	output?: string;
  * 	format?: "theme" | "standalone";
  * }} MantineThemePluginOptions
  */
@@ -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.d.ts

@@ -1,6 +1,6 @@
 export interface MantineThemePluginOptions {
 	input: string;
-	output: string;
+	output?: string;
 	format?: "theme" | "standalone";
 }
 

package/src/integrations/vite.js

@@ -3,7 +3,7 @@ import { writeThemeOutput } from "../core/output.js";
 /**
  * @typedef {{
  * 	input: string;
- * 	output: string;
+ * 	output?: string;
  * 	format?: "theme" | "standalone";
  * }} MantineThemePluginOptions
  */
@@ -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);