@tamagui/cli 3.0.0-beta.924.1 → 3.0.0

package/dist/build.cjs

@@ -39,7 +39,6 @@ var import_node_os = require("node:os");
 var import_node_child_process = require("node:child_process");
 var import_node_crypto = require("node:crypto");
 var import_node_module = require("node:module");
-var import_typescript = require("typescript");
 const import_meta = {};
 const cliVersion = (0, import_node_module.createRequire)(typeof __filename === "string" ? __filename : import_meta.url)("@tamagui/cli/package.json").version;
 function insertCssImport(jsContent, cssImport) {
@@ -108,15 +107,12 @@ const build = async (options) => {
 		const outputCSSPath = buildOptions.outputCSS ? (0, import_node_path.resolve)(root, buildOptions.outputCSS) : null;
 		if (outputCSSPath) await trackFile(outputCSSPath);
 		const require2 = (0, import_node_module.createRequire)(typeof __filename === "string" ? __filename : import_meta.url);
-		const configPath = (0, import_typescript.findConfigFile)(root, import_typescript.sys.fileExists, "tsconfig.json") || (0, import_typescript.findConfigFile)(root, import_typescript.sys.fileExists, "jsconfig.json");
-		const compilerOptions = configPath ? (0, import_typescript.parseJsonConfigFileContent)((() => {
-			const loaded = (0, import_typescript.readConfigFile)(configPath, import_typescript.sys.readFile);
-			if (loaded.error) throw new Error(String(loaded.error.messageText));
-			return loaded.config;
-		})(), import_typescript.sys, (0, import_node_path.dirname)(configPath)).options : {};
+		const tsconfigPaths = (0, import_static.createTsconfigPathsMatcher)(void 0, root);
 		const resolveCompilerId = (specifier, importer) => {
-			const resolved = (0, import_typescript.nodeModuleNameResolver)(specifier, importer, compilerOptions, import_typescript.sys).resolvedModule?.resolvedFileName;
-			if (resolved && !resolved.endsWith(".d.ts")) return resolved;
+			for (const candidate of tsconfigPaths?.(specifier) ?? []) try {
+				const resolved = require2.resolve(candidate, { paths: [(0, import_node_path.dirname)(importer), root] });
+				if (!resolved.endsWith(".d.ts")) return resolved;
+			} catch {}
 			try {
 				return require2.resolve(specifier, { paths: [(0, import_node_path.dirname)(importer), root] });
 			} catch {

package/dist/cli.cjs

@@ -30,26 +30,45 @@ const COMMAND_MAP = {
 			"--debug": Boolean,
 			"--verbose": Boolean,
 			"--styles-only": Boolean,
-			"--deps-only": Boolean
+			"--deps-only": Boolean,
+			"--strict": Boolean
 		},
 		async run() {
 			const { _, ...flags2 } = (0, import_arg.default)(this.flags);
-			const options = await (0, import_utils.getOptions)({ debug: flags2["--debug"] ? flags2["--verbose"] ? "verbose" : true : false });
+			const options = await (0, import_utils.getOptions)({
+				debug: flags2["--debug"] ? flags2["--verbose"] ? "verbose" : true : false,
+				loadTamaguiOptions: flags2["--strict"] && !flags2["--deps-only"]
+			});
 			if (!flags2["--styles-only"]) {
 				const { checkDeps } = require("@tamagui/static/checkDeps");
 				await checkDeps(options.paths.root);
 			}
 			if (flags2["--deps-only"]) return;
+			if (flags2["--strict"]) {
+				if (!options.tamaguiOptions.config) {
+					throw new Error("Strict style checking requires a Tamagui config.");
+				}
+				const { loadTamagui } = require("@tamagui/static/loadTamagui");
+				process.env.TAMAGUI_KEEP_THEMES = "1";
+				const loaded = await loadTamagui({
+					...options.tamaguiOptions,
+					platform: "web"
+				}, true);
+				if (!loaded?.tamaguiConfig) {
+					throw new Error("Unable to load the Tamagui config for strict style checking.");
+				}
+			}
 			const { checkStyleFiles, formatCheckResults, MissingConfigArtifactError } = require("@tamagui/language-service/check");
 			try {
 				const result = checkStyleFiles({
 					root: options.paths.root,
-					configPath: options.paths.conf
+					configPath: options.paths.conf,
+					strict: flags2["--strict"]
 				});
 				console.info(formatCheckResults(result));
 				if (result.diagnosticCount > 0) process.exitCode = 1;
 			} catch (error) {
-				if (error instanceof MissingConfigArtifactError) {
+				if (error instanceof MissingConfigArtifactError && !flags2["--strict"]) {
 					console.warn(import_chalk.default.yellow(`skipping flat value check: ${error.message}`));
 					return;
 				}
@@ -76,13 +95,7 @@ const COMMAND_MAP = {
 			await loadTamagui({
 				...options.tamaguiOptions,
 				platform: "web"
-			});
-			const { generatePrompt } = require("./generate-prompt.cjs");
-			const { join } = require("node:path");
-			await generatePrompt({
-				...options,
-				output: join(options.paths.dotDir, "prompt.md")
-			});
+			}, true);
 		}
 	},
 	"generate-css": {
@@ -156,6 +169,37 @@ const COMMAND_MAP = {
 			await installGeneratedPackage(type, path);
 		}
 	},
+	icons: {
+		shorthands: [],
+		description: `Generate themed SVG icon components from Lucide, Heroicons, Phosphor, or a folder of svgs.`,
+		usage: `$ tamagui icons add Search ChevronDown
+$ tamagui icons add Copy --from phosphor --weight bold
+$ tamagui icons add Clipboard --from heroicons --variant solid
+$ tamagui icons add Logo --from ./assets/icons --out src/icons
+$ tamagui icons add Search=magnifying-glass --from phosphor`,
+		flags: {
+			"--help": Boolean,
+			"--from": String,
+			"--weight": String,
+			"--variant": String,
+			"--out": String
+		},
+		async run() {
+			const { _, ...flags2 } = (0, import_arg.default)(this.flags);
+			const [_cmd, subcommand, ...names] = _;
+			if (subcommand !== "add") {
+				throw new Error("usage: tamagui icons add <Name...> [--from] [--out]");
+			}
+			const { addIcons } = require("./icons.cjs");
+			await addIcons({
+				names,
+				from: flags2["--from"],
+				weight: flags2["--weight"],
+				variant: flags2["--variant"],
+				out: flags2["--out"]
+			});
+		}
+	},
 	build: {
 		shorthands: ["b"],
 		description: `Use to pre-build a Tamagui component directory. Use -- to run a command after optimization, then auto-restore files.`,
@@ -308,6 +352,30 @@ $ tamagui migrate --from v1`,
 				output: flags2["--output"]
 			});
 		}
+	},
+	"preview-theme": {
+		shorthands: ["preview"],
+		description: `Preview a theme configuration in the browser on tamagui.dev/theme`,
+		usage: `$ tamagui preview-theme ./theme.json
+$ tamagui preview-theme --theme '{"palettes": ...}'
+$ tamagui preview-theme ./theme.json --print`,
+		flags: {
+			"--help": Boolean,
+			"--theme": String,
+			"--url": String,
+			"--print": Boolean
+		},
+		async run() {
+			const { _, ...flags2 } = (0, import_arg.default)(this.flags);
+			const [_cmd, themeArg] = _;
+			const { previewTheme } = require("./preview-theme.cjs");
+			await previewTheme({
+				theme: flags2["--theme"],
+				themeArg,
+				url: flags2["--url"],
+				print: flags2["--print"]
+			});
+		}
 	}
 };
 const commandEntries = Object.keys(COMMAND_MAP).flatMap((command2) => {

package/dist/generate-prompt.cjs

@@ -27,6 +27,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var generate_prompt_exports = {};
 __export(generate_prompt_exports, { generatePrompt: () => generatePrompt });
 module.exports = __toCommonJS(generate_prompt_exports);
+var import_static = require("@tamagui/static");
 var import_node_path = require("node:path");
 var FS = __toESM(require("fs-extra"));
 async function generatePrompt(options) {
@@ -36,350 +37,20 @@ async function generatePrompt(options) {
 	await loadTamagui({
 		...options.tamaguiOptions,
 		platform: "web"
-	});
+	}, true);
 	const configPath = (0, import_node_path.join)(paths.dotDir, "tamagui.config.json");
 	if (!FS.existsSync(configPath)) {
 		throw new Error(`Config file not found at ${configPath}. Please run 'tamagui generate' first.`);
 	}
 	const config = await FS.readJSON(configPath);
-	const markdown = generateMarkdown(config);
+	const configSetting = config.tamaguiConfig?.settings?.styleValueSyntax;
+	const explicitChoice = options.styleValueSyntax || process.env.TAMAGUI_STYLE_VALUE_SYNTAX || configSetting;
+	const { resolveStyleValueSyntax } = require("./setup-prompt.cjs");
+	const resolvedSyntax = await resolveStyleValueSyntax(explicitChoice);
+	const markdown = (0, import_static.generateConfigMarkdown)(config, { styleValueSyntax: resolvedSyntax });
 	const outputPath = output || (0, import_node_path.join)(process.cwd(), "tamagui-prompt.md");
 	await FS.writeFile(outputPath, markdown, "utf-8");
 	console.info(`
   \u2713 Generated prompt file at ${outputPath}
 `);
 }
-function generateMarkdown(config) {
-	const sections = [];
-	sections.push("# Tamagui Configuration\n\n");
-	sections.push("This document provides an overview of the Tamagui configuration for this project.\n\n");
-	const shorthands = config.tamaguiConfig?.shorthands || {};
-	const reverseShorthands = {};
-	for (const [short, full] of Object.entries(shorthands)) {
-		reverseShorthands[full] = short;
-	}
-	const getPropName = (fullProp) => {
-		const settings2 = config.tamaguiConfig?.settings || {};
-		if (settings2.onlyAllowShorthands && reverseShorthands[fullProp]) {
-			return reverseShorthands[fullProp];
-		}
-		return fullProp;
-	};
-	const settings = config.tamaguiConfig?.settings || {};
-	if (Object.keys(settings).length > 0) {
-		sections.push("## Configuration Settings\n\n");
-		sections.push("**IMPORTANT:** These settings affect how you write Tamagui code in this project.\n\n");
-		if (settings.defaultFont) {
-			sections.push(`### Default Font: \`${settings.defaultFont}\`
-
-`);
-			sections.push(`All text components will use the "${settings.defaultFont}" font family by default.
-
-`);
-		}
-		if (settings.onlyAllowShorthands !== void 0) {
-			sections.push(`### Only Allow Shorthands: \`${settings.onlyAllowShorthands}\`
-
-`);
-			if (settings.onlyAllowShorthands) {
-				sections.push("**You MUST use shorthand properties in this project.**\n\n");
-				sections.push("Full property names are not allowed. For example:\n");
-				sections.push("- ✅ `<View w=\"10\" />` (correct)\n");
-				sections.push("- ❌ `<View width=\"10\" />` (will error)\n\n");
-				sections.push("See the Shorthand Properties section below for all available shorthands.\n\n");
-			} else {
-				sections.push("You can use either shorthand or full property names.\n\n");
-			}
-		}
-		if (settings.addThemeClassName !== void 0) {
-			sections.push(`### Theme Class Name: \`${settings.addThemeClassName}\`
-
-`);
-			if (settings.addThemeClassName === "html") {
-				sections.push("Theme classes are applied to the root HTML element.\n\n");
-			}
-		}
-		const platform = settings.platform || settings.defaultProps?.platform;
-		if (platform) {
-			sections.push(`### Platform Mode: \`${platform}\`
-
-`);
-			if (platform === "web") {
-				sections.push("This project is configured for **web only**.\n\n");
-			} else if (platform === "native") {
-				sections.push("This project is configured for **React Native only**.\n\n");
-			}
-		}
-		const configString = JSON.stringify(config.tamaguiConfig);
-		if (configString.includes("semi-strict-web")) {
-			sections.push("### Mode: `semi-strict-web`\n\n");
-			sections.push("This configuration uses semi-strict-web mode, which:\n");
-			sections.push("- Optimizes for web performance\n");
-			sections.push("- May have limited React Native API support\n");
-			sections.push("- Focuses on web-first development\n\n");
-		}
-	}
-	const componentsSection = [];
-	const allComponents = [];
-	for (const componentModule of config.components) {
-		const componentNames = Object.keys(componentModule.nameToInfo);
-		allComponents.push(...componentNames);
-	}
-	const componentGroups = /* @__PURE__ */ new Map();
-	const processed = /* @__PURE__ */ new Set();
-	const sortedComponents = [...allComponents].sort((a, b) => a.length - b.length);
-	for (const name of sortedComponents) {
-		if (processed.has(name)) continue;
-		const children = allComponents.filter((other) => other !== name && other.startsWith(name) && other[name.length]?.match(/[A-Z]/));
-		if (children.length > 0) {
-			componentGroups.set(name, new Set(children));
-			processed.add(name);
-			children.forEach((child) => processed.add(child));
-		}
-	}
-	const standaloneComponents = allComponents.filter((name) => !processed.has(name));
-	componentsSection.push("## Components\n\n");
-	componentsSection.push("The following components are available:\n\n");
-	const allBaseComponents = [...standaloneComponents, ...Array.from(componentGroups.keys())].sort();
-	for (const name of allBaseComponents) {
-		componentsSection.push(`- ${name}
-`);
-		if (componentGroups.has(name)) {
-			const children = Array.from(componentGroups.get(name)).sort();
-			for (const child of children) {
-				const suffix = child.slice(name.length);
-				componentsSection.push(`  - ${name}.${suffix}
-`);
-			}
-		}
-	}
-	componentsSection.push("\n");
-	sections.push("## Shorthand Properties\n\n");
-	sections.push("These shorthand properties are available for styling:\n\n");
-	const shorthandEntries = Object.entries(shorthands).sort(([a], [b]) => a.localeCompare(b));
-	sections.push(shorthandEntries.map(([short, full]) => `- \`${short}\` \u2192 \`${full}\``).join("\n"));
-	sections.push("\n\n");
-	sections.push("## Themes\n\n");
-	const themes = config.tamaguiConfig?.themes || {};
-	const themeNames = Object.keys(themes).sort();
-	const hierarchy = {
-		level1: /* @__PURE__ */ new Set(),
-		level2: /* @__PURE__ */ new Set(),
-		level3: /* @__PURE__ */ new Set(),
-		components: /* @__PURE__ */ new Set()
-	};
-	for (const themeName of themeNames) {
-		const parts = themeName.split("_");
-		if (parts[0] === "light" || parts[0] === "dark") {
-			hierarchy.level1.add(parts[0]);
-			if (parts.length > 1 && parts[1] && !parts[1].startsWith("alt") && parts[1] !== "active") {
-				if (parts[1][0] === parts[1][0].toLowerCase()) {
-					hierarchy.level2.add(parts[1]);
-				}
-			}
-			for (const part of parts) {
-				if (part.startsWith("alt") || part === "active") {
-					hierarchy.level3.add(part);
-				}
-			}
-			for (const part of parts) {
-				if (part[0] && part[0] === part[0].toUpperCase() && part[0] !== part[0].toLowerCase()) {
-					hierarchy.components.add(part);
-				}
-			}
-		} else {
-			if (parts.length === 1) {
-				hierarchy.level1.add(themeName);
-			}
-		}
-	}
-	sections.push("Themes are organized hierarchically and can be combined:\n\n");
-	if (hierarchy.level1.size > 0) {
-		sections.push("**Level 1 (Base):**\n\n");
-		sections.push(Array.from(hierarchy.level1).sort().map((name) => `- ${name}`).join("\n"));
-		sections.push("\n\n");
-	}
-	if (hierarchy.level2.size > 0) {
-		sections.push("**Level 2 (Color Schemes):**\n\n");
-		sections.push(Array.from(hierarchy.level2).sort().map((name) => `- ${name}`).join("\n"));
-		sections.push("\n\n");
-	}
-	if (hierarchy.level3.size > 0) {
-		sections.push("**Level 3 (Variants):**\n\n");
-		sections.push(Array.from(hierarchy.level3).sort().map((name) => `- ${name}`).join("\n"));
-		sections.push("\n\n");
-	}
-	if (hierarchy.components.size > 0) {
-		sections.push("**Component Themes:**\n\n");
-		sections.push(Array.from(hierarchy.components).sort().map((name) => `- ${name}`).join("\n"));
-		sections.push("\n\n");
-	}
-	sections.push("### Theme Usage\n\n");
-	sections.push("Themes are combined hierarchically. For example, `light_blue_alt1_Button` combines:\n");
-	sections.push("- Base: `light`\n");
-	sections.push("- Color: `blue`\n");
-	sections.push("- Variant: `alt1`\n");
-	sections.push("- Component: `Button`\n\n");
-	sections.push("**Basic usage:**\n\n");
-	sections.push("```tsx\n");
-	sections.push("// Apply a theme to components\n");
-	sections.push("export default () => (\n");
-	sections.push("  <Theme name=\"dark\">\n");
-	sections.push("    <Button>I'm a dark button</Button>\n");
-	sections.push("  </Theme>\n");
-	sections.push(")\n\n");
-	sections.push("// Themes nest and combine automatically\n");
-	sections.push("export default () => (\n");
-	sections.push("  <Theme name=\"dark\">\n");
-	sections.push("    <Theme name=\"blue\">\n");
-	sections.push("      <Button>Uses dark_blue theme</Button>\n");
-	sections.push("    </Theme>\n");
-	sections.push("  </Theme>\n");
-	sections.push(")\n");
-	sections.push("```\n\n");
-	sections.push("**Accessing theme values:**\n\n");
-	sections.push("Components access theme values by their bare names:\n\n");
-	sections.push("```tsx\n");
-	sections.push(`<View ${getPropName("backgroundColor")}="background" ${getPropName("color")}="color" />
-`);
-	sections.push("```\n\n");
-	sections.push("**Special props:**\n\n");
-	sections.push("- `theme=\"inverse\"`: Uses the opposite light or dark sub-theme\n");
-	sections.push("- `reset`: Reverts to grandparent theme\n\n");
-	sections.push("## Tokens\n\n");
-	sections.push("Tokens are design system values referenced by their bare names.\n\n");
-	const tokens = config.tamaguiConfig?.tokens || {};
-	if (tokens.space) {
-		sections.push("### Space Tokens\n\n");
-		const spaceTokens = Object.entries(tokens.space).sort(([a], [b]) => {
-			const numA = parseFloat(a);
-			const numB = parseFloat(b);
-			if (!isNaN(numA) && !isNaN(numB)) {
-				return numA - numB;
-			}
-			return a.localeCompare(b);
-		});
-		sections.push(spaceTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join("\n"));
-		sections.push("\n\n");
-	}
-	if (tokens.size) {
-		sections.push("### Size Tokens\n\n");
-		const sizeTokens = Object.entries(tokens.size).sort(([a], [b]) => {
-			const numA = parseFloat(a);
-			const numB = parseFloat(b);
-			if (!isNaN(numA) && !isNaN(numB)) {
-				return numA - numB;
-			}
-			return a.localeCompare(b);
-		});
-		sections.push(sizeTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join("\n"));
-		sections.push("\n\n");
-	}
-	if (tokens.radius) {
-		sections.push("### Radius Tokens\n\n");
-		const radiusTokens = Object.entries(tokens.radius).sort(([a], [b]) => {
-			const numA = parseFloat(a);
-			const numB = parseFloat(b);
-			if (!isNaN(numA) && !isNaN(numB)) {
-				return numA - numB;
-			}
-			return a.localeCompare(b);
-		});
-		sections.push(radiusTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join("\n"));
-		sections.push("\n\n");
-	}
-	if (tokens.zIndex) {
-		sections.push("### Z-Index Tokens\n\n");
-		const zIndexTokens = Object.entries(tokens.zIndex).sort(([a], [b]) => {
-			const numA = parseFloat(a);
-			const numB = parseFloat(b);
-			if (!isNaN(numA) && !isNaN(numB)) {
-				return numA - numB;
-			}
-			return a.localeCompare(b);
-		});
-		sections.push(zIndexTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join("\n"));
-		sections.push("\n\n");
-	}
-	if (tokens.color) {
-		sections.push("### Color Tokens\n\n");
-		const colorTokens = Object.entries(tokens.color).sort(([a], [b]) => a.localeCompare(b));
-		sections.push(colorTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join("\n"));
-		sections.push("\n\n");
-	}
-	sections.push("### Token Usage\n\n");
-	sections.push("Tokens can be used in component props by their bare names:\n\n");
-	sections.push("```tsx\n");
-	sections.push("// Space tokens - for margin, padding, gap\n");
-	sections.push(`<View ${getPropName("padding")}="4" ${getPropName("gap")}="2" ${getPropName("margin")}="3" />
-
-`);
-	sections.push("// Size tokens - for width, height, dimensions\n");
-	sections.push(`<View ${getPropName("width")}="10" ${getPropName("height")}="6" />
-
-`);
-	sections.push("// Color tokens - for colors and backgrounds\n");
-	sections.push(`<View ${getPropName("backgroundColor")}="blue5" ${getPropName("color")}="gray12" />
-
-`);
-	sections.push("// Radius tokens - for border-radius\n");
-	sections.push(`<View ${getPropName("borderRadius")}="4" />
-`);
-	sections.push("```\n\n");
-	if (config.tamaguiConfig?.media) {
-		sections.push("## Media Queries\n\n");
-		sections.push("Available responsive breakpoints:\n\n");
-		const media = config.tamaguiConfig.media;
-		const mediaEntries = Object.entries(media).sort(([a], [b]) => a.localeCompare(b));
-		for (const [name, query] of mediaEntries) {
-			sections.push(`- **${name}**: ${JSON.stringify(query)}
-`);
-		}
-		sections.push("\n");
-		sections.push("### Media Query Usage\n\n");
-		sections.push("Media queries can be used as style props or with the `useMedia` hook:\n\n");
-		sections.push("```tsx\n");
-		sections.push("// As a clause in the same style value\n");
-		const firstMediaName = mediaEntries[0]?.[0];
-		if (firstMediaName) {
-			sections.push(`<View ${getPropName("width")}="100% ${firstMediaName}:50%" />
-
-`);
-		}
-		sections.push("// Using the useMedia hook\n");
-		sections.push("const media = useMedia()\n");
-		if (firstMediaName) {
-			sections.push(`if (media.${firstMediaName}) {
-`);
-			sections.push("  // Render for this breakpoint\n");
-			sections.push("}\n");
-		}
-		sections.push("```\n\n");
-	}
-	if (config.tamaguiConfig?.fonts) {
-		sections.push("## Fonts\n\n");
-		sections.push("Available font families:\n\n");
-		const fonts = config.tamaguiConfig.fonts;
-		const fontNames = Object.keys(fonts).sort();
-		sections.push(fontNames.map((name) => `- ${name}`).join("\n"));
-		sections.push("\n\n");
-	}
-	if (config.tamaguiConfig?.animations) {
-		sections.push("## Animations\n\n");
-		sections.push("Available animation presets:\n\n");
-		const animations = config.tamaguiConfig.animations;
-		if (animations.animations) {
-			const animationNames = Object.keys(animations.animations).sort();
-			sections.push(animationNames.map((name) => `- ${name}`).join("\n"));
-			sections.push("\n\n");
-		}
-	}
-	sections.push(...componentsSection);
-	return sections.join("");
-}
-function formatTokenValue(value) {
-	if (typeof value === "object" && value !== null && "val" in value) {
-		return String(value.val);
-	}
-	return String(value);
-}