@yahoo/uds 3.144.0 → 3.145.0-beta.2

package/dist/tailwind-v3/dist/purger/legacy/purgeCSS.js

@@ -0,0 +1,254 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { DEFAULT_ENTRY, resolveEntryPaths } from "../../../../tailwind-internal/dist/utils/entryPoints.js";
+import { print } from "../../packages/cli/dist/lib/print.js";
+import { spinStart, spinStop } from "../../packages/cli/dist/lib/spinner.js";
+import { findReferencesAsJsxElements, getUsedPropsInReference } from "../../utils/tsMorph.js";
+import { DARK_COLOR_MODE_CLASSNAME, LARGE_SCALE_MODE_CLASSNAME, LIGHT_COLOR_MODE_CLASSNAME, MEDIUM_SCALE_MODE_CLASSNAME, SMALL_SCALE_MODE_CLASSNAME, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME } from "../../packages/css-tokens/dist/index.js";
+import path from "node:path";
+import { mkdirSync, writeFileSync } from "node:fs";
+import { Node, Project, SyntaxKind, ts } from "ts-morph";
+import fg from "fast-glob";
+//#region ../tailwind-v3/dist/purger/legacy/purgeCSS.mjs
+/*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
+const scaleModeToClass = {
+	large: LARGE_SCALE_MODE_CLASSNAME,
+	medium: MEDIUM_SCALE_MODE_CLASSNAME,
+	small: SMALL_SCALE_MODE_CLASSNAME,
+	xLarge: XLARGE_SCALE_MODE_CLASSNAME,
+	xSmall: XSMALL_SCALE_MODE_CLASSNAME,
+	xxLarge: XXLARGE_SCALE_MODE_CLASSNAME,
+	xxxLarge: XXXLARGE_SCALE_MODE_CLASSNAME
+};
+const colorModeToClass = {
+	dark: DARK_COLOR_MODE_CLASSNAME,
+	light: LIGHT_COLOR_MODE_CLASSNAME
+};
+const getFiles = async (entry) => {
+	try {
+		const workspaceDir = process.env.PWD || process.cwd();
+		if (!workspaceDir) throw new Error("Workspace directory not found.");
+		const files = await Promise.all(resolveEntryPaths(entry, workspaceDir, DEFAULT_ENTRY).map((entryPath) => {
+			if (entryPath.kind === "file") return [entryPath.absolutePath];
+			return fg(["**/*.jsx", "**/*.tsx"], {
+				cwd: entryPath.absolutePath,
+				absolute: true,
+				ignore: ["**/node_modules/**"]
+			});
+		}));
+		return [...new Set(files.flat())];
+	} catch (error) {
+		throw error instanceof Error ? error : /* @__PURE__ */ new Error(`Couldn't find the entry directory: ${entry}. Please make sure it exists.`);
+	}
+};
+/**
+* Find all JSX references for a named import.
+*
+* @example
+* const references = findNamedImportReferences(project, '@yahoo/uds', 'HStack')
+*/
+function findNamedImportReferences(project, moduleSpecifierValue, namedImportName) {
+	const references = [];
+	for (const sourceFile of project.getSourceFiles()) for (const importDeclaration of sourceFile.getImportDeclarations()) if (importDeclaration.getModuleSpecifierValue() === moduleSpecifierValue) {
+		for (const namedImport of importDeclaration.getNamedImports()) if (namedImport.getName() === namedImportName) {
+			const identifier = namedImport.getFirstDescendantByKindOrThrow(ts.SyntaxKind.Identifier);
+			references.push(...findReferencesAsJsxElements(identifier));
+		}
+	}
+	return references;
+}
+/**
+* Given a file it returns the list of imports from @yahoo/uds
+*/
+const parseFiles = (project, files) => {
+	const importsSet = /* @__PURE__ */ new Set();
+	files.map((file) => {
+		return project.getSourceFile(file)?.getImportDeclarations().filter((declaration) => {
+			return declaration.getModuleSpecifier().getText().includes("@yahoo/uds") || declaration.getModuleSpecifier().getText().includes("@yahoo/uds/experimental");
+		}).map((declaration) => {
+			return declaration.getNamedImports().map((namedImport) => namedImport.getName());
+		}).flat() ?? [];
+	}).flat().forEach((item) => {
+		if (!importsSet.has(item)) importsSet.add(item);
+	});
+	return Array.from(importsSet);
+};
+const getTailwindSafelist = (project, componentList, variants, generatedPurgeCssData, packageJson) => {
+	const { variantsList, componentToVariants, componentToTwClasses } = generatedPurgeCssData;
+	const safeList = [];
+	const validVariants = new Set(variantsList);
+	const usedProps = /* @__PURE__ */ new Map();
+	componentList.forEach((component) => {
+		if (isUDSComponent(component, generatedPurgeCssData)) {
+			componentToVariants[component].forEach(([propName, usedValues]) => {
+				if (validVariants.has(propName)) {
+					const options = usedProps.get(propName) ?? /* @__PURE__ */ new Set();
+					usedValues.forEach((val) => options.add(val));
+					usedProps.set(propName, options);
+				}
+			});
+			getUsedProps(project, component, variants, packageJson).forEach(([propName, usedValues]) => {
+				if (validVariants.has(propName)) {
+					if (usedValues.length === 0) usedValues = Object.keys(variants[propName] ?? {});
+					const options = usedProps.get(propName) ?? /* @__PURE__ */ new Set();
+					usedValues.forEach((val) => options.add(val));
+					usedProps.set(propName, options);
+				}
+			});
+			safeList.push(...componentToTwClasses[component].replaceAll("\\", "").split(" "));
+		}
+	});
+	for (const [propName, usedValues] of usedProps) {
+		const variantGroup = variants[propName];
+		if (variantGroup) usedValues.forEach((option) => {
+			const variantClass = variantGroup[option];
+			if (variantClass) safeList.push(variantClass.replaceAll("\\", ""));
+		});
+	}
+	for (const [variant, variantOptions] of scanGetStylesReferences(project, variants, packageJson)) {
+		const variantGroup = variants[variant];
+		if (variantGroup) variantOptions.forEach((option) => {
+			const variantClass = variantGroup[option];
+			if (variantClass) safeList.push(variantClass.replaceAll("\\", ""));
+		});
+	}
+	return Array.from(new Set(safeList)).filter(Boolean);
+};
+/**
+* Get the used props for a given component.
+*
+* @example
+* const usedProps = getUsedProps(project, 'HStack');
+*/
+const getUsedProps = (project, component, variants, packageJson) => {
+	const references = [];
+	references.push(...findNamedImportReferences(project, packageJson.name, component));
+	references.push(...findNamedImportReferences(project, `${packageJson.name}/experimental`, component));
+	return references.map((reference) => getUsedPropsInReference(reference, variants)).flat();
+};
+const isUDSComponent = (component, { componentToVariants }) => {
+	return !!componentToVariants[component];
+};
+const saveToFile = (safeList, outputPath) => {
+	const fileContent = `
+    //! This file is generated by \`uds purge\` from @yahoo/uds
+    //! Do not edit directly
+    //! If there is issue with this file please report to #ask-uds
+    export const safelist = ${JSON.stringify(safeList)};
+    `;
+	mkdirSync(path.dirname(outputPath), { recursive: true });
+	writeFileSync(outputPath, fileContent);
+};
+const getComponentsToConvertToTW = (udsImport, generatedPurgeCssData) => {
+	const { componentToVariants, componentsDependencies } = generatedPurgeCssData;
+	const components = udsImport.filter((importedItem) => !!componentToVariants[importedItem]);
+	const set = /* @__PURE__ */ new Set();
+	components.forEach((component) => {
+		if (!set.has(component)) set.add(component);
+		if (componentsDependencies[component]) componentsDependencies[component].forEach((dependent) => {
+			if (!set.has(dependent)) set.add(dependent);
+		});
+	});
+	return Array.from(set);
+};
+/**
+* Get the classes that corresponds to the used modes
+*/
+const getClassesForEnabledThemesAndScales = () => {
+	const classes = [];
+	if (process.env.ENABLED_SCALE_AND_COLOR_MODES) process.env.ENABLED_SCALE_AND_COLOR_MODES.split(",").map((mode) => {
+		mode = mode.trim();
+		if (colorModeToClass[mode]) classes.push(colorModeToClass[mode]);
+		else if (scaleModeToClass[mode]) classes.push(scaleModeToClass[mode]);
+	});
+	else {
+		classes.push(colorModeToClass.dark);
+		classes.push(colorModeToClass.light);
+		classes.push(scaleModeToClass.large);
+	}
+	return classes;
+};
+/**
+* Scan the source code for all `getStyles` references
+*
+* Note: This currently only works if we are passing a literal object to getStyles.
+*
+* Explanation: They we are able to enfer what css to include is by looking at the properties of the object passed.
+* If something other than an object is passed, we can fallback on the Type, but that would require handling
+* a lot of edge cases (function return type, spread operator, ternary, ...) and each one of these cases will
+* most likely have a sub case. Falling back to the Type will complicate the code a lot is error prone as there
+* is only so much info we can get out of the types as the Users are free to use `any` on their project which will
+* provide no value for us. Hence why having a literal object passed is the best and probably the only sane way
+* to go about this.
+*/
+const scanGetStylesReferences = (project, variants, packageJson) => {
+	const references = [];
+	for (const sourceFile of project.getSourceFiles()) for (const importDeclaration of sourceFile.getImportDeclarations()) if (importDeclaration.getModuleSpecifierValue() === packageJson.name) {
+		for (const namedImport of importDeclaration.getNamedImports()) if (namedImport.getName() === "getStyles") {
+			const identifier = namedImport.getFirstDescendantByKindOrThrow(ts.SyntaxKind.Identifier);
+			for (const reference of identifier.findReferencesAsNodes()) {
+				const node = reference.getFirstAncestor((node) => {
+					return Node.isCallExpression(node);
+				});
+				if (node) references.push(node);
+			}
+		}
+	}
+	const usedProps = /* @__PURE__ */ new Map();
+	for (const reference of references) {
+		const objectLiteralExpression = reference.getFirstChildByKindOrThrow(SyntaxKind.ObjectLiteralExpression);
+		const propertyAssignments = objectLiteralExpression.getDescendantsOfKind(SyntaxKind.PropertyAssignment);
+		const shorthandPropertyAssignments = objectLiteralExpression.getDescendantsOfKind(SyntaxKind.ShorthandPropertyAssignment);
+		propertyAssignments.forEach((propertyAssigment) => {
+			const identifier = propertyAssigment.getFirstChildByKind(SyntaxKind.Identifier)?.getText();
+			const stringLiteral = propertyAssigment.getFirstChildByKind(SyntaxKind.StringLiteral)?.getLiteralText();
+			if (identifier && !stringLiteral) {
+				const fallback = !!variants[identifier] ? Object.keys(variants[identifier]) : [];
+				usedProps.set(identifier, new Set(fallback));
+			}
+			if (identifier && stringLiteral) {
+				let options;
+				if (usedProps.has(identifier)) options = usedProps.get(identifier);
+				else options = /* @__PURE__ */ new Set();
+				options.add(stringLiteral);
+				usedProps.set(identifier, options);
+			}
+		});
+		shorthandPropertyAssignments.forEach((propertyAssigment) => {
+			const identifier = propertyAssigment.getFirstChildByKind(SyntaxKind.Identifier)?.getText();
+			if (identifier) usedProps.set(identifier, /* @__PURE__ */ new Set());
+		});
+	}
+	return usedProps;
+};
+const applyPurgeDefaults = (options = {}) => ({
+	config: options.config ?? process.env.UDS_OUT_FILE ?? "./uds.config.ts",
+	output: options.output ?? "dist/safelist.ts",
+	entry: options.entry ?? "./src"
+});
+async function purge(variants, packageJson, generatedPurgeCssData, options = {}) {
+	const { config: configPath, output, entry } = applyPurgeDefaults(options);
+	const workspaceDir = process.env.PWD || process.cwd();
+	if (!workspaceDir) throw new Error("Workspace directory not found.");
+	const project = new Project({ tsConfigFilePath: path.join(workspaceDir, "/tsconfig.json") });
+	const outputFilePath = path.join(workspaceDir, output);
+	const configAbsolutePath = path.join(workspaceDir, configPath);
+	try {
+		await import(configAbsolutePath);
+	} catch {
+		throw new Error("Couldn't load the UDS config. Make sure you have uds.config.ts in the root of your project.");
+	}
+	spinStart("Getting used UDS components...");
+	print("Loading the project...");
+	const files = await getFiles(entry);
+	print("Going through the imports...");
+	const udsImports = parseFiles(project, files);
+	print("Finding all the components imported from UDS...");
+	const udsComponents = getComponentsToConvertToTW(udsImports, generatedPurgeCssData);
+	print("🧑‍🍳 Cooking...");
+	const safeList = getTailwindSafelist(project, udsComponents, variants, generatedPurgeCssData, packageJson);
+	const themesAndScalesClasses = getClassesForEnabledThemesAndScales();
+	saveToFile(safeList.concat(themesAndScalesClasses), outputFilePath);
+	spinStop("Generated your safelist!");
+}
+//#endregion
+export { purge };

package/dist/tailwind-v3/dist/purger.d.cts

@@ -0,0 +1,2 @@
+
+import { GeneratedPurgeCSSData } from "./purger/legacy/purgeCSS.cjs";

package/dist/tailwind-v3/dist/purger.d.ts

@@ -0,0 +1,2 @@
+
+import { GeneratedPurgeCSSData } from "./purger/legacy/purgeCSS.js";

package/dist/tailwind-v3/dist/utils/tsMorph.cjs

@@ -0,0 +1,121 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+require("../../../_virtual/_rolldown/runtime.cjs");
+let lodash_es = require("lodash-es");
+let ts_morph = require("ts-morph");
+//#region ../tailwind-v3/dist/utils/tsMorph.mjs
+/*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
+/** Determines if an expression is using React.forwardRef. */
+function isForwardRefExpression(node) {
+	if (ts_morph.Node.isCallExpression(node)) {
+		const expression = node.getExpression();
+		/**
+		* forwardRef(() => <Component />)
+		*/
+		if (ts_morph.Node.isIdentifier(expression) && expression.getText() === "forwardRef") return true;
+		/**
+		* React.forwardRef(() => <Component />)
+		*/
+		if (ts_morph.Node.isPropertyAccessExpression(expression) && expression.getText() === "React.forwardRef") return true;
+	}
+	return false;
+}
+/** Determines if a node is a JSX component. */
+function isJsxComponent(node) {
+	let name;
+	if (ts_morph.Node.isVariableDeclaration(node) || ts_morph.Node.isFunctionDeclaration(node) || ts_morph.Node.isClassDeclaration(node)) name = node.getName();
+	else if (ts_morph.Node.isFunctionExpression(node) || ts_morph.Node.isArrowFunction(node)) name = node.getFirstAncestorByKind(ts_morph.SyntaxKind.VariableDeclaration)?.getName();
+	return name ? /[A-Z]/.test(name.charAt(0)) : false;
+}
+/** Returns a functional component declaration, unwrapping forwardRef if needed. */
+function getReactFunctionDeclaration(declaration) {
+	if (isJsxComponent(declaration)) {
+		if (ts_morph.Node.isFunctionDeclaration(declaration)) return declaration;
+		if (ts_morph.Node.isVariableDeclaration(declaration)) {
+			const initializer = declaration.getInitializer();
+			if (initializer) {
+				if (isForwardRefExpression(initializer)) {
+					const [initializerDeclaration] = initializer.getArguments();
+					if (ts_morph.Node.isFunctionDeclaration(initializerDeclaration) || ts_morph.Node.isFunctionExpression(initializerDeclaration) || ts_morph.Node.isArrowFunction(initializerDeclaration)) return initializerDeclaration;
+				} else if (ts_morph.Node.isFunctionDeclaration(initializer) || ts_morph.Node.isFunctionExpression(initializer) || ts_morph.Node.isArrowFunction(initializer)) return initializer;
+			}
+		}
+	}
+	return null;
+}
+/**
+* Traces component references.
+*
+* This is similar to `findReferencesAsNodes` but returns JsxSelfClosingElement and JsxElement nodes.
+* Note, this currently does not account for cases where the component is used as a prop or is renamed.
+*/
+function findReferencesAsJsxElements(identifer) {
+	const jsxElements = [];
+	for (const reference of identifer.findReferencesAsNodes()) {
+		const node = reference.getFirstAncestor((node) => {
+			return ts_morph.Node.isJsxOpeningElement(node) || ts_morph.Node.isJsxSelfClosingElement(node);
+		});
+		if (node) jsxElements.push(node);
+	}
+	return jsxElements;
+}
+/**
+* Given a Jsx Reference, this function finds the parent of that reference,
+* looks at the props, and returns the name used either for spread operator rest or
+* the prop name if there's no spread operator
+*/
+const getParentSpreadOrParamIdentifier = (reference) => {
+	const blockParent = reference.getParentWhile((parent) => {
+		return !getReactFunctionDeclaration(parent);
+	}).getParent();
+	if (!blockParent) return;
+	const reactComponent = getReactFunctionDeclaration(blockParent);
+	if (reactComponent) {
+		const parameters = reactComponent.getParameters();
+		for (let i = 0; i < parameters.length; i++) {
+			const parameter = parameters[i];
+			const objectBindingPattern = parameter.getChildrenOfKind(ts_morph.SyntaxKind.ObjectBindingPattern)[0];
+			const identifier = parameter.getChildrenOfKind(ts_morph.SyntaxKind.Identifier)[0];
+			if (objectBindingPattern) {
+				const dotDotToken = objectBindingPattern.getFirstDescendantByKind(ts_morph.SyntaxKind.DotDotDotToken);
+				if (dotDotToken !== void 0) return dotDotToken?.getParent()?.getFirstChildByKindOrThrow(ts_morph.SyntaxKind.Identifier).getText();
+			} else if (identifier) return identifier.getText();
+		}
+	}
+};
+/**
+* Get used props on a reference.
+*/
+const getUsedPropsInReference = (reference, variants) => {
+	const attributes = reference.getAttributes();
+	const res = [];
+	attributes.forEach((attribute) => {
+		if (ts_morph.Node.isJsxAttribute(attribute)) {
+			const attributeName = attribute.getNameNode().getText();
+			const stringLiterals = attribute.getDescendantsOfKind(ts_morph.SyntaxKind.StringLiteral);
+			const values = [];
+			if (stringLiterals.length !== 0) stringLiterals.forEach((stringLiteral) => values.push(stringLiteral.getLiteralText()));
+			const typeName = attribute.getFirstChildByKindOrThrow(ts_morph.SyntaxKind.Identifier).getDefinitions().map((d) => d.getDeclarationNode()?.getChildrenOfKind(ts_morph.SyntaxKind.TypeReference).pop()?.getText()).pop();
+			if (!typeName && !(0, lodash_es.isEmpty)(attributeName)) res.push([attributeName, values]);
+			else if (variants[(0, lodash_es.camelCase)(typeName)] && !(0, lodash_es.isEmpty)(typeName)) res.push([(0, lodash_es.camelCase)(typeName), values]);
+			else if (!(0, lodash_es.isEmpty)(attributeName)) res.push([attributeName, values]);
+		}
+		if (ts_morph.Node.isJsxSpreadAttribute(attribute)) {
+			const componentPropsSpreadIdentifier = getParentSpreadOrParamIdentifier(reference);
+			const children = attribute.getExpression().getChildren();
+			const lastIdentifier = children.length === 0 ? attribute.getExpression() : children.pop();
+			if (!lastIdentifier || lastIdentifier?.getText() === componentPropsSpreadIdentifier) return [];
+			lastIdentifier.getType().getProperties().forEach((property) => {
+				const propertyNameFromType = property.getDeclarations().map((declaration) => {
+					return (0, lodash_es.camelCase)(declaration.getChildrenOfKind(ts_morph.SyntaxKind.TypeReference)[0]?.getText() ?? "");
+				})[0];
+				if (!(0, lodash_es.isEmpty)(property.getName())) res.push([property.getName(), []]);
+				if (!(0, lodash_es.isEmpty)(propertyNameFromType)) res.push([propertyNameFromType, []]);
+			});
+		}
+		return [];
+	});
+	return res;
+};
+//#endregion
+exports.findReferencesAsJsxElements = findReferencesAsJsxElements;
+exports.getUsedPropsInReference = getUsedPropsInReference;

package/dist/tailwind-v3/dist/utils/tsMorph.js

@@ -0,0 +1,119 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { camelCase, isEmpty } from "lodash-es";
+import { Node, SyntaxKind } from "ts-morph";
+//#region ../tailwind-v3/dist/utils/tsMorph.mjs
+/*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
+/** Determines if an expression is using React.forwardRef. */
+function isForwardRefExpression(node) {
+	if (Node.isCallExpression(node)) {
+		const expression = node.getExpression();
+		/**
+		* forwardRef(() => <Component />)
+		*/
+		if (Node.isIdentifier(expression) && expression.getText() === "forwardRef") return true;
+		/**
+		* React.forwardRef(() => <Component />)
+		*/
+		if (Node.isPropertyAccessExpression(expression) && expression.getText() === "React.forwardRef") return true;
+	}
+	return false;
+}
+/** Determines if a node is a JSX component. */
+function isJsxComponent(node) {
+	let name;
+	if (Node.isVariableDeclaration(node) || Node.isFunctionDeclaration(node) || Node.isClassDeclaration(node)) name = node.getName();
+	else if (Node.isFunctionExpression(node) || Node.isArrowFunction(node)) name = node.getFirstAncestorByKind(SyntaxKind.VariableDeclaration)?.getName();
+	return name ? /[A-Z]/.test(name.charAt(0)) : false;
+}
+/** Returns a functional component declaration, unwrapping forwardRef if needed. */
+function getReactFunctionDeclaration(declaration) {
+	if (isJsxComponent(declaration)) {
+		if (Node.isFunctionDeclaration(declaration)) return declaration;
+		if (Node.isVariableDeclaration(declaration)) {
+			const initializer = declaration.getInitializer();
+			if (initializer) {
+				if (isForwardRefExpression(initializer)) {
+					const [initializerDeclaration] = initializer.getArguments();
+					if (Node.isFunctionDeclaration(initializerDeclaration) || Node.isFunctionExpression(initializerDeclaration) || Node.isArrowFunction(initializerDeclaration)) return initializerDeclaration;
+				} else if (Node.isFunctionDeclaration(initializer) || Node.isFunctionExpression(initializer) || Node.isArrowFunction(initializer)) return initializer;
+			}
+		}
+	}
+	return null;
+}
+/**
+* Traces component references.
+*
+* This is similar to `findReferencesAsNodes` but returns JsxSelfClosingElement and JsxElement nodes.
+* Note, this currently does not account for cases where the component is used as a prop or is renamed.
+*/
+function findReferencesAsJsxElements(identifer) {
+	const jsxElements = [];
+	for (const reference of identifer.findReferencesAsNodes()) {
+		const node = reference.getFirstAncestor((node) => {
+			return Node.isJsxOpeningElement(node) || Node.isJsxSelfClosingElement(node);
+		});
+		if (node) jsxElements.push(node);
+	}
+	return jsxElements;
+}
+/**
+* Given a Jsx Reference, this function finds the parent of that reference,
+* looks at the props, and returns the name used either for spread operator rest or
+* the prop name if there's no spread operator
+*/
+const getParentSpreadOrParamIdentifier = (reference) => {
+	const blockParent = reference.getParentWhile((parent) => {
+		return !getReactFunctionDeclaration(parent);
+	}).getParent();
+	if (!blockParent) return;
+	const reactComponent = getReactFunctionDeclaration(blockParent);
+	if (reactComponent) {
+		const parameters = reactComponent.getParameters();
+		for (let i = 0; i < parameters.length; i++) {
+			const parameter = parameters[i];
+			const objectBindingPattern = parameter.getChildrenOfKind(SyntaxKind.ObjectBindingPattern)[0];
+			const identifier = parameter.getChildrenOfKind(SyntaxKind.Identifier)[0];
+			if (objectBindingPattern) {
+				const dotDotToken = objectBindingPattern.getFirstDescendantByKind(SyntaxKind.DotDotDotToken);
+				if (dotDotToken !== void 0) return dotDotToken?.getParent()?.getFirstChildByKindOrThrow(SyntaxKind.Identifier).getText();
+			} else if (identifier) return identifier.getText();
+		}
+	}
+};
+/**
+* Get used props on a reference.
+*/
+const getUsedPropsInReference = (reference, variants) => {
+	const attributes = reference.getAttributes();
+	const res = [];
+	attributes.forEach((attribute) => {
+		if (Node.isJsxAttribute(attribute)) {
+			const attributeName = attribute.getNameNode().getText();
+			const stringLiterals = attribute.getDescendantsOfKind(SyntaxKind.StringLiteral);
+			const values = [];
+			if (stringLiterals.length !== 0) stringLiterals.forEach((stringLiteral) => values.push(stringLiteral.getLiteralText()));
+			const typeName = attribute.getFirstChildByKindOrThrow(SyntaxKind.Identifier).getDefinitions().map((d) => d.getDeclarationNode()?.getChildrenOfKind(SyntaxKind.TypeReference).pop()?.getText()).pop();
+			if (!typeName && !isEmpty(attributeName)) res.push([attributeName, values]);
+			else if (variants[camelCase(typeName)] && !isEmpty(typeName)) res.push([camelCase(typeName), values]);
+			else if (!isEmpty(attributeName)) res.push([attributeName, values]);
+		}
+		if (Node.isJsxSpreadAttribute(attribute)) {
+			const componentPropsSpreadIdentifier = getParentSpreadOrParamIdentifier(reference);
+			const children = attribute.getExpression().getChildren();
+			const lastIdentifier = children.length === 0 ? attribute.getExpression() : children.pop();
+			if (!lastIdentifier || lastIdentifier?.getText() === componentPropsSpreadIdentifier) return [];
+			lastIdentifier.getType().getProperties().forEach((property) => {
+				const propertyNameFromType = property.getDeclarations().map((declaration) => {
+					return camelCase(declaration.getChildrenOfKind(SyntaxKind.TypeReference)[0]?.getText() ?? "");
+				})[0];
+				if (!isEmpty(property.getName())) res.push([property.getName(), []]);
+				if (!isEmpty(propertyNameFromType)) res.push([propertyNameFromType, []]);
+			});
+		}
+		return [];
+	});
+	return res;
+};
+//#endregion
+export { findReferencesAsJsxElements, getUsedPropsInReference };

package/dist/tailwind-v4/dist/cli.cjs

@@ -0,0 +1,102 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_colors = require("../../cli/dist/lib/colors.cjs");
+const require_print = require("../../cli/dist/lib/print.cjs");
+const require_generateTheme_DkTgUwTM = require("./generateTheme-DkTgUwTM.cjs");
+let node_path = require("node:path");
+node_path = require_runtime.__toESM(node_path, 1);
+let node_fs_promises = require("node:fs/promises");
+node_fs_promises = require_runtime.__toESM(node_fs_promises, 1);
+//#region ../tailwind-v4/dist/cli.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind v4 v0.0.0-development */
+const ALLOWED_DISABLE_OVERRIDES = new Set([
+	"color",
+	"border",
+	"elevation",
+	"font",
+	"text",
+	"spacing",
+	"radius",
+	"shadow",
+	"breakpoint"
+]);
+function parseDisableOverride(raw) {
+	if (!raw || raw === true) return [];
+	const values = String(raw).split(",").map((value) => value.trim()).filter(Boolean);
+	for (const value of values) if (!ALLOWED_DISABLE_OVERRIDES.has(value)) throw new Error(`Invalid --disable-override entry '${value}'. Allowed values: ${Array.from(ALLOWED_DISABLE_OVERRIDES).join(", ")}.`);
+	return values;
+}
+function isTruthyFlag(value) {
+	if (value === true) return true;
+	if (typeof value !== "string") return false;
+	const normalized = value.trim().toLowerCase();
+	return normalized === "true" || normalized === "1" || normalized === "";
+}
+function parseColorScheme(raw) {
+	if (!raw || raw === true) return "system";
+	const value = String(raw).trim().toLowerCase();
+	if (value === "class" || value === "system" || value === "light" || value === "dark") return value;
+	throw new Error(`Invalid --color-scheme value '${value}'. Allowed: "system", "class", "light", "dark".`);
+}
+function parseColorMode(raw) {
+	if (!raw || raw === true) return "light";
+	const value = String(raw).trim().toLowerCase();
+	if (value === "light" || value === "dark") return value;
+	throw new Error(`Invalid --default-color-mode value '${value}'. Allowed: "light", "dark".`);
+}
+function showHelp() {
+	require_print.print("Usage:\n");
+	require_print.print(`  ${require_colors.cyan("uds tailwind-v4 [options]")}\n`);
+	require_print.print("Options:\n");
+	require_print.print(`  ${require_colors.cyan("--out <path>")}                        Output path (default: dist/uds-theme.css)`);
+	require_print.print(`  ${require_colors.cyan("--color-scheme <mode>")}             Color mode strategy: "system" (media query, default), "class" (CSS classes), "light", or "dark"`);
+	require_print.print(`  ${require_colors.cyan("--default-color-mode <mode>")}       Default color mode: "light" (default) or "dark"`);
+	require_print.print(`  ${require_colors.cyan("--light-mode-class <name>")}         CSS class name for light mode (default: light)`);
+	require_print.print(`  ${require_colors.cyan("--dark-mode-class <name>")}          CSS class name for dark mode (default: dark)`);
+	require_print.print(`  ${require_colors.cyan("--system-mode-class <name>")}        CSS class name for system mode (default: system)`);
+	require_print.print(`  ${require_colors.cyan("--disable-override <list>")}          Comma-separated categories to suppress. Allowed: color, border, elevation, font, text, spacing, radius, shadow, breakpoint`);
+	require_print.print(`  ${require_colors.cyan("--skip-fonts")}                       Skip emitting @font-face declarations`);
+	require_print.print(`  ${require_colors.cyan("--help, -h")}                         Show this help message\n`);
+	require_print.print("Examples:\n");
+	require_print.print(`  ${require_colors.gray("uds tailwind-v4")}`);
+	require_print.print(`  ${require_colors.gray("uds tailwind-v4 --skip-fonts")}`);
+	require_print.print(`  ${require_colors.gray("uds tailwind-v4 --color-scheme system")}`);
+	require_print.print(`  ${require_colors.gray("uds tailwind-v4 --color-scheme class")}`);
+	require_print.print(`  ${require_colors.gray("uds tailwind-v4 --color-scheme class --dark-mode-class dark2 --light-mode-class light2")}`);
+	require_print.print(`  ${require_colors.gray("uds tailwind-v4 --default-color-mode dark")}`);
+	require_print.print(`  ${require_colors.gray("uds tailwind-v4 --color-scheme light")}`);
+	require_print.print(`  ${require_colors.gray("uds tailwind-v4 --color-scheme dark")}`);
+}
+function makeTailwindV4ThemeCommand({ getConfig }) {
+	return {
+		name: "tailwind-v4",
+		description: "Generate Tailwind v4 @theme CSS (with optional @font-face declarations)",
+		run: async ({ options }) => {
+			if (isTruthyFlag(options.help) || isTruthyFlag(options.h)) {
+				showHelp();
+				return;
+			}
+			const outputPath = node_path.default.resolve(process.cwd(), String(options.out ?? "dist/uds-theme.css"));
+			await node_fs_promises.default.mkdir(node_path.default.dirname(outputPath), { recursive: true });
+			const tailwindOptions = {
+				disableOverrideTailwindTheme: parseDisableOverride(options["disable-override"]),
+				includeFontFace: !isTruthyFlag(options["skip-fonts"]),
+				colorScheme: parseColorScheme(options["color-scheme"]),
+				defaultColorMode: parseColorMode(options["default-color-mode"]),
+				lightModeClass: String(options["light-mode-class"] ?? "light"),
+				darkModeClass: String(options["dark-mode-class"] ?? "dark"),
+				systemModeClass: String(options["system-mode-class"] ?? "system")
+			};
+			const { css, warnings } = require_generateTheme_DkTgUwTM.generateThemeResult(await getConfig(), tailwindOptions);
+			await node_fs_promises.default.writeFile(outputPath, css, "utf8");
+			require_print.print(`✅ Generated Tailwind v4 theme CSS at ${require_colors.cyan(outputPath)}`);
+			if (warnings.length > 0) {
+				require_print.print(require_colors.yellow(`⚠ ${warnings.length} warnings encountered during theme generation:`));
+				for (const warning of warnings.slice(0, 10)) require_print.print(require_colors.yellow(`- ${warning.path}: ${warning.message}`));
+				if (warnings.length > 10) require_print.print(require_colors.yellow(`- ...and ${warnings.length - 10} more warnings.`));
+			}
+		}
+	};
+}
+//#endregion
+exports.makeTailwindV4ThemeCommand = makeTailwindV4ThemeCommand;