@yahoo/uds 3.108.2 → 3.109.0-beta.1

package/dist/tailwind/dist/css/generate.helpers.cjs

@@ -0,0 +1,112 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_utils = require('./utils.cjs');
+const require_plugin = require('../plugin.cjs');
+const require_optimizeCSS = require('../utils/optimizeCSS.cjs');
+const require_postcssPreserveVars = require('../utils/postcssPreserveVars.cjs');
+const require_postcss = require('./postcss.cjs');
+let node_path = require("node:path");
+node_path = require_runtime.__toESM(node_path);
+let postcss = require("postcss");
+postcss = require_runtime.__toESM(postcss);
+let autoprefixer = require("autoprefixer");
+autoprefixer = require_runtime.__toESM(autoprefixer);
+let postcss_prune_var = require("postcss-prune-var");
+postcss_prune_var = require_runtime.__toESM(postcss_prune_var);
+let postcss_scope = require("postcss-scope");
+postcss_scope = require_runtime.__toESM(postcss_scope);
+let tailwindcss = require("tailwindcss");
+tailwindcss = require_runtime.__toESM(tailwindcss);
+
+//#region ../tailwind/dist/css/generate.helpers.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
+const getCssFeatureFlags = (cssOptions) => {
+	const optimizationConfig = cssOptions?.optimization;
+	const shouldOptimize = optimizationConfig?.enabled !== false;
+	return {
+		enablePreflight: cssOptions?.preflight !== false,
+		enableFontFaceDeclarations: cssOptions?.fontFaceDeclarations !== false,
+		shouldOptimize,
+		shouldPruneVars: shouldOptimize && optimizationConfig?.pruneVars !== false
+	};
+};
+const getContentGlobs = (contentDir) => [node_path.default.join(contentDir, "**/*.{js,jsx,ts,tsx}")];
+const createTailwindPlugin = (options) => {
+	return (0, tailwindcss.default)({
+		content: getContentGlobs(options.contentDir),
+		safelist: options.safelist,
+		corePlugins: { preflight: options.enablePreflight },
+		plugins: [require_plugin.tailwindPlugin({
+			config: options.config,
+			disableFontFaceDeclarations: !options.enableFontFaceDeclarations,
+			ignorePluginSafelists: true
+		})]
+	});
+};
+const getPruneVarPlugins = (safeVarPrefixes) => {
+	if (safeVarPrefixes.length === 0) return [(0, postcss_prune_var.default)()];
+	return [
+		require_postcssPreserveVars.preserveVars({ preserve: safeVarPrefixes }),
+		(0, postcss_prune_var.default)(),
+		require_postcssPreserveVars.preserveVarsCleanup()
+	];
+};
+const buildPostcssPlugins = (options) => {
+	const plugins = [options.tailwindPlugin, (0, autoprefixer.default)()];
+	if (options.shouldPruneVars) plugins.push(...getPruneVarPlugins(options.safeVarPrefixes));
+	if (options.scopeClass) plugins.push((0, postcss_scope.default)(options.scopeClass));
+	return plugins;
+};
+const applyScopedColorModeFix = async (css, scopeClass) => {
+	if (!scopeClass) return css;
+	return (await (0, postcss.default)([require_postcss.fixScopedColorModeSelectorsPlugin(scopeClass)]).process(css, { from: void 0 })).css;
+};
+const optimizeGeneratedCss = async (options) => {
+	if (!options.shouldOptimize) return { css: options.css };
+	const optimizationOptions = {
+		removeUnusedFonts: options.optimizationConfig?.removeUnusedFonts,
+		removeEmptyRules: options.optimizationConfig?.removeEmptyRules,
+		aggregateDuplicateSelectors: options.optimizationConfig?.aggregateDuplicateSelectors,
+		referenceCss: options.referenceCss,
+		scopeClass: options.scopeClass
+	};
+	const optimized = await require_optimizeCSS.optimizeCSS(options.css, optimizationOptions);
+	return {
+		css: optimized.css,
+		optimizationStats: {
+			originalSize: optimized.stats.originalSize,
+			originalSizeGzip: optimized.stats.originalSizeGzip,
+			fontFacesRemoved: optimized.stats.fontFacesRemoved,
+			emptyRulesRemoved: optimized.stats.emptyRulesRemoved,
+			validationErrors: optimized.validation.errors
+		}
+	};
+};
+const printSimpleModeStats = (options) => {
+	const { print, magenta, cyan, yellow } = options;
+	print("");
+	print(`${magenta("Output:")} ${cyan(options.outputPath)}`);
+	print(`${magenta("Stats:")}`);
+	print(`   Files scanned: ${options.totalFilesScanned}`);
+	print(`   Classes: ${options.classCount}`);
+	print(`   Size: ${require_utils.formatBytes(options.sizeBytes)} (${require_utils.formatBytes(options.sizeGzipBytes)} gzipped)`);
+	const optimizationStats = options.optimizationStats;
+	if (optimizationStats) {
+		const savedBytesGzip = optimizationStats.originalSizeGzip - options.sizeGzipBytes;
+		if (savedBytesGzip > 0) print(`   Optimized: saved ${require_utils.formatBytes(savedBytesGzip)} gzip (${optimizationStats.fontFacesRemoved} unused @font-face, ${optimizationStats.emptyRulesRemoved} empty rules removed)`);
+		if (optimizationStats.validationErrors.length > 0) {
+			print(`   ${yellow("Validation warnings:")}`);
+			optimizationStats.validationErrors.forEach((error) => print(`      ${yellow("•")} ${error}`));
+		}
+	}
+	print(`   Time: ${options.duration}ms`);
+	if (options.scope) print(`   Scope: ${cyan(options.scope)}`);
+};
+
+//#endregion
+exports.applyScopedColorModeFix = applyScopedColorModeFix;
+exports.buildPostcssPlugins = buildPostcssPlugins;
+exports.createTailwindPlugin = createTailwindPlugin;
+exports.getCssFeatureFlags = getCssFeatureFlags;
+exports.optimizeGeneratedCss = optimizeGeneratedCss;
+exports.printSimpleModeStats = printSimpleModeStats;

package/dist/tailwind/dist/css/generate.helpers.js

@@ -0,0 +1,100 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { formatBytes } from "./utils.js";
+import { tailwindPlugin } from "../plugin.js";
+import { optimizeCSS } from "../utils/optimizeCSS.js";
+import { preserveVars, preserveVarsCleanup } from "../utils/postcssPreserveVars.js";
+import { fixScopedColorModeSelectorsPlugin } from "./postcss.js";
+import path from "node:path";
+import postcss from "postcss";
+import autoprefixer from "autoprefixer";
+import pruneVar from "postcss-prune-var";
+import postcssScope from "postcss-scope";
+import tailwindcss from "tailwindcss";
+
+//#region ../tailwind/dist/css/generate.helpers.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
+const getCssFeatureFlags = (cssOptions) => {
+	const optimizationConfig = cssOptions?.optimization;
+	const shouldOptimize = optimizationConfig?.enabled !== false;
+	return {
+		enablePreflight: cssOptions?.preflight !== false,
+		enableFontFaceDeclarations: cssOptions?.fontFaceDeclarations !== false,
+		shouldOptimize,
+		shouldPruneVars: shouldOptimize && optimizationConfig?.pruneVars !== false
+	};
+};
+const getContentGlobs = (contentDir) => [path.join(contentDir, "**/*.{js,jsx,ts,tsx}")];
+const createTailwindPlugin = (options) => {
+	return tailwindcss({
+		content: getContentGlobs(options.contentDir),
+		safelist: options.safelist,
+		corePlugins: { preflight: options.enablePreflight },
+		plugins: [tailwindPlugin({
+			config: options.config,
+			disableFontFaceDeclarations: !options.enableFontFaceDeclarations,
+			ignorePluginSafelists: true
+		})]
+	});
+};
+const getPruneVarPlugins = (safeVarPrefixes) => {
+	if (safeVarPrefixes.length === 0) return [pruneVar()];
+	return [
+		preserveVars({ preserve: safeVarPrefixes }),
+		pruneVar(),
+		preserveVarsCleanup()
+	];
+};
+const buildPostcssPlugins = (options) => {
+	const plugins = [options.tailwindPlugin, autoprefixer()];
+	if (options.shouldPruneVars) plugins.push(...getPruneVarPlugins(options.safeVarPrefixes));
+	if (options.scopeClass) plugins.push(postcssScope(options.scopeClass));
+	return plugins;
+};
+const applyScopedColorModeFix = async (css, scopeClass) => {
+	if (!scopeClass) return css;
+	return (await postcss([fixScopedColorModeSelectorsPlugin(scopeClass)]).process(css, { from: void 0 })).css;
+};
+const optimizeGeneratedCss = async (options) => {
+	if (!options.shouldOptimize) return { css: options.css };
+	const optimizationOptions = {
+		removeUnusedFonts: options.optimizationConfig?.removeUnusedFonts,
+		removeEmptyRules: options.optimizationConfig?.removeEmptyRules,
+		aggregateDuplicateSelectors: options.optimizationConfig?.aggregateDuplicateSelectors,
+		referenceCss: options.referenceCss,
+		scopeClass: options.scopeClass
+	};
+	const optimized = await optimizeCSS(options.css, optimizationOptions);
+	return {
+		css: optimized.css,
+		optimizationStats: {
+			originalSize: optimized.stats.originalSize,
+			originalSizeGzip: optimized.stats.originalSizeGzip,
+			fontFacesRemoved: optimized.stats.fontFacesRemoved,
+			emptyRulesRemoved: optimized.stats.emptyRulesRemoved,
+			validationErrors: optimized.validation.errors
+		}
+	};
+};
+const printSimpleModeStats = (options) => {
+	const { print, magenta, cyan, yellow } = options;
+	print("");
+	print(`${magenta("Output:")} ${cyan(options.outputPath)}`);
+	print(`${magenta("Stats:")}`);
+	print(`   Files scanned: ${options.totalFilesScanned}`);
+	print(`   Classes: ${options.classCount}`);
+	print(`   Size: ${formatBytes(options.sizeBytes)} (${formatBytes(options.sizeGzipBytes)} gzipped)`);
+	const optimizationStats = options.optimizationStats;
+	if (optimizationStats) {
+		const savedBytesGzip = optimizationStats.originalSizeGzip - options.sizeGzipBytes;
+		if (savedBytesGzip > 0) print(`   Optimized: saved ${formatBytes(savedBytesGzip)} gzip (${optimizationStats.fontFacesRemoved} unused @font-face, ${optimizationStats.emptyRulesRemoved} empty rules removed)`);
+		if (optimizationStats.validationErrors.length > 0) {
+			print(`   ${yellow("Validation warnings:")}`);
+			optimizationStats.validationErrors.forEach((error) => print(`      ${yellow("•")} ${error}`));
+		}
+	}
+	print(`   Time: ${options.duration}ms`);
+	if (options.scope) print(`   Scope: ${cyan(options.scope)}`);
+};
+
+//#endregion
+export { applyScopedColorModeFix, buildPostcssPlugins, createTailwindPlugin, getCssFeatureFlags, optimizeGeneratedCss, printSimpleModeStats };

package/dist/tailwind/dist/css/generate.js

@@ -0,0 +1,111 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { defaultTokensConfig } from "../../../config/dist/index.js";
+import { cyan, magenta, yellow } from "../../../cli/dist/lib/colors.js";
+import { print } from "../../../cli/dist/lib/print.js";
+import { spinStop } from "../../../cli/dist/lib/spinner.js";
+import { extractVariantDefaults, getConfigurableCssVariables, getMotionVarPrefixes, loadConfigFile, scanDirectoryForSafelist } from "./utils.js";
+import { deduplicateSafelist, getThemeAndScaleClasses } from "../purger/optimized/utils/safelist.js";
+import { applyScopedColorModeFix, buildPostcssPlugins, createTailwindPlugin, getCssFeatureFlags, optimizeGeneratedCss, printSimpleModeStats } from "./generate.helpers.js";
+import fs from "node:fs";
+import path from "node:path";
+import { gzipSync } from "node:zlib";
+import postcss from "postcss";
+
+//#region ../tailwind/dist/css/generate.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
+/**
+* Generate CSS from a safelist using Tailwind + PostCSS
+* @param safelist - UDS component classes to include
+* @param config - Token configuration
+* @param options - Additional options
+*/
+const generateCSS = async (safelist, config, options) => {
+	const sourceCSS = "@tailwind base; @tailwind components; @tailwind utilities";
+	const contentDir = options?.contentDir ?? path.join(process.cwd(), "src");
+	const cssFlags = getCssFeatureFlags(options?.cssOptions);
+	const optimizationConfig = options?.cssOptions?.optimization;
+	const scopeClass = options?.scope?.trim();
+	let css = await applyScopedColorModeFix((await postcss(buildPostcssPlugins({
+		tailwindPlugin: createTailwindPlugin({
+			contentDir,
+			safelist,
+			config,
+			enablePreflight: cssFlags.enablePreflight,
+			enableFontFaceDeclarations: cssFlags.enableFontFaceDeclarations
+		}),
+		shouldPruneVars: cssFlags.shouldPruneVars,
+		safeVarPrefixes: options?.safeVarPrefixes ?? [],
+		scopeClass
+	})).process(sourceCSS, { from: void 0 })).css, scopeClass);
+	const optimizedCss = await optimizeGeneratedCss({
+		css,
+		shouldOptimize: cssFlags.shouldOptimize,
+		optimizationConfig,
+		referenceCss: options?.referenceCss,
+		scopeClass
+	});
+	css = optimizedCss.css;
+	const sizeBytes = Buffer.byteLength(css, "utf8");
+	const sizeGzipBytes = gzipSync(css).length;
+	return {
+		css,
+		sizeBytes,
+		sizeGzipBytes,
+		classCount: safelist.length,
+		optimizationStats: optimizedCss.optimizationStats
+	};
+};
+/**
+* Generate CSS in simple mode (no uds.theme.ts)
+*/
+const generateSimpleModeCSS = async (options) => {
+	const isWatch = options.isWatch === true;
+	const shouldLogStats = !(options.silent === true) && !isWatch;
+	const startTime = performance.now();
+	const colorModes = ["dark"];
+	let tokensConfig = defaultTokensConfig;
+	if (options.configPath) {
+		const loadedConfig = await loadConfigFile(options.configPath);
+		if (loadedConfig) tokensConfig = loadedConfig;
+		else if (shouldLogStats) spinStop("⚠️", `Config file not found: ${options.configPath}, using defaults`);
+	}
+	const variantDefaults = extractVariantDefaults(tokensConfig);
+	const entryDir = path.join(options.workspaceDir, options.entry);
+	const scanResult = await scanDirectoryForSafelist(entryDir, colorModes, options.variants, options.autoVariants, options.componentData, variantDefaults);
+	const totalFilesScanned = scanResult.filesScanned;
+	const allClasses = [...scanResult.safelist];
+	const allComponents = new Set(scanResult.components);
+	const packageDirs = [entryDir];
+	const cssResult = await generateCSS(deduplicateSafelist([...allClasses, ...getThemeAndScaleClasses(colorModes)]), tokensConfig, {
+		scope: options.scope,
+		contentDir: entryDir,
+		safeVarPrefixes: [...getMotionVarPrefixes(options.componentData, [...allComponents]), ...getConfigurableCssVariables()]
+	});
+	const outputDir = path.join(options.workspaceDir, options.output);
+	if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir, { recursive: true });
+	const outputPath = path.join(outputDir, "uds.css");
+	fs.writeFileSync(outputPath, cssResult.css);
+	const duration = Math.round(performance.now() - startTime);
+	if (shouldLogStats) printSimpleModeStats({
+		outputPath,
+		totalFilesScanned,
+		classCount: cssResult.classCount,
+		sizeBytes: cssResult.sizeBytes,
+		sizeGzipBytes: cssResult.sizeGzipBytes,
+		duration,
+		scope: options.scope,
+		optimizationStats: cssResult.optimizationStats,
+		print,
+		magenta,
+		cyan,
+		yellow
+	});
+	return {
+		success: true,
+		outputPath,
+		packageDirs
+	};
+};
+
+//#endregion
+export { generateCSS, generateSimpleModeCSS };

package/dist/tailwind/dist/css/postcss.cjs

@@ -0,0 +1,35 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+const require_postcss_helpers = require('./postcss.helpers.cjs');
+
+//#region ../tailwind/dist/css/postcss.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
+/**
+* PostCSS plugin to fix color mode selectors for scoped CSS.
+*
+* postcss-scope converts selectors like:
+*   `.uds-color-mode-dark .foo` → `.scope .uds-color-mode-dark .foo`
+*
+* But the color mode class is typically on <html> or <body>, which is an
+* ANCESTOR of the scope, not a descendant. This plugin adds alternative
+* selectors so color modes work correctly:
+*
+*   `.scope .uds-color-mode-dark .foo` → `.scope .uds-color-mode-dark .foo, .uds-color-mode-dark .scope .foo`
+*
+* This ensures styles apply whether the color mode class is inside or outside the scope.
+*/
+const fixScopedColorModeSelectorsPlugin = (scopeClass) => {
+	const colorModePattern = /\.(uds-color-mode-(?:dark|light))/;
+	return {
+		postcssPlugin: "fix-scoped-color-mode-selectors",
+		Once(root) {
+			root.walkRules((rule) => {
+				if (!rule.selector.includes(scopeClass) || !colorModePattern.test(rule.selector)) return;
+				const nextSelector = require_postcss_helpers.buildScopedColorModeSelectorList(rule.selector, scopeClass);
+				if (nextSelector !== rule.selector) rule.selector = nextSelector;
+			});
+		}
+	};
+};
+
+//#endregion
+exports.fixScopedColorModeSelectorsPlugin = fixScopedColorModeSelectorsPlugin;

package/dist/tailwind/dist/css/postcss.helpers.cjs

@@ -0,0 +1,27 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+
+//#region ../tailwind/dist/css/postcss.helpers.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
+const COLOR_MODE_RE = /^(\.(uds-color-mode-(?:dark|light)))(\s+.+)?$/;
+const escapeForRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const getScopedColorModeAlternativeSelector = (selector, scopeClass) => {
+	const scopeMatch = selector.match(new RegExp(`^(${escapeForRegExp(scopeClass)})\\s+(.+)$`));
+	if (!scopeMatch) return null;
+	const colorModeMatch = scopeMatch[2].match(COLOR_MODE_RE);
+	if (!colorModeMatch) return null;
+	return `${colorModeMatch[1]} ${scopeClass}${colorModeMatch[3] ?? ""}`;
+};
+const buildScopedColorModeSelectorList = (ruleSelector, scopeClass) => {
+	const selectors = ruleSelector.split(",").map((value) => value.trim());
+	return selectors.reduce((acc, selector) => {
+		const altSelector = getScopedColorModeAlternativeSelector(selector, scopeClass);
+		return altSelector && !selectors.includes(altSelector) && !acc.includes(altSelector) ? [
+			...acc,
+			selector,
+			altSelector
+		] : [...acc, selector];
+	}, []).join(", ");
+};
+
+//#endregion
+exports.buildScopedColorModeSelectorList = buildScopedColorModeSelectorList;

package/dist/tailwind/dist/css/postcss.helpers.js

@@ -0,0 +1,26 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+//#region ../tailwind/dist/css/postcss.helpers.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
+const COLOR_MODE_RE = /^(\.(uds-color-mode-(?:dark|light)))(\s+.+)?$/;
+const escapeForRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const getScopedColorModeAlternativeSelector = (selector, scopeClass) => {
+	const scopeMatch = selector.match(new RegExp(`^(${escapeForRegExp(scopeClass)})\\s+(.+)$`));
+	if (!scopeMatch) return null;
+	const colorModeMatch = scopeMatch[2].match(COLOR_MODE_RE);
+	if (!colorModeMatch) return null;
+	return `${colorModeMatch[1]} ${scopeClass}${colorModeMatch[3] ?? ""}`;
+};
+const buildScopedColorModeSelectorList = (ruleSelector, scopeClass) => {
+	const selectors = ruleSelector.split(",").map((value) => value.trim());
+	return selectors.reduce((acc, selector) => {
+		const altSelector = getScopedColorModeAlternativeSelector(selector, scopeClass);
+		return altSelector && !selectors.includes(altSelector) && !acc.includes(altSelector) ? [
+			...acc,
+			selector,
+			altSelector
+		] : [...acc, selector];
+	}, []).join(", ");
+};
+
+//#endregion
+export { buildScopedColorModeSelectorList };

package/dist/tailwind/dist/css/postcss.js

@@ -0,0 +1,35 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { buildScopedColorModeSelectorList } from "./postcss.helpers.js";
+
+//#region ../tailwind/dist/css/postcss.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
+/**
+* PostCSS plugin to fix color mode selectors for scoped CSS.
+*
+* postcss-scope converts selectors like:
+*   `.uds-color-mode-dark .foo` → `.scope .uds-color-mode-dark .foo`
+*
+* But the color mode class is typically on <html> or <body>, which is an
+* ANCESTOR of the scope, not a descendant. This plugin adds alternative
+* selectors so color modes work correctly:
+*
+*   `.scope .uds-color-mode-dark .foo` → `.scope .uds-color-mode-dark .foo, .uds-color-mode-dark .scope .foo`
+*
+* This ensures styles apply whether the color mode class is inside or outside the scope.
+*/
+const fixScopedColorModeSelectorsPlugin = (scopeClass) => {
+	const colorModePattern = /\.(uds-color-mode-(?:dark|light))/;
+	return {
+		postcssPlugin: "fix-scoped-color-mode-selectors",
+		Once(root) {
+			root.walkRules((rule) => {
+				if (!rule.selector.includes(scopeClass) || !colorModePattern.test(rule.selector)) return;
+				const nextSelector = buildScopedColorModeSelectorList(rule.selector, scopeClass);
+				if (nextSelector !== rule.selector) rule.selector = nextSelector;
+			});
+		}
+	};
+};
+
+//#endregion
+export { fixScopedColorModeSelectorsPlugin };