@master/create-css 2.0.0-rc.80 → 2.0.0-rc.82

package/README.md

@@ -26,6 +26,14 @@ Without `--yes`, TTY sessions ask about ESLint, MCP, AI guidance, and dependency
 
 Use `--minimal` for core framework setup only, or disable individual recommended integrations with `--no-eslint`, `--no-mcp`, or `--no-ai`.
 
+Use `--mode <mode>` when the framework integration should be configured for a specific rendering mode during setup:
+
+```bash
+npm create @master/css@rc -- --framework nextjs --mode static --yes
+```
+
+Supported `--mode` values are `runtime`, `static`, `progressive`, and `pre-render`. Mode setup is supported for `vite`, `react`, `react-router`, `tanstack-start`, `vue`, `nextjs`, `nuxt`, `astro`, `webpack`, `rspack`, `rsbuild`, `laravel`, and `lit`; Laravel supports `static` only.
+
 If you do not have a project yet, create one first:
 
 ```bash
@@ -52,10 +60,18 @@ npx @master/create-css@rc add --no-mcp --no-ai
 npx @master/create-css@rc add --json --minimal --eslint
 ```
 
+```bash
+npx @master/create-css@rc add --framework nextjs --mode runtime --yes
+```
+
+```bash
+npx @master/create-css@rc add --framework webpack --mode static --yes
+```
+
 Supported `--framework` values:
 
 ```txt
-auto, vite, react, react-router, vue, nextjs, svelte, nuxt, astro, webpack, rspack, rsbuild, laravel, lit, angular, none
+auto, vite, react, react-router, tanstack-start, vue, nextjs, svelte, nuxt, astro, webpack, rspack, rsbuild, laravel, lit, angular, none
 ```
 
 SvelteKit setup is delegated to the Svelte CLI add-on:

package/dist/core.d.ts

@@ -1,5 +1,7 @@
+import { RenderingMode } from "./modes.js";
+
 //#region src/core.d.ts
-type CommandFramework = 'none' | 'vite' | 'react' | 'react-router' | 'vue' | 'nextjs' | 'svelte' | 'nuxt' | 'astro' | 'webpack' | 'rspack' | 'rsbuild' | 'laravel' | 'lit' | 'angular';
+type CommandFramework = 'none' | 'vite' | 'react' | 'react-router' | 'tanstack-start' | 'vue' | 'nextjs' | 'svelte' | 'nuxt' | 'astro' | 'webpack' | 'rspack' | 'rsbuild' | 'laravel' | 'lit' | 'angular';
 type CommandFrameworkOption = CommandFramework | 'auto';
 type CommandPackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun';
 interface CommandOptions {
@@ -13,6 +15,7 @@ interface CommandOptions {
   dryRun?: boolean;
   json?: boolean;
   yes?: boolean;
+  mode?: RenderingMode;
 }
 type InstallResolution = CommandPackageManager | false | 'detected' | undefined;
 type PromptQuestion = (question: string) => Promise<string>;

package/dist/core.js

@@ -1,9 +1,10 @@
+import { formatRenderingModes, isRenderingMode } from "./modes.js";
 import { applySetupPlan, createSetupPlan } from "./index.js";
 import { existsSync, readFileSync } from "node:fs";
 import { dirname, join, resolve } from "node:path";
 import { createInterface } from "node:readline/promises";
 import { fileURLToPath } from "node:url";
-import { Command } from "commander";
+import { Command, InvalidArgumentError } from "commander";
 //#region src/core.ts
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const pkg = JSON.parse(readFileSync(resolve(__dirname, "../package.json"), "utf8"));
@@ -15,7 +16,7 @@ const newProjectCommands = [
 async function runProgram(argv = process.argv) {
 	const program = new Command();
 	program.name("create-css").description(pkg.description).version(pkg.version || "0.0.0");
-	const configure = (command) => command.option("-C, --cwd <path>", "Project root to update.").option("--framework <framework>", "Framework: auto, vite, react, react-router, vue, nextjs, svelte, nuxt, astro, webpack, rspack, rsbuild, laravel, lit, angular, none.", "auto").option("--eslint", "Add the Master CSS recommended ESLint flat config.").option("--no-eslint", "Skip the Master CSS recommended ESLint flat config.").option("--mcp", "Add the Master CSS MCP package and print the stdio registration command.").option("--no-mcp", "Skip the Master CSS MCP package and registration command.").option("--ai", "Add Master CSS guidance to AGENTS.md.").option("--no-ai", "Skip Master CSS guidance for coding agents.").option("--minimal", "Only add core Master CSS framework setup.").option("--install <package-manager>", "Run dependency installation with npm, pnpm, yarn, or bun after edits.").option("--no-install", "Do not run dependency installation.").option("--dry-run", "Print the setup plan without writing files.").option("--json", "Print machine-readable JSON.").option("-y, --yes", "Accept recommended defaults and run package installation with the detected package manager.");
+	const configure = (command) => command.option("-C, --cwd <path>", "Project root to update.").option("--framework <framework>", "Framework: auto, vite, react, react-router, tanstack-start, vue, nextjs, svelte, nuxt, astro, webpack, rspack, rsbuild, laravel, lit, angular, none.", "auto").option("--eslint", "Add the Master CSS recommended ESLint flat config.").option("--no-eslint", "Skip the Master CSS recommended ESLint flat config.").option("--mcp", "Add the Master CSS MCP package and print the stdio registration command.").option("--no-mcp", "Skip the Master CSS MCP package and registration command.").option("--ai", "Add Master CSS guidance to AGENTS.md.").option("--no-ai", "Skip Master CSS guidance for coding agents.").option("--minimal", "Only add core Master CSS framework setup.").option("--mode <mode>", `Rendering mode: ${formatRenderingModes()}.`, parseRenderingModeOption).option("--install <package-manager>", "Run dependency installation with npm, pnpm, yarn, or bun after edits.").option("--no-install", "Do not run dependency installation.").option("--dry-run", "Print the setup plan without writing files.").option("--json", "Print machine-readable JSON.").option("-y, --yes", "Accept recommended defaults and run package installation with the detected package manager.");
 	configure(program).argument("[project name]", "Deprecated. The installer now updates the current project; use --cwd for another root.").action(async (projectName, options) => {
 		if (projectName && projectName !== "add") program.error(`Project scaffolding is not provided by @master/create-css. Create a Vite project first, then run the installer from the project root:\n\n${formatNewProjectCommands()}`);
 		await runAdd(options);
@@ -37,14 +38,16 @@ async function runAdd(options) {
 		prompt?.close();
 	}
 	const planInstall = resolvedOptions.install === "detected" ? void 0 : resolvedOptions.install;
-	const plan = createSetupPlan({
+	const plan = createCommandSetupPlan({
 		root,
 		framework: options.framework,
 		eslint: resolvedOptions.eslint,
 		mcp: resolvedOptions.mcp,
 		ai: resolvedOptions.ai,
-		install: planInstall
+		install: planInstall,
+		mode: options.mode
 	});
+	if (!plan) return;
 	if (options.dryRun || options.json) {
 		process.stdout.write(`${JSON.stringify(plan, null, 2)}\n`);
 		return;
@@ -52,6 +55,18 @@ async function runAdd(options) {
 	applySetupPlan(plan, { install: resolvedOptions.install === "detected" ? plan.packageManager : resolvedOptions.install });
 	if (!options.json) printSummary(plan);
 }
+function createCommandSetupPlan(options) {
+	try {
+		return createSetupPlan(options);
+	} catch (error) {
+		if (error instanceof Error) {
+			process.stderr.write(`${error.message}\n`);
+			process.exitCode = 1;
+			return;
+		}
+		throw error;
+	}
+}
 async function resolveCommandOptions(options, prompt) {
 	const question = options.yes ? void 0 : prompt;
 	return {
@@ -83,6 +98,10 @@ async function confirm(question, prompt) {
 function shouldPrompt(options) {
 	return !options.yes && !options.json && !options.dryRun && Boolean(process.stdin.isTTY) && Boolean(process.stdout.isTTY);
 }
+function parseRenderingModeOption(value) {
+	if (isRenderingMode(value)) return value;
+	throw new InvalidArgumentError(`Invalid rendering mode "${value}". Supported modes: ${formatRenderingModes()}.`);
+}
 function createTTYPrompt() {
 	const input = process.stdin;
 	const output = process.stdout;

package/dist/index.d.ts

@@ -1,5 +1,7 @@
+import { RenderingMode } from "./modes.js";
+
 //#region src/index.d.ts
-type Framework = 'none' | 'vite' | 'react' | 'react-router' | 'vue' | 'nextjs' | 'svelte' | 'nuxt' | 'astro' | 'webpack' | 'rspack' | 'rsbuild' | 'laravel' | 'lit' | 'angular';
+type Framework = 'none' | 'vite' | 'react' | 'react-router' | 'tanstack-start' | 'vue' | 'nextjs' | 'svelte' | 'nuxt' | 'astro' | 'webpack' | 'rspack' | 'rsbuild' | 'laravel' | 'lit' | 'angular';
 type FrameworkOption = Framework | 'auto';
 type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun';
 type FileAction = 'create' | 'update' | 'skip';
@@ -13,6 +15,7 @@ interface SetupOptions {
   install?: PackageManager | false;
   yes?: boolean;
   packageTag?: string;
+  mode?: RenderingMode;
 }
 interface PlannedDependency {
   name: string;
@@ -38,6 +41,7 @@ interface SetupPlan {
   files: PlannedFileChange[];
   commands: PlannedCommand[];
   warnings: string[];
+  mode?: RenderingMode;
   summary: {
     dependencies: number;
     filesToCreate: number;
@@ -50,4 +54,4 @@ declare function createSetupPlan(options?: SetupOptions): SetupPlan;
 declare function applySetupPlan(plan: SetupPlan, options?: SetupOptions): void;
 declare function applySetup(options?: SetupOptions): SetupPlan;
 //#endregion
-export { FileAction, Framework, FrameworkOption, PackageManager, PlannedCommand, PlannedDependency, PlannedFileChange, SetupOptions, SetupPlan, applySetup, applySetupPlan, createSetupPlan };
+export { FileAction, Framework, FrameworkOption, PackageManager, PlannedCommand, PlannedDependency, PlannedFileChange, type RenderingMode, SetupOptions, SetupPlan, applySetup, applySetupPlan, createSetupPlan };

package/dist/index.js

@@ -1,5 +1,6 @@
 import { AGENT_RULES_BLOCK, CANONICAL_ESLINT_CONFIG, MASTER_CSS_PACKAGES } from "./constants.js";
-import { addAngularRuntimeSetup, addLitShadowRuntime, addMasterCSSAstroIntegration, addMasterCSSEslintConfig, addMasterCSSImportToStylesheet, addMasterCSSNextConfig, addMasterCSSNuxtModule, addMasterCSSRsbuildPlugin, addMasterCSSRspackPlugin, addMasterCSSStaticVitePlugin, addMasterCSSVitePlugin, addReactRouterRootCSSImport, addViteClientTypes, createAstroConfig, createMasterCSSStylesheet, createNextConfig, createNuxtConfig, createRsbuildConfig, createRspackConfig, createStaticViteConfig, createViteConfig } from "./transforms.js";
+import { resolveRenderingMode } from "./modes.js";
+import { addAngularRuntimeSetup, addLitShadowRuntime, addMasterCSSAstroIntegration, addMasterCSSEslintConfig, addMasterCSSImportToStylesheet, addMasterCSSNextConfig, addMasterCSSNuxtModule, addMasterCSSRsbuildPlugin, addMasterCSSRspackPlugin, addMasterCSSStaticVitePlugin, addMasterCSSTanStackStartVitePlugin, addMasterCSSVitePlugin, addMasterCSSWebpackPlugin, addReactRouterRootCSSImport, addTanStackStartRootCSSImport, addViteClientTypes, createAstroConfig, createMasterCSSStylesheet, createNextConfig, createNuxtConfig, createRsbuildConfig, createRspackConfig, createStaticViteConfig, createViteConfig, createWebpackConfig } from "./transforms.js";
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { dirname, join, resolve } from "node:path";
 import { spawnSync } from "node:child_process";
@@ -15,6 +16,8 @@ function createSetupPlan(options = {}) {
 	const packageJSON = readPackageJSON(root);
 	const packageManager = resolvePackageManager(root, packageJSON, options.install || void 0);
 	const framework = resolveFramework(root, packageJSON, options.framework || "auto");
+	const mode = resolveRenderingMode(options.mode);
+	assertFrameworkSupportsMode(framework, mode);
 	const version = options.packageTag || "rc";
 	const eslint = resolveRecommendedOption(options.eslint, options.minimal);
 	const mcp = resolveRecommendedOption(options.mcp, options.minimal);
@@ -29,7 +32,7 @@ function createSetupPlan(options = {}) {
 	});
 	else {
 		for (const dependency of dependenciesForFramework(framework, version)) pushDependency(dependencies, dependency.name, dependency.dev, dependency.version);
-		files.push(...filesForFramework(root, framework, warnings));
+		files.push(...filesForFramework(root, framework, warnings, mode));
 	}
 	if (eslint) {
 		pushDependency(dependencies, MASTER_CSS_PACKAGES.eslintConfig, true, version);
@@ -55,6 +58,7 @@ function createSetupPlan(options = {}) {
 		files,
 		commands,
 		warnings,
+		...mode ? { mode } : {},
 		summary: {
 			dependencies: dependencies.length,
 			filesToCreate: files.filter((file) => file.action === "create").length,
@@ -87,13 +91,13 @@ function applySetup(options = {}) {
 	applySetupPlan(plan, options);
 	return plan;
 }
-function filesForFramework(root, framework, warnings) {
+function filesForFramework(root, framework, warnings, mode) {
 	switch (framework) {
 		case "vite": return [planTextFile(root, firstExistingPath(root, [
 			"vite.config.ts",
 			"vite.config.js",
 			"vite.config.mjs"
-		], "vite.config.js"), addMasterCSSVitePlugin, createViteConfig(), "Register the Master CSS Vite plugin."), planTextFile(root, firstExistingPath(root, [
+		], "vite.config.js"), (content) => addMasterCSSVitePlugin(content, mode), createViteConfig(mode), "Register the Master CSS Vite plugin."), planTextFile(root, firstExistingPath(root, [
 			"src/style.css",
 			"src/index.css",
 			"src/main.css"
@@ -102,13 +106,13 @@ function filesForFramework(root, framework, warnings) {
 			"vite.config.ts",
 			"vite.config.js",
 			"vite.config.mjs"
-		], "vite.config.js"), addMasterCSSVitePlugin, createViteConfig(), "Register the Master CSS Vite plugin."), planTextFile(root, firstExistingPath(root, ["src/index.css", "src/style.css"], "src/index.css"), addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create or update the React project CSS entry.")];
+		], "vite.config.js"), (content) => addMasterCSSVitePlugin(content, mode), createViteConfig(mode), "Register the Master CSS Vite plugin."), planTextFile(root, firstExistingPath(root, ["src/index.css", "src/style.css"], "src/index.css"), addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create or update the React project CSS entry.")];
 		case "react-router": {
 			const files = [planTextFile(root, firstExistingPath(root, [
 				"vite.config.ts",
 				"vite.config.js",
 				"vite.config.mjs"
-			], "vite.config.ts"), addMasterCSSVitePlugin, createViteConfig(), "Register the Master CSS Vite plugin."), planTextFile(root, "app/app.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create or update the React Router app stylesheet entry.")];
+			], "vite.config.ts"), (content) => addMasterCSSVitePlugin(content, mode), createViteConfig(mode), "Register the Master CSS Vite plugin."), planTextFile(root, "app/app.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create or update the React Router app stylesheet entry.")];
 			const rootEntryPath = findExistingPath(root, [
 				"app/root.tsx",
 				"app/root.jsx",
@@ -119,11 +123,28 @@ function filesForFramework(root, framework, warnings) {
 			else warnings.push("No app/root.tsx, app/root.jsx, app/root.ts, or app/root.js file was found. Import ./app.css from the React Router root route manually after setup.");
 			return files;
 		}
+		case "tanstack-start": {
+			const pluginMode = mode ?? "static";
+			const files = [planTextFile(root, firstExistingPath(root, [
+				"vite.config.ts",
+				"vite.config.js",
+				"vite.config.mjs"
+			], "vite.config.ts"), (content) => addMasterCSSTanStackStartVitePlugin(content, pluginMode), createViteConfig(pluginMode), `Register the Master CSS Vite plugin in ${pluginMode} mode.`), planTextFile(root, "src/styles/app.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create or update the TanStack Start stylesheet entry.")];
+			const rootEntryPath = findExistingPath(root, [
+				"src/routes/__root.tsx",
+				"src/routes/__root.jsx",
+				"src/routes/__root.ts",
+				"src/routes/__root.js"
+			]);
+			if (rootEntryPath) files.push(planTextFile(root, rootEntryPath, addTanStackStartRootCSSImport, "", "Import the TanStack Start stylesheet from the root route."));
+			else warnings.push("No src/routes/__root.tsx, src/routes/__root.jsx, src/routes/__root.ts, or src/routes/__root.js file was found. Import ../styles/app.css from the TanStack Start root route manually after setup.");
+			return files;
+		}
 		case "vue": return [planTextFile(root, firstExistingPath(root, [
 			"vite.config.ts",
 			"vite.config.js",
 			"vite.config.mjs"
-		], "vite.config.ts"), addMasterCSSVitePlugin, createViteConfig(), "Register the Master CSS Vite plugin."), planTextFile(root, firstExistingPath(root, [
+		], "vite.config.ts"), (content) => addMasterCSSVitePlugin(content, mode), createViteConfig(mode), "Register the Master CSS Vite plugin."), planTextFile(root, firstExistingPath(root, [
 			"src/assets/main.css",
 			"src/style.css",
 			"src/main.css"
@@ -132,13 +153,13 @@ function filesForFramework(root, framework, warnings) {
 			"next.config.ts",
 			"next.config.mjs",
 			"next.config.js"
-		], "next.config.js"), addMasterCSSNextConfig, createNextConfig(), "Register the Master CSS Next.js adapter."), planTextFile(root, "app/globals.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create or update the Next.js global stylesheet entry.")];
-		case "nuxt": return [planTextFile(root, firstExistingPath(root, ["nuxt.config.ts", "nuxt.config.js"], "nuxt.config.ts"), addMasterCSSNuxtModule, createNuxtConfig(), "Register the Master CSS Nuxt module."), planTextFile(root, "assets/css/master.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create the Nuxt CSS entry referenced by nuxt.config.")];
+		], "next.config.js"), (content) => addMasterCSSNextConfig(content, mode), createNextConfig(mode), "Register the Master CSS Next.js adapter."), planTextFile(root, "app/globals.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create or update the Next.js global stylesheet entry.")];
+		case "nuxt": return [planTextFile(root, firstExistingPath(root, ["nuxt.config.ts", "nuxt.config.js"], "nuxt.config.ts"), (content) => addMasterCSSNuxtModule(content, mode), createNuxtConfig(mode), "Register the Master CSS Nuxt module."), planTextFile(root, "assets/css/master.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create the Nuxt CSS entry referenced by nuxt.config.")];
 		case "astro": return [planTextFile(root, firstExistingPath(root, [
 			"astro.config.mjs",
 			"astro.config.js",
 			"astro.config.ts"
-		], "astro.config.mjs"), addMasterCSSAstroIntegration, createAstroConfig(), "Register the Master CSS Astro integration."), planTextFile(root, "src/styles/global.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create the Astro project CSS entry.")];
+		], "astro.config.mjs"), (content) => addMasterCSSAstroIntegration(content, mode), createAstroConfig(mode), "Register the Master CSS Astro integration."), planTextFile(root, "src/styles/global.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create the Astro project CSS entry.")];
 		case "laravel": {
 			const viteConfigPath = findExistingPath(root, ["vite.config.ts", "vite.config.js"]);
 			const files = [planTextFile(root, "resources/css/app.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create or update the Laravel Vite CSS entry.")];
@@ -152,7 +173,7 @@ function filesForFramework(root, framework, warnings) {
 					"vite.config.ts",
 					"vite.config.js",
 					"vite.config.mjs"
-				], "vite.config.ts"), addMasterCSSVitePlugin, createViteConfig(), "Register the Master CSS Vite plugin."),
+				], "vite.config.ts"), (content) => addMasterCSSVitePlugin(content, mode), createViteConfig(mode), "Register the Master CSS Vite plugin."),
 				planTextFile(root, "src/index.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create or update the Lit project CSS entry."),
 				planTextFile(root, "src/vite-env.d.ts", addViteClientTypes, `/// <reference types="vite/client" />
 /// <reference types="@master/css-integration/client" />
@@ -176,24 +197,38 @@ function filesForFramework(root, framework, warnings) {
 			"rspack.config.mjs",
 			"rspack.config.js",
 			"rspack.config.cjs"
-		], "rspack.config.mjs"), addMasterCSSRspackPlugin, createRspackConfig(), "Register the Master CSS Webpack-compatible plugin in the Rspack config."), planTextFile(root, "src/index.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create or update the project CSS entry for Rspack.")];
+		], "rspack.config.mjs"), (content) => addMasterCSSRspackPlugin(content, mode), createRspackConfig(mode), "Register the Master CSS Webpack-compatible plugin in the Rspack config."), planTextFile(root, "src/index.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create or update the project CSS entry for Rspack.")];
 		case "rsbuild": return [planTextFile(root, firstExistingPath(root, [
 			"rsbuild.config.ts",
 			"rsbuild.config.mts",
 			"rsbuild.config.mjs",
 			"rsbuild.config.js"
-		], "rsbuild.config.ts"), addMasterCSSRsbuildPlugin, createRsbuildConfig(), "Register the Master CSS Webpack-compatible plugin through Rsbuild tools.rspack."), planTextFile(root, "src/index.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create or update the project CSS entry for Rsbuild.")];
-		case "webpack": return [planTextFile(root, "src/index.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create or update the project CSS entry for Webpack.")];
+		], "rsbuild.config.ts"), (content) => addMasterCSSRsbuildPlugin(content, mode), createRsbuildConfig(mode), "Register the Master CSS Webpack-compatible plugin through Rsbuild tools.rspack."), planTextFile(root, "src/index.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create or update the project CSS entry for Rsbuild.")];
+		case "webpack": return [planTextFile(root, firstExistingPath(root, [
+			"webpack.config.ts",
+			"webpack.config.mts",
+			"webpack.config.mjs",
+			"webpack.config.js",
+			"webpack.config.cjs"
+		], "webpack.config.mjs"), (content) => addMasterCSSWebpackPlugin(content, mode), createWebpackConfig(mode), "Register the Master CSS Webpack plugin."), planTextFile(root, "src/index.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create or update the project CSS entry for Webpack.")];
 		default: return [planTextFile(root, "src/master.css", addMasterCSSImportToStylesheet, createMasterCSSStylesheet(), "Create a standalone Master CSS stylesheet entry.")];
 	}
 }
+function assertFrameworkSupportsMode(framework, mode) {
+	if (!mode) return;
+	if (framework === "laravel") {
+		if (mode === "static") return;
+		throw new Error(`--mode ${mode} is not supported for laravel. The Laravel installer only supports --mode static.`);
+	}
+	if (framework === "angular" || framework === "svelte" || framework === "none") throw new Error(`--mode is not supported for ${framework}. Supported frameworks: vite, react, react-router, tanstack-start, vue, nextjs, nuxt, astro, webpack, rspack, rsbuild, laravel, lit.`);
+}
 function dependenciesForFramework(framework, version) {
 	const dependencies = [{
 		name: MASTER_CSS_PACKAGES.css,
 		version,
 		dev: false
 	}];
-	if (framework === "vite" || framework === "react" || framework === "react-router" || framework === "vue" || framework === "laravel" || framework === "lit") dependencies.push({
+	if (framework === "vite" || framework === "react" || framework === "react-router" || framework === "tanstack-start" || framework === "vue" || framework === "laravel" || framework === "lit") dependencies.push({
 		name: MASTER_CSS_PACKAGES.vite,
 		version,
 		dev: false
@@ -295,6 +330,7 @@ function resolveFramework(root, packageJSON, framework) {
 		...packageJSON?.dependencies,
 		...packageJSON?.devDependencies
 	};
+	const hasWebpackConfig = existsSync(join(root, "webpack.config.ts")) || existsSync(join(root, "webpack.config.mts")) || existsSync(join(root, "webpack.config.mjs")) || existsSync(join(root, "webpack.config.js")) || existsSync(join(root, "webpack.config.cjs"));
 	if (existsSync(join(root, "next.config.js")) || existsSync(join(root, "next.config.mjs")) || existsSync(join(root, "next.config.ts")) || dependencies.next) return "nextjs";
 	if (existsSync(join(root, "svelte.config.js")) || existsSync(join(root, "svelte.config.mjs")) || dependencies["@sveltejs/kit"]) return "svelte";
 	if (existsSync(join(root, "nuxt.config.ts")) || existsSync(join(root, "nuxt.config.js")) || dependencies.nuxt) return "nuxt";
@@ -303,11 +339,13 @@ function resolveFramework(root, packageJSON, framework) {
 	if (dependencies["laravel-vite-plugin"] || existsSync(join(root, "artisan"))) return "laravel";
 	if (existsSync(join(root, "rsbuild.config.ts")) || existsSync(join(root, "rsbuild.config.mts")) || existsSync(join(root, "rsbuild.config.mjs")) || existsSync(join(root, "rsbuild.config.js")) || dependencies["@rsbuild/core"]) return "rsbuild";
 	if (existsSync(join(root, "rspack.config.ts")) || existsSync(join(root, "rspack.config.mts")) || existsSync(join(root, "rspack.config.mjs")) || existsSync(join(root, "rspack.config.js")) || existsSync(join(root, "rspack.config.cjs")) || dependencies["@rspack/core"] || dependencies["@rspack/cli"]) return "rspack";
+	if (hasWebpackConfig) return "webpack";
 	if (existsSync(join(root, "react-router.config.ts")) || existsSync(join(root, "react-router.config.js")) || existsSync(join(root, "react-router.config.mjs")) || existsSync(join(root, "react-router.config.mts")) || dependencies["@react-router/dev"]) return "react-router";
+	if (dependencies["@tanstack/react-start"]) return "tanstack-start";
 	if (dependencies.vue || dependencies["@vitejs/plugin-vue"] || existsSync(join(root, "src/App.vue"))) return "vue";
 	if (dependencies.lit) return "lit";
 	if (dependencies.react || dependencies["react-dom"]) return "react";
-	if (existsSync(join(root, "webpack.config.js")) || existsSync(join(root, "webpack.config.mjs")) || dependencies.webpack) return "webpack";
+	if (dependencies.webpack) return "webpack";
 	if (existsSync(join(root, "vite.config.ts")) || existsSync(join(root, "vite.config.js")) || dependencies.vite) return "vite";
 	return "none";
 }

package/dist/modes.d.ts

@@ -0,0 +1,8 @@
+//#region src/modes.d.ts
+declare const renderingModes: readonly ["runtime", "static", "progressive", "pre-render"];
+type RenderingMode = typeof renderingModes[number];
+declare function isRenderingMode(value: unknown): value is RenderingMode;
+declare function formatRenderingModes(): string;
+declare function resolveRenderingMode(value: unknown): RenderingMode | undefined;
+//#endregion
+export { RenderingMode, formatRenderingModes, isRenderingMode, renderingModes, resolveRenderingMode };

package/dist/modes.js

@@ -0,0 +1,20 @@
+//#region src/modes.ts
+const renderingModes = [
+	"runtime",
+	"static",
+	"progressive",
+	"pre-render"
+];
+function isRenderingMode(value) {
+	return renderingModes.includes(value);
+}
+function formatRenderingModes() {
+	return renderingModes.join(", ");
+}
+function resolveRenderingMode(value) {
+	if (value === void 0) return void 0;
+	if (isRenderingMode(value)) return value;
+	throw new Error(`Invalid rendering mode "${String(value)}". Supported modes: ${formatRenderingModes()}.`);
+}
+//#endregion
+export { formatRenderingModes, isRenderingMode, renderingModes, resolveRenderingMode };

package/dist/transforms.d.ts

@@ -1,24 +1,30 @@
+import { RenderingMode } from "./modes.js";
+
 //#region src/transforms.d.ts
 declare function addMasterCSSImportToStylesheet(content: string): string;
 declare function createMasterCSSStylesheet(): string;
-declare function addMasterCSSVitePlugin(content: string): string;
+declare function addMasterCSSVitePlugin(content: string, mode?: RenderingMode): string;
 declare function addReactRouterRootCSSImport(content: string): string;
+declare function addTanStackStartRootCSSImport(content: string): string;
 declare function addMasterCSSStaticVitePlugin(content: string): string;
-declare function addMasterCSSRspackPlugin(content: string): string;
-declare function addMasterCSSRsbuildPlugin(content: string): string;
-declare function createViteConfig(): string;
+declare function addMasterCSSTanStackStartVitePlugin(content: string, mode?: RenderingMode): string;
+declare function addMasterCSSRspackPlugin(content: string, mode?: RenderingMode): string;
+declare function addMasterCSSWebpackPlugin(content: string, mode?: RenderingMode): string;
+declare function addMasterCSSRsbuildPlugin(content: string, mode?: RenderingMode): string;
+declare function createViteConfig(mode?: RenderingMode): string;
 declare function createStaticViteConfig(): string;
-declare function createRspackConfig(): string;
-declare function createRsbuildConfig(): string;
-declare function createNextConfig(): string;
-declare function addMasterCSSNextConfig(content: string): string;
-declare function addMasterCSSNuxtModule(content: string): string;
-declare function createNuxtConfig(): string;
-declare function addMasterCSSAstroIntegration(content: string): string;
-declare function createAstroConfig(): string;
+declare function createRspackConfig(mode?: RenderingMode): string;
+declare function createWebpackConfig(mode?: RenderingMode): string;
+declare function createRsbuildConfig(mode?: RenderingMode): string;
+declare function createNextConfig(mode?: RenderingMode): string;
+declare function addMasterCSSNextConfig(content: string, mode?: RenderingMode): string;
+declare function addMasterCSSNuxtModule(content: string, mode?: RenderingMode): string;
+declare function createNuxtConfig(mode?: RenderingMode): string;
+declare function addMasterCSSAstroIntegration(content: string, mode?: RenderingMode): string;
+declare function createAstroConfig(mode?: RenderingMode): string;
 declare function addViteClientTypes(content: string): string;
 declare function addLitShadowRuntime(content: string): string;
 declare function addAngularRuntimeSetup(content: string): string;
 declare function addMasterCSSEslintConfig(content: string): string;
 //#endregion
-export { addAngularRuntimeSetup, addLitShadowRuntime, addMasterCSSAstroIntegration, addMasterCSSEslintConfig, addMasterCSSImportToStylesheet, addMasterCSSNextConfig, addMasterCSSNuxtModule, addMasterCSSRsbuildPlugin, addMasterCSSRspackPlugin, addMasterCSSStaticVitePlugin, addMasterCSSVitePlugin, addReactRouterRootCSSImport, addViteClientTypes, createAstroConfig, createMasterCSSStylesheet, createNextConfig, createNuxtConfig, createRsbuildConfig, createRspackConfig, createStaticViteConfig, createViteConfig };
+export { addAngularRuntimeSetup, addLitShadowRuntime, addMasterCSSAstroIntegration, addMasterCSSEslintConfig, addMasterCSSImportToStylesheet, addMasterCSSNextConfig, addMasterCSSNuxtModule, addMasterCSSRsbuildPlugin, addMasterCSSRspackPlugin, addMasterCSSStaticVitePlugin, addMasterCSSTanStackStartVitePlugin, addMasterCSSVitePlugin, addMasterCSSWebpackPlugin, addReactRouterRootCSSImport, addTanStackStartRootCSSImport, addViteClientTypes, createAstroConfig, createMasterCSSStylesheet, createNextConfig, createNuxtConfig, createRsbuildConfig, createRspackConfig, createStaticViteConfig, createViteConfig, createWebpackConfig };

package/dist/transforms.js

@@ -1,5 +1,17 @@
 import { CANONICAL_ESLINT_CONFIG } from "./constants.js";
 //#region src/transforms.ts
+function formatMasterCSSCall(mode) {
+	return mode ? `masterCSS({ mode: '${mode}' })` : "masterCSS()";
+}
+function formatWebpackPluginCall(mode) {
+	return mode ? `new MasterCSSPlugin({ mode: '${mode}' })` : "new MasterCSSPlugin()";
+}
+function formatNuxtModule(mode) {
+	return mode ? `['@master/css.nuxt', { mode: '${mode}' }]` : "'@master/css.nuxt'";
+}
+function formatNextCall(target, mode) {
+	return mode ? `${mode === "static" ? "await " : ""}withMasterCSS(${target}, { mode: '${mode}' })` : `withMasterCSS(${target})`;
+}
 function addImport(content, statement) {
 	if (content.includes(statement)) return content;
 	const lines = content.split("\n");
@@ -21,28 +33,53 @@ function addMasterCSSImportToStylesheet(content) {
 function createMasterCSSStylesheet() {
 	return "@import '@master/css';\n";
 }
-function addMasterCSSVitePlugin(content) {
-	return addMasterCSSVitePluginCall(content, "masterCSS()");
+function addMasterCSSVitePlugin(content, mode) {
+	return addMasterCSSVitePluginCall(content, formatMasterCSSCall(mode));
 }
 function addReactRouterRootCSSImport(content) {
 	if (/^\s*import\s+['"]\.\/app\.css['"]\s*;?/m.test(content)) return content;
 	return addImport(content, "import './app.css'");
 }
+function addTanStackStartRootCSSImport(content) {
+	if (/^\s*import\s+['"]\.\.\/styles\/app\.css['"]\s*;?/m.test(content)) return content;
+	return addImport(content, "import '../styles/app.css'");
+}
 function addMasterCSSStaticVitePlugin(content) {
-	return addMasterCSSVitePluginCall(content, "masterCSS({ mode: 'static' })");
+	return addMasterCSSVitePlugin(content, "static");
+}
+function addMasterCSSTanStackStartVitePlugin(content, mode = "static") {
+	const pluginCall = formatMasterCSSCall(mode);
+	if (content.includes("@master/css.vite")) return content;
+	let next = addImport(content, "import masterCSS from '@master/css.vite'");
+	const tanStackStartPluginPattern = /^(\s*)tanstackStart\([^)]*\),?/m;
+	if (tanStackStartPluginPattern.test(next)) return next.replace(tanStackStartPluginPattern, (match, indent) => {
+		return `${match.endsWith(",") ? match : `${match},`}\n${indent}${pluginCall},`;
+	});
+	if (/plugins\s*:\s*\[/.test(next)) return replaceFirst(next, /plugins\s*:\s*\[/, `plugins: [\n            ${pluginCall},`);
+	if (/defineConfig\(\s*\{/.test(next)) return replaceFirst(next, /defineConfig\(\s*\{/, `defineConfig({\n    plugins: [${pluginCall}],`);
+	return next;
+}
+function addMasterCSSRspackPlugin(content, mode) {
+	if (content.includes("@master/css.webpack")) return content;
+	const pluginCall = formatWebpackPluginCall(mode);
+	let next = addImport(content, "import MasterCSSPlugin from '@master/css.webpack'");
+	if (/plugins\s*:\s*\[/.test(next)) return replaceFirst(next, /plugins\s*:\s*\[/, `plugins: [\n        ${pluginCall},`);
+	if (/export\s+default\s+\{/.test(next)) return replaceFirst(next, /export\s+default\s+\{/, `export default {\n    plugins: [${pluginCall}],`);
+	return next;
 }
-function addMasterCSSRspackPlugin(content) {
+function addMasterCSSWebpackPlugin(content, mode) {
 	if (content.includes("@master/css.webpack")) return content;
+	const pluginCall = formatWebpackPluginCall(mode);
 	let next = addImport(content, "import MasterCSSPlugin from '@master/css.webpack'");
-	if (/plugins\s*:\s*\[/.test(next)) return replaceFirst(next, /plugins\s*:\s*\[/, "plugins: [\n        new MasterCSSPlugin(),");
-	if (/export\s+default\s+\{/.test(next)) return replaceFirst(next, /export\s+default\s+\{/, "export default {\n    plugins: [new MasterCSSPlugin()],");
+	if (/plugins\s*:\s*\[/.test(next)) return replaceFirst(next, /plugins\s*:\s*\[/, `plugins: [\n        ${pluginCall},`);
+	if (/export\s+default\s+\{/.test(next)) return replaceFirst(next, /export\s+default\s+\{/, `export default {\n    plugins: [${pluginCall}],`);
 	return next;
 }
-function addMasterCSSRsbuildPlugin(content) {
+function addMasterCSSRsbuildPlugin(content, mode) {
 	if (content.includes("@master/css.webpack")) return content;
 	let next = addImport(content, "import MasterCSSPlugin from '@master/css.webpack'");
 	const rspackSetupBody = `            config.plugins ||= []
-            config.plugins.push(new MasterCSSPlugin())
+            config.plugins.push(${formatWebpackPluginCall(mode)})
             return config`;
 	const rspackSetup = `rspack(config) {
 ${rspackSetupBody}
@@ -68,29 +105,21 @@ function addMasterCSSVitePluginCall(content, pluginCall) {
 	if (/defineConfig\(\s*\{/.test(next)) return replaceFirst(next, /defineConfig\(\s*\{/, `defineConfig({\n    plugins: [${pluginCall}],`);
 	return next;
 }
-function createViteConfig() {
+function createViteConfig(mode) {
 	return `import { defineConfig } from 'vite'
 import masterCSS from '@master/css.vite'
 
 export default defineConfig({
     plugins: [
-        masterCSS()
+        ${formatMasterCSSCall(mode)}
     ]
 })
 `;
 }
 function createStaticViteConfig() {
-	return `import { defineConfig } from 'vite'
-import masterCSS from '@master/css.vite'
-
-export default defineConfig({
-    plugins: [
-        masterCSS({ mode: 'static' })
-    ]
-})
-`;
+	return createViteConfig("static");
 }
-function createRspackConfig() {
+function createRspackConfig(mode) {
 	return `import MasterCSSPlugin from '@master/css.webpack'
 
 export default {
@@ -103,12 +132,22 @@ export default {
         ]
     },
     plugins: [
-        new MasterCSSPlugin()
+        ${formatWebpackPluginCall(mode)}
+    ]
+}
+`;
+}
+function createWebpackConfig(mode) {
+	return `import MasterCSSPlugin from '@master/css.webpack'
+
+export default {
+    plugins: [
+        ${formatWebpackPluginCall(mode)}
     ]
 }
 `;
 }
-function createRsbuildConfig() {
+function createRsbuildConfig(mode) {
 	return `import { defineConfig } from '@rsbuild/core'
 import MasterCSSPlugin from '@master/css.webpack'
 
@@ -116,57 +155,62 @@ export default defineConfig({
     tools: {
         rspack(config) {
             config.plugins ||= []
-            config.plugins.push(new MasterCSSPlugin())
+            config.plugins.push(${formatWebpackPluginCall(mode)})
             return config
         }
     }
 })
 `;
 }
-function createNextConfig() {
+function createNextConfig(mode) {
 	return `import { withMasterCSS } from '@master/css.next'
 
-const nextConfig = withMasterCSS({})
+const nextConfig = ${formatNextCall("{}", mode)}
 
 export default nextConfig
 `;
 }
-function addMasterCSSNextConfig(content) {
-	if (content.includes("@master/css.next")) return content;
+function addMasterCSSNextConfig(content, mode) {
+	if (content.includes("@master/css.next")) return mode ? addMasterCSSNextMode(content, mode) : content;
 	const next = addImport(content, "import { withMasterCSS } from '@master/css.next'");
-	if (/export\s+default\s+/.test(next)) return next.replace(/export\s+default\s+([^;\n]+)(;?)(\n|$)/, "export default withMasterCSS($1)$2$3");
+	if (/export\s+default\s+/.test(next)) return next.replace(/export\s+default\s+([^;\n]+)(;?)(\n|$)/, `export default ${formatNextCall("$1", mode)}$2$3`);
 	return `${next.trimEnd()}
 
-export default withMasterCSS({})
+export default ${formatNextCall("{}", mode)}
 `;
 }
-function addMasterCSSNuxtModule(content) {
+function addMasterCSSNextMode(content, mode) {
+	return content.replace(/(?:await\s+)?withMasterCSS\(\s*(\{\s*\}|[A-Za-z_$][\w$]*)\s*(?:,\s*\{[^)]*\})?\s*\)/g, (_match, target) => formatNextCall(target, mode));
+}
+function addMasterCSSNuxtModule(content, mode) {
 	if (content.includes("@master/css.nuxt")) return content;
-	if (/modules\s*:\s*\[/.test(content)) return replaceFirst(content, /modules\s*:\s*\[/, "modules: [\n        '@master/css.nuxt',");
-	if (/defineNuxtConfig\(\s*\{/.test(content)) return replaceFirst(content, /defineNuxtConfig\(\s*\{/, "defineNuxtConfig({\n    modules: ['@master/css.nuxt'],");
+	const moduleEntry = formatNuxtModule(mode);
+	if (/modules\s*:\s*\[/.test(content)) return replaceFirst(content, /modules\s*:\s*\[/, `modules: [\n        ${moduleEntry},`);
+	if (/defineNuxtConfig\(\s*\{/.test(content)) return replaceFirst(content, /defineNuxtConfig\(\s*\{/, `defineNuxtConfig({\n    modules: [${moduleEntry}],`);
 	return content;
 }
-function createNuxtConfig() {
+function createNuxtConfig(mode) {
 	return `export default defineNuxtConfig({
-    modules: ['@master/css.nuxt'],
+    modules: [${formatNuxtModule(mode)}],
     css: ['~/assets/css/master.css']
 })
 `;
 }
-function addMasterCSSAstroIntegration(content) {
+function addMasterCSSAstroIntegration(content, mode) {
 	if (content.includes("@master/css.astro")) return content;
+	const pluginCall = formatMasterCSSCall(mode);
 	let next = addImport(content, "import masterCSS from '@master/css.astro'");
-	if (/integrations\s*:\s*\[/.test(next)) return replaceFirst(next, /integrations\s*:\s*\[/, "integrations: [\n        masterCSS(),");
-	if (/defineConfig\(\s*\{/.test(next)) return replaceFirst(next, /defineConfig\(\s*\{/, "defineConfig({\n    integrations: [masterCSS()],");
+	if (/integrations\s*:\s*\[/.test(next)) return replaceFirst(next, /integrations\s*:\s*\[/, `integrations: [\n        ${pluginCall},`);
+	if (/defineConfig\(\s*\{/.test(next)) return replaceFirst(next, /defineConfig\(\s*\{/, `defineConfig({\n    integrations: [${pluginCall}],`);
 	return next;
 }
-function createAstroConfig() {
+function createAstroConfig(mode) {
 	return `import { defineConfig } from 'astro/config'
 import masterCSS from '@master/css.astro'
 
 export default defineConfig({
     integrations: [
-        masterCSS()
+        ${formatMasterCSSCall(mode)}
     ]
 })
 `;
@@ -185,7 +229,7 @@ function addViteClientTypes(content) {
 function addLitShadowRuntime(content) {
 	if (content.includes("@master/css-runtime") && content.includes("virtual:master-css-manifest") && content.includes("@cssRuntime({ manifest, emittedGlobals })") && content.includes("cssRuntime?: CSSRuntime")) return content;
 	let next = addImport(content, "import { cssRuntime } from '@master/css-runtime'");
-	next = addImport(next, "import type { CSSRuntime } from '@master/css-runtime'");
+	next = addImport(next, "import type CSSRuntime from '@master/css-runtime'");
 	next = addImport(next, "import manifest from 'virtual:master-css-manifest'");
 	next = addImport(next, "import emittedGlobals from 'virtual:master-css-emitted-globals'");
 	if (!next.includes("@cssRuntime({ manifest, emittedGlobals })")) if (/@customElement\([^\n]+\)\nexport\s+class\s/.test(next)) next = next.replace(/(@customElement\([^\n]+\)\n)(export\s+class\s)/, "$1@cssRuntime({ manifest, emittedGlobals })\n$2");
@@ -196,7 +240,7 @@ function addLitShadowRuntime(content) {
 function addAngularRuntimeSetup(content) {
 	if (content.includes("@master/css-runtime")) return content;
 	let next = addImport(content, "import defaultManifestJSON from '@master/css-preset/default-manifest.json'");
-	next = addImport(next, "import { CSSRuntime } from '@master/css-runtime'");
+	next = addImport(next, "import CSSRuntime from '@master/css-runtime'");
 	next = addImport(next, "import type { MasterCSSManifest } from '@master/css-runtime'");
 	const setup = `const defaultManifest = defaultManifestJSON as unknown as MasterCSSManifest
 
@@ -229,4 +273,4 @@ function addMasterCSSEslintConfig(content) {
 `;
 }
 //#endregion
-export { addAngularRuntimeSetup, addLitShadowRuntime, addMasterCSSAstroIntegration, addMasterCSSEslintConfig, addMasterCSSImportToStylesheet, addMasterCSSNextConfig, addMasterCSSNuxtModule, addMasterCSSRsbuildPlugin, addMasterCSSRspackPlugin, addMasterCSSStaticVitePlugin, addMasterCSSVitePlugin, addReactRouterRootCSSImport, addViteClientTypes, createAstroConfig, createMasterCSSStylesheet, createNextConfig, createNuxtConfig, createRsbuildConfig, createRspackConfig, createStaticViteConfig, createViteConfig };
+export { addAngularRuntimeSetup, addLitShadowRuntime, addMasterCSSAstroIntegration, addMasterCSSEslintConfig, addMasterCSSImportToStylesheet, addMasterCSSNextConfig, addMasterCSSNuxtModule, addMasterCSSRsbuildPlugin, addMasterCSSRspackPlugin, addMasterCSSStaticVitePlugin, addMasterCSSTanStackStartVitePlugin, addMasterCSSVitePlugin, addMasterCSSWebpackPlugin, addReactRouterRootCSSImport, addTanStackStartRootCSSImport, addViteClientTypes, createAstroConfig, createMasterCSSStylesheet, createNextConfig, createNuxtConfig, createRsbuildConfig, createRspackConfig, createStaticViteConfig, createViteConfig, createWebpackConfig };

package/package.json

@@ -41,7 +41,7 @@
   "dependencies": {
     "commander": "^14.0.3"
   },
-  "version": "2.0.0-rc.80",
+  "version": "2.0.0-rc.82",
   "scripts": {
     "build": "tsdown --config ../../shared/tsdown-package.config.ts",
     "dev": "tsdown --config ../../shared/tsdown-package.config.ts --watch",