@mochi-css/tsuki 2.1.0 → 4.0.0

package/README.md

@@ -8,3 +8,22 @@ You can run it with:
 ```bash
 npx @mochi-css/tsuki
 ```
+
+`tsuki` handles installing integrations for next.js and vite frameworks.
+To get more info, run it with `-h` or `--help` option.
+
+## What `tsuki` sets up
+
+During initialization, `tsuki` installs the required packages and creates a `mochi.config.ts` file in your project root.
+This file is the single place to configure all Mochi-CSS options (`roots`, `plugins`, `splitCss`, etc.) - all integrations load it automatically.
+
+## Presets
+
+Use the `--preset` / `-p` flag to choose a framework preset non-interactively:
+
+```bash
+npx @mochi-css/tsuki --preset vite
+npx @mochi-css/tsuki --preset nextjs
+```
+
+If `-p` is omitted, `tsuki` will prompt you to select a preset interactively.

package/dist/index.js

@@ -1,49 +1,16 @@
 #!/usr/bin/env node
-//#region rolldown:runtime
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-
-//#endregion
-let commander = require("commander");
-commander = __toESM(commander);
-let __clack_prompts = require("@clack/prompts");
-__clack_prompts = __toESM(__clack_prompts);
-let picocolors = require("picocolors");
-picocolors = __toESM(picocolors);
-let node_readline = require("node:readline");
-node_readline = __toESM(node_readline);
-let node_stream = require("node:stream");
-node_stream = __toESM(node_stream);
-let package_manager_detector = require("package-manager-detector");
-package_manager_detector = __toESM(package_manager_detector);
-let cross_spawn = require("cross-spawn");
-cross_spawn = __toESM(cross_spawn);
-let fs_extra = require("fs-extra");
-fs_extra = __toESM(fs_extra);
-let fs_promises = require("fs/promises");
-fs_promises = __toESM(fs_promises);
-let path = require("path");
-path = __toESM(path);
-let magicast = require("magicast");
-magicast = __toESM(magicast);
+import { Option, program } from "commander";
+import * as p from "@clack/prompts";
+import pc from "picocolors";
+import { createInterface } from "node:readline";
+import { PassThrough } from "node:stream";
+import { detect, resolveCommand } from "package-manager-detector";
+import spawn from "cross-spawn";
+import fsExtra from "fs-extra";
+import fs from "fs/promises";
+import path from "path";
+import { generateCode, parseModule } from "magicast";
+import dedent from "dedent";
 
 //#region src/install.ts
 function onceEvent(emitter, event) {
@@ -55,7 +22,7 @@ function onceEvent(emitter, event) {
 }
 function spawnProcess(command, args, options) {
 	return new Promise((resolve, reject) => {
-		const child = (0, cross_spawn.default)(command, args, options);
+		const child = spawn(command, args, options);
 		const onSpawn = () => {
 			child.off("error", onError);
 			resolve(child);
@@ -69,7 +36,7 @@ function spawnProcess(command, args, options) {
 	});
 }
 async function runInstall(title, command, args, packages) {
-	const log = __clack_prompts.taskLog({ title });
+	const log = p.taskLog({ title });
 	log.message(`${command} ${args.join(" ")}`);
 	try {
 		const child = await spawnProcess(command, args, { stdio: [
@@ -77,7 +44,7 @@ async function runInstall(title, command, args, packages) {
 			"pipe",
 			"pipe"
 		] });
-		const merged = new node_stream.PassThrough();
+		const merged = new PassThrough();
 		let openStreams = 0;
 		for (const stream of [child.stdout, child.stderr]) {
 			if (!stream) continue;
@@ -87,7 +54,7 @@ async function runInstall(title, command, args, packages) {
 				if (--openStreams === 0) merged.end();
 			});
 		}
-		const rl = (0, node_readline.createInterface)({
+		const rl = createInterface({
 			input: merged,
 			crlfDelay: Infinity
 		});
@@ -105,7 +72,7 @@ async function runInstall(title, command, args, packages) {
 }
 async function installPackages(packages, autoInstall = false) {
 	if (packages.length === 0) return;
-	const packageManager = await (0, package_manager_detector.detect)({ strategies: [
+	const packageManager = await detect({ strategies: [
 		"packageManager-field",
 		"devEngines-field",
 		"lockfile",
@@ -118,19 +85,19 @@ async function installPackages(packages, autoInstall = false) {
 	const prodPackages = packages.filter((pkg) => pkg.dev === false).map((pkg) => pkg.name);
 	const packageList = [...devPackages.map((name) => `${name} (dev)`), ...prodPackages.map((name) => name)].join(", ");
 	if (!autoInstall) {
-		const confirmed = await __clack_prompts.confirm({ message: `Install the following packages: ${packageList}?` });
-		if (__clack_prompts.isCancel(confirmed) || !confirmed) {
-			__clack_prompts.log.info("Skipping package installation");
+		const confirmed = await p.confirm({ message: `Install the following packages: ${packageList}?` });
+		if (p.isCancel(confirmed) || !confirmed) {
+			p.log.info("Skipping package installation");
 			return;
 		}
 	}
 	if (devPackages.length > 0) {
-		const cmd = (0, package_manager_detector.resolveCommand)(agent, "add", [devFlag, ...devPackages]);
+		const cmd = resolveCommand(agent, "add", [devFlag, ...devPackages]);
 		if (cmd === null) throw new Error("Could not prepare install command");
 		await runInstall(`Installing dev dependencies: ${devPackages.join(", ")}`, cmd.command, cmd.args, devPackages);
 	}
 	if (prodPackages.length > 0) {
-		const cmd = (0, package_manager_detector.resolveCommand)(agent, "add", prodPackages);
+		const cmd = resolveCommand(agent, "add", prodPackages);
 		if (cmd === null) throw new Error("Could not prepare install command");
 		await runInstall(`Installing dependencies: ${prodPackages.join(", ")}`, cmd.command, cmd.args, prodPackages);
 	}
@@ -141,8 +108,8 @@ async function installPackages(packages, autoInstall = false) {
 var ModuleRunner = class {
 	packages = [];
 	modules = [];
-	register(module$1) {
-		this.modules.push(module$1);
+	register(module) {
+		this.modules.push(module);
 		return this;
 	}
 	async run(options = {}) {
@@ -163,11 +130,17 @@ var ModuleRunner = class {
 			nonInteractive,
 			moduleOptions
 		};
-		for (const module$1 of this.modules) await module$1.run(ctx);
+		for (const module of this.modules) await module.run(ctx);
 		if (this.packages.length > 0) await installPackages(this.packages, autoInstall);
 	}
 };
 
+//#endregion
+//#region src/version.ts
+function mochiPackage(name) {
+	return `${name}@^${parseInt("4.0.0".split(".")[0] ?? "0", 10)}.0.0`;
+}
+
 //#endregion
 //#region src/modules/ast.ts
 function getPropKeyName(prop) {
@@ -175,6 +148,29 @@ function getPropKeyName(prop) {
 	if (typeof key["name"] === "string") return key["name"];
 	if (typeof key["value"] === "string") return key["value"];
 }
+function getPluginsElements(obj, configPath) {
+	const existing = obj.properties.find((prop) => getPropKeyName(prop) === "plugins");
+	if (existing) {
+		const value = existing["value"];
+		if (value["type"] !== "ArrayExpression") throw new Error(`Unrecognized plugins config type in ${configPath}`);
+		return value["elements"];
+	}
+	const elements = [];
+	obj.properties.push({
+		type: "ObjectProperty",
+		key: {
+			type: "Identifier",
+			name: "plugins"
+		},
+		value: {
+			type: "ArrayExpression",
+			elements
+		},
+		computed: false,
+		shorthand: false
+	});
+	return elements;
+}
 function optionsToAstProperties(options) {
 	return Object.entries(options).map(([key, value]) => ({
 		type: "ObjectProperty",
@@ -200,13 +196,9 @@ function optionsToAstProperties(options) {
 //#endregion
 //#region src/modules/postcss.ts
 const postcssConfigNames = [
-	"postcss.config.mts",
-	"postcss.config.ts",
 	"postcss.config.mjs",
 	"postcss.config.js",
 	"postcss.config.cjs",
-	".postcssrc.mts",
-	".postcssrc.ts",
 	".postcssrc.mjs",
 	".postcssrc.js",
 	".postcssrc.cjs",
@@ -216,20 +208,20 @@ const postcssConfigNames = [
 	".postcssrc"
 ];
 function findPostcssConfig() {
-	return postcssConfigNames.find((name) => fs_extra.default.existsSync(name));
+	return postcssConfigNames.find((name) => fsExtra.existsSync(name));
 }
 function defaultPostcssConfig(pluginOptions = {}) {
 	const entries = Object.entries(pluginOptions);
 	return `export default {\n    plugins: {\n        "@mochi-css/postcss": ${entries.length === 0 ? "{}" : `{\n${entries.map(([k, v]) => `            ${k}: ${JSON.stringify(v)}`).join(",\n")}\n        }`}\n    }\n}\n`;
 }
 async function askForPath() {
-	const defaultConfig = findPostcssConfig() ?? "postcss.config.js";
-	const configPath = await __clack_prompts.text({
+	const defaultConfig = findPostcssConfig() ?? "postcss.config.mjs";
+	const configPath = await p.text({
 		message: "Path to PostCSS config",
 		placeholder: defaultConfig,
 		defaultValue: defaultConfig
 	});
-	if (__clack_prompts.isCancel(configPath)) return false;
+	if (p.isCancel(configPath)) return false;
 	return configPath;
 }
 function isProxy(v) {
@@ -248,6 +240,7 @@ function addPluginToNamedVar(mod, varName, pluginName, pluginOptions, configPath
 			if (!init) throw new Error(`Failed to add postcss plugin to ${configPath}`);
 			const pluginsProp = init.properties.find((prop) => getPropKeyName(prop) === "plugins");
 			if (!pluginsProp) throw new Error(`Failed to find plugins object in ${configPath}`);
+			if (pluginsProp.value.properties.some((prop) => getPropKeyName(prop) === pluginName)) return;
 			pluginsProp.value.properties.push({
 				type: "ObjectProperty",
 				key: {
@@ -267,12 +260,12 @@ function addPluginToNamedVar(mod, varName, pluginName, pluginOptions, configPath
 	throw new Error(`Failed to add postcss plugin to ${configPath}`);
 }
 async function addPostcssPlugin(configPath, pluginName, pluginOptions = {}) {
-	const mod = (0, magicast.parseModule)(await fs_promises.default.readFile(configPath, "utf-8"));
+	const mod = parseModule(await fs.readFile(configPath, "utf-8"));
 	const defaultExport = mod.exports["default"];
 	if (isProxy(defaultExport) && defaultExport.$type === "identifier") {
 		addPluginToNamedVar(mod, defaultExport.$name, pluginName, pluginOptions, configPath);
-		const { code: code$1 } = (0, magicast.generateCode)(mod);
-		await fs_promises.default.writeFile(configPath, code$1);
+		const { code: code$1 } = generateCode(mod);
+		await fs.writeFile(configPath, code$1);
 		return;
 	}
 	const config = isProxy(defaultExport) && defaultExport.$type === "function-call" ? defaultExport.$args[0] : defaultExport;
@@ -280,30 +273,28 @@ async function addPostcssPlugin(configPath, pluginName, pluginOptions = {}) {
 	if ("plugins" in config && config["plugins"] !== void 0 && !isObject(config["plugins"])) throw new Error(`Unrecognized plugins config type in ${configPath}`);
 	config["plugins"] ??= {};
 	config["plugins"][pluginName] = pluginOptions;
-	const { code } = (0, magicast.generateCode)(mod);
-	await fs_promises.default.writeFile(configPath, code);
+	const { code } = generateCode(mod);
+	await fs.writeFile(configPath, code);
 }
 async function addToConfig(configPath, pluginOptions = {}) {
-	if (!fs_extra.default.existsSync(configPath)) {
-		await fs_extra.default.writeFile("postcss.config.mts", defaultPostcssConfig(pluginOptions));
+	if (!fsExtra.existsSync(configPath)) {
+		await fsExtra.writeFile("postcss.config.mjs", defaultPostcssConfig(pluginOptions));
 		return;
 	}
 	const ext = configPath.split(".").pop();
-	if (ext === "json" || path.default.basename(configPath) === ".postcssrc") {
-		const config = await fs_extra.default.readJson(configPath);
+	if (ext === "json" || path.basename(configPath) === ".postcssrc") {
+		const config = await fsExtra.readJson(configPath);
 		if (!isObject(config)) throw new Error("Unrecognized config type in ${configPath}`)");
 		config["plugins"] ??= {};
 		if (!isObject(config["plugins"])) throw new Error("Unrecognized config type in ${configPath}`)");
 		config["plugins"]["@mochi-css/postcss"] = pluginOptions;
-		await fs_extra.default.writeJson(configPath, config, { spaces: 2 });
+		await fsExtra.writeJson(configPath, config, { spaces: 2 });
 		return;
 	}
 	if (ext === "yml" || ext === "yaml") throw new Error("YAML PostCSS config is not supported yet");
 	await addPostcssPlugin(configPath, "@mochi-css/postcss", pluginOptions);
 }
 function createPostcssModule(options = {}) {
-	const pluginOptions = {};
-	if (options.outDir !== void 0) pluginOptions["outDir"] = options.outDir;
 	return {
 		id: "postcss",
 		name: "PostCSS",
@@ -314,15 +305,15 @@ function createPostcssModule(options = {}) {
 			else if (options.auto) configPath = findPostcssConfig() ?? "postcss.config.mts";
 			else if (ctx.nonInteractive) return;
 			else {
-				const usePostcss = await __clack_prompts.confirm({ message: "Do you use PostCSS?" });
-				if (__clack_prompts.isCancel(usePostcss) || !usePostcss) return;
+				const usePostcss = await p.confirm({ message: "Do you use PostCSS?" });
+				if (p.isCancel(usePostcss) || !usePostcss) return;
 				const selected = await askForPath();
 				if (selected === false) return;
 				configPath = selected;
 			}
-			await addToConfig(configPath, pluginOptions);
-			__clack_prompts.log.success("Added mochi plugin to the postcss config");
-			ctx.requirePackage("@mochi-css/postcss");
+			await addToConfig(configPath);
+			p.log.success("Added mochi plugin to the postcss config");
+			ctx.requirePackage(mochiPackage("@mochi-css/postcss"));
 		}
 	};
 }
@@ -334,7 +325,7 @@ const libPreset = {
 	id: "lib",
 	name: "Library",
 	setup(runner) {
-		__clack_prompts.log.warn("Library preset is not fully supported yet.");
+		p.log.warn("Library preset is not fully supported yet.");
 		runner.register(createPostcssModule());
 	}
 };
@@ -348,38 +339,16 @@ const viteConfigNames = [
 	"vite.config.mjs"
 ];
 function findViteConfig() {
-	return viteConfigNames.find((name) => fs_extra.default.existsSync(name));
+	return viteConfigNames.find((name) => fsExtra.existsSync(name));
 }
-const defaultViteConfig = `import { defineConfig } from "vite"
-import { mochiCss } from "@mochi-css/vite"
+const defaultViteConfig = dedent`
+    import { defineConfig } from "vite"
+    import { mochiCss } from "@mochi-css/vite"
 
-export default defineConfig({
-    plugins: [mochiCss()],
-})
+    export default defineConfig({
+        plugins: [mochiCss()],
+    })
 `;
-function getPluginsElements(obj, configPath) {
-	const existing = obj.properties.find((prop) => getPropKeyName(prop) === "plugins");
-	if (existing) {
-		const value = existing["value"];
-		if (value["type"] !== "ArrayExpression") throw new Error(`Unrecognized plugins config type in ${configPath}`);
-		return value["elements"];
-	}
-	const elements = [];
-	obj.properties.push({
-		type: "ObjectProperty",
-		key: {
-			type: "Identifier",
-			name: "plugins"
-		},
-		value: {
-			type: "ArrayExpression",
-			elements
-		},
-		computed: false,
-		shorthand: false
-	});
-	return elements;
-}
 function addPluginCallToObj(obj, configPath) {
 	getPluginsElements(obj, configPath).push({
 		type: "CallExpression",
@@ -421,15 +390,15 @@ function addToVitePlugins(mod, configPath) {
 	throw new Error(`Failed to add vite plugin to ${configPath}`);
 }
 async function addMochiToViteConfig(configPath) {
-	const mod = (0, magicast.parseModule)(await fs_promises.default.readFile(configPath, "utf-8"));
+	const mod = parseModule(await fs.readFile(configPath, "utf-8"));
 	mod.imports.$prepend({
 		from: "@mochi-css/vite",
 		imported: "mochiCss",
 		local: "mochiCss"
 	});
 	addToVitePlugins(mod, configPath);
-	const { code } = (0, magicast.generateCode)(mod);
-	await fs_promises.default.writeFile(configPath, code);
+	const { code } = generateCode(mod);
+	await fs.writeFile(configPath, code);
 }
 const viteModule = {
 	id: "vite",
@@ -442,33 +411,157 @@ const viteModule = {
 		else if (existingConfig) configPath = existingConfig;
 		else if (ctx.nonInteractive) configPath = "vite.config.ts";
 		else {
-			const selected = await __clack_prompts.text({
+			const selected = await p.text({
 				message: "Path to Vite config",
 				placeholder: "vite.config.ts",
 				defaultValue: "vite.config.ts"
 			});
-			if (__clack_prompts.isCancel(selected)) return;
+			if (p.isCancel(selected)) return;
 			configPath = selected;
 		}
-		if (!fs_extra.default.existsSync(configPath)) {
-			await fs_promises.default.writeFile(configPath, defaultViteConfig);
-			__clack_prompts.log.success("Created vite config with mochi plugin");
+		if (!fsExtra.existsSync(configPath)) {
+			await fs.writeFile(configPath, defaultViteConfig);
+			p.log.success("Created vite config with mochi plugin");
 		} else {
 			await addMochiToViteConfig(configPath);
-			__clack_prompts.log.success("Added mochiCss() to vite config");
+			p.log.success("Added mochiCss() to vite config");
 		}
-		ctx.requirePackage("@mochi-css/vite");
+		ctx.requirePackage(mochiPackage("@mochi-css/vite"));
 	}
 };
 
+//#endregion
+//#region src/modules/mochiConfig.ts
+const mochiConfigNames = [
+	"mochi.config.ts",
+	"mochi.config.mts",
+	"mochi.config.js",
+	"mochi.config.mjs"
+];
+function findMochiConfig() {
+	return mochiConfigNames.find((name) => fsExtra.existsSync(name));
+}
+const defaultMochiConfigBase = dedent`
+    import { defineConfig } from "@mochi-css/vanilla/config"
+
+    export default defineConfig({})
+`;
+function defaultMochiConfigWithOptions(tmpDir, styledId) {
+	const importPath = styledId ? "@mochi-css/vanilla-react/config" : "@mochi-css/vanilla/config";
+	const lines = [];
+	if (tmpDir !== void 0) lines.push(`    tmpDir: ${JSON.stringify(tmpDir)},`);
+	if (!styledId && lines.length === 0) return defaultMochiConfigBase;
+	return `import { defineConfig } from "${importPath}"\n\nexport default defineConfig({\n${lines.join("\n")}\n})\n`;
+}
+function getConfigObject(mod) {
+	const exportDefault = mod.$ast.body.find((s) => s.type === "ExportDefaultDeclaration");
+	if (!exportDefault) return void 0;
+	const decl = exportDefault.declaration;
+	if (decl["type"] === "ObjectExpression") return decl;
+	if (decl["type"] === "CallExpression") {
+		const firstArg = decl["arguments"][0];
+		if (firstArg?.["type"] === "ObjectExpression") return firstArg;
+	}
+}
+async function addTmpDirToExistingConfig(configPath, tmpDir) {
+	const mod = parseModule(await fs.readFile(configPath, "utf-8"));
+	const obj = getConfigObject(mod);
+	if (!obj) throw new Error(`Failed to add tmpDir to ${configPath}`);
+	if (obj["properties"].some((prop) => getPropKeyName(prop) === "tmpDir")) return;
+	obj["properties"] = [{
+		type: "ObjectProperty",
+		key: {
+			type: "StringLiteral",
+			value: "tmpDir"
+		},
+		value: {
+			type: "StringLiteral",
+			value: tmpDir
+		},
+		computed: false,
+		shorthand: false
+	}, ...obj["properties"]];
+	const { code } = generateCode(mod);
+	await fs.writeFile(configPath, code);
+}
+async function patchToVanillaReact(configPath) {
+	const content = await fs.readFile(configPath, "utf-8");
+	if (content.includes("@mochi-css/vanilla-react")) return;
+	const patched = content.replace(/"@mochi-css\/vanilla\/config"/g, "\"@mochi-css/vanilla-react/config\"");
+	await fs.writeFile(configPath, patched);
+}
+function createMochiConfigModule(options = {}) {
+	const { styledId = false, tmpDir } = options;
+	return {
+		id: "mochi-config",
+		name: "Mochi Config",
+		async run(ctx) {
+			const existing = findMochiConfig();
+			if (!existing) {
+				await fs.writeFile("mochi.config.ts", defaultMochiConfigWithOptions(tmpDir, styledId));
+				p.log.success("Created mochi.config.ts");
+			} else {
+				if (tmpDir !== void 0) try {
+					await addTmpDirToExistingConfig(existing, tmpDir);
+					p.log.success(`Added tmpDir to ${existing}`);
+				} catch {
+					p.log.warn(`Could not automatically add tmpDir to ${existing} — add it manually`);
+				}
+				if (styledId) try {
+					await patchToVanillaReact(existing);
+					p.log.success("Switched mochi.config to @mochi-css/vanilla-react/config");
+				} catch {
+					p.log.warn(`Could not patch ${existing} — change the import to @mochi-css/vanilla-react/config manually`);
+				}
+			}
+			ctx.requirePackage(mochiPackage("@mochi-css/vanilla"));
+			if (styledId) ctx.requirePackage(mochiPackage("@mochi-css/vanilla-react"));
+		}
+	};
+}
+
+//#endregion
+//#region src/modules/uiFramework.ts
+async function patchConfigForReact(configPath) {
+	const content = await fs.readFile(configPath, "utf-8");
+	if (content.includes("@mochi-css/vanilla-react")) return;
+	const patched = content.replace(/"@mochi-css\/vanilla\/config"/g, "\"@mochi-css/vanilla-react/config\"");
+	await fs.writeFile(configPath, patched);
+}
+function createUiFrameworkModule(options = {}) {
+	return {
+		id: "ui-framework",
+		name: "UI Framework",
+		async run(ctx) {
+			const { framework: cliOption } = ctx.moduleOptions;
+			let useReact = options.auto === true || cliOption === "react";
+			if (!useReact) {
+				if (ctx.nonInteractive) return;
+				const confirmed = await p.confirm({ message: "Do you use React?" });
+				if (p.isCancel(confirmed) || !confirmed) return;
+				useReact = true;
+			}
+			ctx.requirePackage(mochiPackage("@mochi-css/vanilla-react"), false);
+			const configPath = findMochiConfig();
+			if (configPath) try {
+				await patchConfigForReact(configPath);
+			} catch {
+				p.log.warn(`Could not patch ${configPath} — change the import to @mochi-css/vanilla-react/config manually`);
+			}
+		}
+	};
+}
+
 //#endregion
 //#region src/presets/vite.ts
 const vitePreset = {
 	id: "vite",
 	name: "Vite",
 	setup(runner) {
-		runner.register(createPostcssModule({ outDir: ".mochi" }));
+		runner.register(createMochiConfigModule({ tmpDir: ".mochi" }));
+		runner.register(createPostcssModule());
 		runner.register(viteModule);
+		runner.register(createUiFrameworkModule());
 	}
 };
 
@@ -481,11 +574,12 @@ const nextConfigNames = [
 	"next.config.mjs"
 ];
 function findNextConfig() {
-	return nextConfigNames.find((name) => fs_extra.default.existsSync(name));
+	return nextConfigNames.find((name) => fsExtra.existsSync(name));
 }
-const defaultNextConfig = `import { withMochi } from "@mochi-css/next"
+const defaultNextConfig = dedent`
+    import { withMochi } from "@mochi-css/next"
 
-export default withMochi({})
+    export default withMochi({})
 `;
 function wrapExportDefault(mod, configPath) {
 	const exportDefault = mod.$ast.body.find((s) => s.type === "ExportDefaultDeclaration");
@@ -500,15 +594,15 @@ function wrapExportDefault(mod, configPath) {
 	};
 }
 async function addMochiToNextConfig(configPath) {
-	const mod = (0, magicast.parseModule)(await fs_promises.default.readFile(configPath, "utf-8"));
+	const mod = parseModule(await fs.readFile(configPath, "utf-8"));
 	mod.imports.$prepend({
 		from: "@mochi-css/next",
 		imported: "withMochi",
 		local: "withMochi"
 	});
 	wrapExportDefault(mod, configPath);
-	const { code } = (0, magicast.generateCode)(mod);
-	await fs_promises.default.writeFile(configPath, code);
+	const { code } = generateCode(mod);
+	await fs.writeFile(configPath, code);
 }
 const nextModule = {
 	id: "next",
@@ -521,22 +615,22 @@ const nextModule = {
 		else if (existingConfig) configPath = existingConfig;
 		else if (ctx.nonInteractive) configPath = "next.config.ts";
 		else {
-			const selected = await __clack_prompts.text({
+			const selected = await p.text({
 				message: "Path to Next.js config",
 				placeholder: "next.config.ts",
 				defaultValue: "next.config.ts"
 			});
-			if (__clack_prompts.isCancel(selected)) return;
+			if (p.isCancel(selected)) return;
 			configPath = selected;
 		}
-		if (!fs_extra.default.existsSync(configPath)) {
-			await fs_promises.default.writeFile(configPath, defaultNextConfig);
-			__clack_prompts.log.success("Created next config with mochi");
+		if (!fsExtra.existsSync(configPath)) {
+			await fs.writeFile(configPath, defaultNextConfig);
+			p.log.success("Created next config with mochi");
 		} else {
 			await addMochiToNextConfig(configPath);
-			__clack_prompts.log.success("Added withMochi() to next config");
+			p.log.success("Added withMochi() to next config");
 		}
-		ctx.requirePackage("@mochi-css/next");
+		ctx.requirePackage(mochiPackage("@mochi-css/next"));
 	}
 };
 
@@ -546,11 +640,13 @@ const nextjsPreset = {
 	id: "nextjs",
 	name: "Next.js",
 	setup(runner) {
-		runner.register(createPostcssModule({
-			outDir: ".mochi",
-			auto: true
+		runner.register(createMochiConfigModule({
+			styledId: true,
+			tmpDir: ".mochi"
 		}));
+		runner.register(createPostcssModule({ auto: true }));
 		runner.register(nextModule);
+		runner.register(createUiFrameworkModule({ auto: true }));
 	}
 };
 
@@ -564,30 +660,30 @@ const presets = {
 
 //#endregion
 //#region src/index.ts
-commander.program.name("tsuki").description("Add mochi-css to your project").version("2.1.0").addOption(new commander.Option("-p, --preset <preset>", "Preset to use").choices([
+program.name("tsuki").description("Add mochi-css to your project").version("4.0.0").addOption(new Option("-p, --preset <preset>", "Preset to use").choices([
 	"vite",
 	"nextjs",
 	"lib"
-])).option("-n, --no-interactive", "Non-interactive mode: skip all prompts (treat as cancelled)").option("--install", "Auto-accept package installation without prompting").option("--postcss [path]", "Enable PostCSS module; optionally specify config path").option("--vite [path]", "Use the given Vite config path instead of prompting").option("--next [path]", "Use the given Next.js config path instead of prompting").action(async (options) => {
-	__clack_prompts.intro(picocolors.default.cyan("Installing Mochi-CSS..."));
+])).option("-n, --no-interactive", "Non-interactive mode: skip all prompts (treat as cancelled)").option("--install", "Auto-accept package installation without prompting").option("--postcss [path]", "Enable PostCSS module; optionally specify config path").option("--vite [path]", "Use the given Vite config path instead of prompting").option("--next [path]", "Use the given Next.js config path instead of prompting").addOption(new Option("--framework <framework>", "UI framework to install support for").choices(["react"])).action(async (options) => {
+	p.intro(pc.cyan("Installing Mochi-CSS..."));
 	try {
 		const runner = new ModuleRunner();
 		const nonInteractive = options.interactive === false;
 		let presetId = options.preset;
 		if (presetId === void 0) {
 			if (nonInteractive) {
-				__clack_prompts.outro(picocolors.default.red("Cancelled"));
+				p.outro(pc.red("Cancelled"));
 				return;
 			}
-			const selected = await __clack_prompts.select({
+			const selected = await p.select({
 				message: "Which framework are you using?",
 				options: Object.values(presets).map((preset$1) => ({
 					value: preset$1.id,
 					label: preset$1.name
 				}))
 			});
-			if (__clack_prompts.isCancel(selected)) {
-				__clack_prompts.outro(picocolors.default.red("Cancelled"));
+			if (p.isCancel(selected)) {
+				p.outro(pc.red("Cancelled"));
 				return;
 			}
 			presetId = selected;
@@ -600,16 +696,18 @@ commander.program.name("tsuki").description("Add mochi-css to your project").ver
 		else if (presetId === "nextjs") moduleOptions.postcss = true;
 		if (options.vite !== void 0) moduleOptions.vite = options.vite;
 		if (options.next !== void 0) moduleOptions.next = options.next;
+		if (options.framework !== void 0) moduleOptions.framework = options.framework;
 		await runner.run({
 			nonInteractive,
 			autoInstall: options.install ?? false,
 			moduleOptions
 		});
-		__clack_prompts.outro(picocolors.default.green("Done!"));
+		p.outro(pc.green("Done!"));
 	} catch (e) {
-		if (e instanceof Error) __clack_prompts.outro(picocolors.default.red(e.message));
+		if (e instanceof Error) p.outro(pc.red(e.message));
 	}
 });
-commander.program.parse();
+program.parse();
 
-//#endregion
+//#endregion
+export {  };

package/package.json

@@ -1,8 +1,9 @@
 {
     "name": "@mochi-css/tsuki",
     "repository": "git@github.com:Niikelion/mochi-css.git",
-    "version": "2.1.0",
+    "version": "4.0.0",
     "license": "MIT",
+    "type": "module",
     "bin": "./dist/index.js",
     "files": [
         "/dist"
@@ -14,30 +15,24 @@
         "manual": "jiti scripts/manual.ts",
         "lint": "eslint src",
         "lint:fix": "eslint src --fix",
-        "format": "prettier --write"
+        "format": "prettier --write ."
     },
     "devDependencies": {
-        "@eslint/js": "^9.18.0",
-        "@gamedev-sensei/ts-config": "^2.1.0",
+        "@mochi-css/shared-config": "^2.0.0",
+        "@mochi-css/test": "^2.0.0",
         "@types/cross-spawn": "^6.0.6",
         "@types/fs-extra": "^11.0.4",
         "@types/node": "^24.8.1",
-        "@vitest/coverage-v8": "^4.0.15",
         "eslint": "^9.39.2",
-        "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-prettier": "^5.5.5",
-        "jiti": "^2.6.1",
         "prettier": "^3.8.1",
-        "tsdown": "^0.15.7",
         "typescript": "^5.9.3",
-        "typescript-eslint": "^8.21.0",
-        "vite-tsconfig-paths": "^5.1.4",
         "vitest": "^4.0.15"
     },
     "dependencies": {
         "@clack/prompts": "^1.0.1",
         "commander": "^13.1.0",
         "cross-spawn": "^7.0.6",
+        "dedent": "^1.7.2",
         "fs-extra": "^11.3.0",
         "magicast": "^0.5.1",
         "package-manager-detector": "^1.6.0",