@yahoo/uds 3.113.0 → 3.114.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (104) hide show
  1. package/dist/automated-config/dist/mapTextVariantFixtureToValue.cjs +12 -1
  2. package/dist/automated-config/dist/mapTextVariantFixtureToValue.js +12 -1
  3. package/dist/automated-config/dist/properties.cjs +1 -1
  4. package/dist/automated-config/dist/properties.js +1 -1
  5. package/dist/automated-config/dist/utils/getConfigVariantProperties.d.cts +2 -2
  6. package/dist/automated-config/dist/utils/getConfigVariantProperties.d.ts +2 -2
  7. package/dist/cli/commands/sync.cjs +1 -3
  8. package/dist/cli/commands/sync.d.cts +1 -1
  9. package/dist/cli/commands/sync.d.ts +1 -1
  10. package/dist/cli/commands/sync.js +1 -3
  11. package/dist/cli/commands/version.cjs +0 -2
  12. package/dist/cli/commands/version.d.cts +1 -1
  13. package/dist/cli/commands/version.d.ts +1 -1
  14. package/dist/cli/commands/version.js +0 -2
  15. package/dist/cli/dist/cli.cjs +1 -1
  16. package/dist/cli/dist/cli.js +1 -1
  17. package/dist/cli/dist/commands/editor-rules.cjs +2 -2
  18. package/dist/cli/dist/commands/editor-rules.js +2 -2
  19. package/dist/cli/dist/lib/logger.cjs +66 -0
  20. package/dist/cli/dist/lib/logger.js +66 -0
  21. package/dist/cli/dist/utils/rules/config.cjs +1 -1
  22. package/dist/cli/dist/utils/rules/config.js +1 -1
  23. package/dist/cli/runner.cjs +11 -2
  24. package/dist/cli/runner.js +11 -2
  25. package/dist/components/client/Menu/Menu.ItemCheckbox.d.cts +1 -1
  26. package/dist/components/client/Menu/Menu.ItemCheckbox.d.ts +1 -1
  27. package/dist/index.cjs +2 -0
  28. package/dist/index.d.cts +3 -1
  29. package/dist/index.d.ts +3 -1
  30. package/dist/index.js +2 -1
  31. package/dist/styles/styler.d.cts +41 -41
  32. package/dist/styles/styler.d.ts +41 -41
  33. package/dist/styles/variants.cjs +278 -278
  34. package/dist/styles/variants.js +278 -278
  35. package/dist/tailwind/dist/commands/css.cjs +79 -0
  36. package/dist/tailwind/dist/commands/css.d.ts +3 -0
  37. package/dist/tailwind/dist/commands/css.helpers.cjs +32 -0
  38. package/dist/tailwind/dist/commands/css.helpers.js +28 -0
  39. package/dist/tailwind/dist/commands/css.js +79 -0
  40. package/dist/tailwind/dist/commands/generateComponentData.cjs +33 -31
  41. package/dist/tailwind/dist/commands/generateComponentData.d.ts +1 -1
  42. package/dist/tailwind/dist/commands/generateComponentData.js +33 -31
  43. package/dist/tailwind/dist/commands/generatePurgeCSSData.d.ts +1 -1
  44. package/dist/tailwind/dist/commands/purge.cjs +3 -4
  45. package/dist/tailwind/dist/commands/purge.d.ts +1 -1
  46. package/dist/tailwind/dist/commands/purge.js +3 -4
  47. package/dist/tailwind/dist/css/generate.cjs +120 -0
  48. package/dist/tailwind/dist/css/generate.d.cts +30 -0
  49. package/dist/tailwind/dist/css/generate.d.ts +31 -0
  50. package/dist/tailwind/dist/css/generate.helpers.cjs +112 -0
  51. package/dist/tailwind/dist/css/generate.helpers.js +100 -0
  52. package/dist/tailwind/dist/css/generate.js +115 -0
  53. package/dist/tailwind/dist/css/postcss.cjs +35 -0
  54. package/dist/tailwind/dist/css/postcss.helpers.cjs +27 -0
  55. package/dist/tailwind/dist/css/postcss.helpers.js +26 -0
  56. package/dist/tailwind/dist/css/postcss.js +35 -0
  57. package/dist/tailwind/dist/css/runner.cjs +278 -0
  58. package/dist/tailwind/dist/css/runner.helpers.cjs +26 -0
  59. package/dist/tailwind/dist/css/runner.helpers.js +23 -0
  60. package/dist/tailwind/dist/css/runner.js +275 -0
  61. package/dist/tailwind/dist/css/theme.cjs +12 -0
  62. package/dist/tailwind/dist/css/theme.d.cts +66 -0
  63. package/dist/tailwind/dist/css/theme.d.ts +66 -0
  64. package/dist/tailwind/dist/css/theme.js +11 -0
  65. package/dist/tailwind/dist/css/utils.cjs +234 -0
  66. package/dist/tailwind/dist/css/utils.js +223 -0
  67. package/dist/tailwind/dist/index.d.cts +1 -0
  68. package/dist/tailwind/dist/index.d.ts +5 -3
  69. package/dist/tailwind/dist/purger/legacy/purgeCSS.cjs +4 -3
  70. package/dist/tailwind/dist/purger/legacy/purgeCSS.js +4 -3
  71. package/dist/tailwind/dist/purger/optimized/ast/expressions.cjs +122 -125
  72. package/dist/tailwind/dist/purger/optimized/ast/expressions.js +122 -125
  73. package/dist/tailwind/dist/purger/optimized/ast/jsx.cjs +1 -8
  74. package/dist/tailwind/dist/purger/optimized/ast/jsx.js +1 -8
  75. package/dist/tailwind/dist/purger/optimized/purge.cjs +11 -10
  76. package/dist/tailwind/dist/purger/optimized/purge.js +10 -9
  77. package/dist/tailwind/dist/purger/optimized/purgeFromCode.cjs +232 -127
  78. package/dist/tailwind/dist/purger/optimized/purgeFromCode.js +232 -127
  79. package/dist/tailwind/dist/purger/optimized/utils/componentAnalyzer.cjs +330 -262
  80. package/dist/tailwind/dist/purger/optimized/utils/componentAnalyzer.js +329 -262
  81. package/dist/tailwind/dist/purger/optimized/utils/files.cjs +4 -3
  82. package/dist/tailwind/dist/purger/optimized/utils/files.js +4 -3
  83. package/dist/tailwind/dist/purger/optimized/utils/safelist.cjs +13 -21
  84. package/dist/tailwind/dist/purger/optimized/utils/safelist.js +13 -21
  85. package/dist/tailwind/dist/tailwind/plugins/typography.cjs +41 -13
  86. package/dist/tailwind/dist/tailwind/plugins/typography.js +41 -13
  87. package/dist/tailwind/dist/tailwind/utils/composeTailwindPlugins.cjs +4 -2
  88. package/dist/tailwind/dist/tailwind/utils/composeTailwindPlugins.d.cts +10 -1
  89. package/dist/tailwind/dist/tailwind/utils/composeTailwindPlugins.d.ts +10 -1
  90. package/dist/tailwind/dist/tailwind/utils/composeTailwindPlugins.js +4 -2
  91. package/dist/tailwind/dist/tailwind/utils/getFontStyles.d.cts +1 -1
  92. package/dist/tailwind/dist/tailwind/utils/getFontStyles.d.ts +1 -1
  93. package/dist/tailwind/dist/utils/optimizeCSS.cjs +405 -0
  94. package/dist/tailwind/dist/utils/optimizeCSS.js +403 -0
  95. package/dist/tailwind/dist/utils/postcssPreserveVars.cjs +67 -0
  96. package/dist/tailwind/dist/utils/postcssPreserveVars.js +65 -0
  97. package/dist/tailwind/dist/utils/tsMorph.cjs +1 -1
  98. package/dist/uds/generated/componentData.cjs +943 -928
  99. package/dist/uds/generated/componentData.js +943 -928
  100. package/dist/uds/package.cjs +10 -4
  101. package/dist/uds/package.js +10 -4
  102. package/generated/componentData.json +2397 -0
  103. package/generated/tailwindPurge.ts +4560 -0
  104. package/package.json +7 -4
@@ -10,18 +10,19 @@ fast_glob = require_runtime.__toESM(fast_glob);
10
10
  /**
11
11
  * Scan a directory for JSX/TSX files
12
12
  */
13
- async function scanForFiles(entry) {
13
+ const scanForFiles = async (entry) => {
14
14
  const workspaceDir = process.env.PWD ?? process.cwd();
15
15
  const srcDir = node_path.default.join(workspaceDir, entry);
16
16
  try {
17
17
  return await (0, fast_glob.default)("**/*.{jsx,tsx}", {
18
18
  cwd: srcDir,
19
- absolute: true
19
+ absolute: true,
20
+ ignore: ["**/node_modules/**"]
20
21
  });
21
22
  } catch {
22
23
  throw new Error(`Couldn't find the entry directory: ${entry}. Please make sure it exists.`);
23
24
  }
24
- }
25
+ };
25
26
 
26
27
  //#endregion
27
28
  exports.scanForFiles = scanForFiles;
@@ -7,18 +7,19 @@ import fg from "fast-glob";
7
7
  /**
8
8
  * Scan a directory for JSX/TSX files
9
9
  */
10
- async function scanForFiles(entry) {
10
+ const scanForFiles = async (entry) => {
11
11
  const workspaceDir = process.env.PWD ?? process.cwd();
12
12
  const srcDir = path.join(workspaceDir, entry);
13
13
  try {
14
14
  return await fg("**/*.{jsx,tsx}", {
15
15
  cwd: srcDir,
16
- absolute: true
16
+ absolute: true,
17
+ ignore: ["**/node_modules/**"]
17
18
  });
18
19
  } catch {
19
20
  throw new Error(`Couldn't find the entry directory: ${entry}. Please make sure it exists.`);
20
21
  }
21
- }
22
+ };
22
23
 
23
24
  //#endregion
24
25
  export { scanForFiles };
@@ -1,9 +1,9 @@
1
1
  /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
2
  const require_runtime = require('../../../../../_virtual/_rolldown/runtime.cjs');
3
3
  const require_index = require('../../../../../css-tokens/dist/index.cjs');
4
+ let node_fs = require("node:fs");
4
5
  let node_path = require("node:path");
5
6
  node_path = require_runtime.__toESM(node_path);
6
- let node_fs = require("node:fs");
7
7
 
8
8
  //#region ../tailwind/dist/purger/optimized/utils/safelist.js
9
9
  /*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
@@ -14,40 +14,32 @@ const colorModeToClass = {
14
14
  /**
15
15
  * Deduplicate and clean a safelist
16
16
  */
17
- function deduplicateSafelist(safelist) {
18
- const set = /* @__PURE__ */ new Set();
19
- for (const cls of safelist) {
20
- const cleaned = cls.replaceAll("\\", "").trim();
21
- if (cleaned && isValidClassName(cleaned)) set.add(cleaned);
22
- }
23
- return Array.from(set);
24
- }
17
+ const deduplicateSafelist = (safelist) => {
18
+ const deduped = safelist.map((cls) => cls.replaceAll("\\", "").trim()).filter((cleaned) => cleaned && isValidClassName(cleaned));
19
+ return Array.from(new Set(deduped));
20
+ };
25
21
  /**
26
22
  * Check if a class name is valid (not malformed from CSS escape sequences)
27
23
  */
28
- function isValidClassName(cls) {
24
+ const isValidClassName = (cls) => {
29
25
  if (cls.match(/^[0-9]/)) return false;
30
26
  if (cls.match(/[0-9][a-z]$/)) return false;
31
27
  if (cls.includes("2c")) return false;
32
- if (cls.includes("0.")) return false;
33
28
  return true;
34
- }
29
+ };
35
30
  /**
36
31
  * Get classes for enabled color modes.
37
32
  * Note: Light mode is not included by default since :root already defines light mode styles.
38
33
  * Only dark mode class is needed to enable dark mode switching.
39
34
  */
40
- function getThemeAndScaleClasses(colorModes) {
41
- const classes = [];
42
- if (colorModes && colorModes.length > 0) {
43
- for (const mode of colorModes) if (colorModeToClass[mode]) classes.push(colorModeToClass[mode]);
44
- } else classes.push(colorModeToClass.dark);
45
- return classes;
46
- }
35
+ const getThemeAndScaleClasses = (colorModes) => {
36
+ if (!colorModes || colorModes.length === 0) return [colorModeToClass.dark];
37
+ return colorModes.map((mode) => colorModeToClass[mode]).filter((className) => Boolean(className));
38
+ };
47
39
  /**
48
40
  * Save safelist to a file
49
41
  */
50
- async function saveSafelistToFile(safelist, outputPath) {
42
+ const saveSafelistToFile = async (safelist, outputPath) => {
51
43
  const content = `
52
44
  //! This file is generated by the optimized purger from @yahoo/uds
53
45
  //! Do not edit directly
@@ -56,7 +48,7 @@ export const safelist = ${JSON.stringify(safelist)};
56
48
  `;
57
49
  (0, node_fs.mkdirSync)(node_path.default.dirname(outputPath), { recursive: true });
58
50
  (0, node_fs.writeFileSync)(outputPath, content);
59
- }
51
+ };
60
52
 
61
53
  //#endregion
62
54
  exports.deduplicateSafelist = deduplicateSafelist;
@@ -1,7 +1,7 @@
1
1
  /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
2
  import { DARK_COLOR_MODE_CLASSNAME, LIGHT_COLOR_MODE_CLASSNAME } from "../../../../../css-tokens/dist/index.js";
3
- import path from "node:path";
4
3
  import { mkdirSync, writeFileSync } from "node:fs";
4
+ import path from "node:path";
5
5
 
6
6
  //#region ../tailwind/dist/purger/optimized/utils/safelist.js
7
7
  /*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
@@ -12,40 +12,32 @@ const colorModeToClass = {
12
12
  /**
13
13
  * Deduplicate and clean a safelist
14
14
  */
15
- function deduplicateSafelist(safelist) {
16
- const set = /* @__PURE__ */ new Set();
17
- for (const cls of safelist) {
18
- const cleaned = cls.replaceAll("\\", "").trim();
19
- if (cleaned && isValidClassName(cleaned)) set.add(cleaned);
20
- }
21
- return Array.from(set);
22
- }
15
+ const deduplicateSafelist = (safelist) => {
16
+ const deduped = safelist.map((cls) => cls.replaceAll("\\", "").trim()).filter((cleaned) => cleaned && isValidClassName(cleaned));
17
+ return Array.from(new Set(deduped));
18
+ };
23
19
  /**
24
20
  * Check if a class name is valid (not malformed from CSS escape sequences)
25
21
  */
26
- function isValidClassName(cls) {
22
+ const isValidClassName = (cls) => {
27
23
  if (cls.match(/^[0-9]/)) return false;
28
24
  if (cls.match(/[0-9][a-z]$/)) return false;
29
25
  if (cls.includes("2c")) return false;
30
- if (cls.includes("0.")) return false;
31
26
  return true;
32
- }
27
+ };
33
28
  /**
34
29
  * Get classes for enabled color modes.
35
30
  * Note: Light mode is not included by default since :root already defines light mode styles.
36
31
  * Only dark mode class is needed to enable dark mode switching.
37
32
  */
38
- function getThemeAndScaleClasses(colorModes) {
39
- const classes = [];
40
- if (colorModes && colorModes.length > 0) {
41
- for (const mode of colorModes) if (colorModeToClass[mode]) classes.push(colorModeToClass[mode]);
42
- } else classes.push(colorModeToClass.dark);
43
- return classes;
44
- }
33
+ const getThemeAndScaleClasses = (colorModes) => {
34
+ if (!colorModes || colorModes.length === 0) return [colorModeToClass.dark];
35
+ return colorModes.map((mode) => colorModeToClass[mode]).filter((className) => Boolean(className));
36
+ };
45
37
  /**
46
38
  * Save safelist to a file
47
39
  */
48
- async function saveSafelistToFile(safelist, outputPath) {
40
+ const saveSafelistToFile = async (safelist, outputPath) => {
49
41
  const content = `
50
42
  //! This file is generated by the optimized purger from @yahoo/uds
51
43
  //! Do not edit directly
@@ -54,7 +46,7 @@ export const safelist = ${JSON.stringify(safelist)};
54
46
  `;
55
47
  mkdirSync(path.dirname(outputPath), { recursive: true });
56
48
  writeFileSync(outputPath, content);
57
- }
49
+ };
58
50
 
59
51
  //#endregion
60
52
  export { deduplicateSafelist, getThemeAndScaleClasses, saveSafelistToFile };
@@ -16,6 +16,14 @@ tailwindcss_plugin_js = require_runtime.__toESM(tailwindcss_plugin_js);
16
16
 
17
17
  //#region ../tailwind/dist/tailwind/plugins/typography.js
18
18
  /*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
19
+ const UDS_FONT_FAMILY_THEME_KEY = "udsFontFamily";
20
+ const UDS_FONT_SIZE_THEME_KEY = "udsFontSize";
21
+ const UDS_FONT_WEIGHT_THEME_KEY = "udsFontWeight";
22
+ const UDS_FONT_SLANT_THEME_KEY = "udsFontSlant";
23
+ const UDS_LINE_HEIGHT_THEME_KEY = "udsLineHeight";
24
+ const UDS_LETTER_SPACING_THEME_KEY = "udsLetterSpacing";
25
+ const UDS_TEXT_TRANSFORM_THEME_KEY = "udsTextTransform";
26
+ const UDS_FONT_WIDTH_THEME_KEY = "udsFontWidth";
19
27
  /** @deprecated Descriptive font weights vary based on font, so this is not correct for each font we support
20
28
  * This is used as a baseline for using native font weights in the system IE. <Text fontWeight="bold" />
21
29
  */
@@ -30,7 +38,8 @@ const fontWeightMap = {
30
38
  extrabold: "800",
31
39
  black: "900"
32
40
  };
33
- const typographyPlugin = tailwindcss_plugin_js.default.withOptions(({ config, disableFontFaceDeclarations = false }) => (api) => {
41
+ const typographyPlugin = tailwindcss_plugin_js.default.withOptions(({ config, disableOverrideTailwindTheme, disableFontFaceDeclarations = false }) => (api) => {
42
+ const shouldMergeTypographyTokensIntoTailwindTheme = !require_composeTailwindPlugins.shouldNotMergeTokensIntoTailwindTheme(disableOverrideTailwindTheme, "typography");
34
43
  const { addBase, addUtilities, addComponents, matchUtilities, theme } = api;
35
44
  const fontIds = Object.values(config.font);
36
45
  if (disableFontFaceDeclarations === false) require_addFontFaceDeclarations.addFontFaceDeclarations(fontIds, api);
@@ -38,8 +47,7 @@ const typographyPlugin = tailwindcss_plugin_js.default.withOptions(({ config, di
38
47
  addBase(require_getResponsiveTextStyles.getBaseTextVars(config));
39
48
  addBase(require_getGroupedTextStyles.getGroupedTextStyles());
40
49
  if ((config.globalDefaults.enableResponsiveType ?? false) && config.typography && config.breakpoints) addComponents(require_getResponsiveTextStyles.getResponsiveTextStyles(config));
41
- matchUtilities({ case: (value) => ({ "text-transform": value }) }, { values: theme("typography.textTransform") });
42
- const namedFontWeightsFromPlugin = theme("typography.fontWeight") || {};
50
+ const namedFontWeightsFromPlugin = theme("udsFontWeight") || {};
43
51
  const fontWeightsWithDescriptives = {
44
52
  ...fontWeightMap,
45
53
  ...namedFontWeightsFromPlugin
@@ -48,19 +56,28 @@ const typographyPlugin = tailwindcss_plugin_js.default.withOptions(({ config, di
48
56
  const styles = {};
49
57
  if (require_index.textVariants.map(require_getResponsiveTextStyles.textVariantsSafe).includes(fontWeight)) {
50
58
  const textVariant = fontWeight;
51
- const slantValue = theme(`typography.fontSlant.${textVariant}`);
52
- const widthValue = theme(`typography.fontWidth.${textVariant}`);
59
+ const slantValue = theme(`udsFontSlant.${textVariant}`);
60
+ const widthValue = theme(`udsFontWidth.${textVariant}`);
53
61
  styles["font-weight"] = value;
54
62
  styles["font-variation-settings"] = `"wght" ${value}, "slnt" ${slantValue}, "ital" ${slantValue}, "wdth" ${widthValue}`;
55
63
  const bolderStyles = { "font-variation-settings": "normal" };
56
64
  styles["b"] = bolderStyles;
57
65
  styles["strong"] = bolderStyles;
58
66
  } else styles["font-weight"] = value;
59
- addUtilities({ [`.font-weight-${fontWeight}`]: styles });
67
+ if (shouldMergeTypographyTokensIntoTailwindTheme) addUtilities({ [`.font-weight-${fontWeight}`]: styles });
68
+ addUtilities({ [`.uds-font-weight-${fontWeight}`]: styles });
60
69
  });
61
- matchUtilities({ "font-size": (value) => ({ "font-size": value }) }, { values: theme("typography.fontSize") });
70
+ if (shouldMergeTypographyTokensIntoTailwindTheme) matchUtilities({ "font-size": (value) => ({ "font-size": value }) }, { values: theme(UDS_FONT_SIZE_THEME_KEY) });
71
+ matchUtilities({ "uds-font-size": (value) => ({ "font-size": value }) }, { values: theme(UDS_FONT_SIZE_THEME_KEY) });
72
+ matchUtilities({ "uds-font-family": (value) => ({ "font-family": value }) }, { values: theme(UDS_FONT_FAMILY_THEME_KEY) });
73
+ matchUtilities({ "uds-line-height": (value) => ({ "line-height": value }) }, { values: theme(UDS_LINE_HEIGHT_THEME_KEY) });
74
+ matchUtilities({ "uds-letter-spacing": (value) => ({ "letter-spacing": value }) }, { values: theme(UDS_LETTER_SPACING_THEME_KEY) });
75
+ if (shouldMergeTypographyTokensIntoTailwindTheme) matchUtilities({ case: (value) => ({ "text-transform": value }) }, { values: theme(UDS_TEXT_TRANSFORM_THEME_KEY) });
76
+ matchUtilities({ "uds-text-transform": (value) => {
77
+ return { "text-transform": value };
78
+ } }, { values: theme(UDS_TEXT_TRANSFORM_THEME_KEY) });
62
79
  }, ({ disableOverrideTailwindTheme }) => {
63
- const shouldNotMergeFontSizeTokensIntoTailwindTheme = require_composeTailwindPlugins.shouldNotMergeTokensIntoTailwindTheme(disableOverrideTailwindTheme, "textSize");
80
+ const shouldNotMergeTypographyTokensIntoTailwindTheme = require_composeTailwindPlugins.shouldNotMergeTokensIntoTailwindTheme(disableOverrideTailwindTheme, "typography");
64
81
  /**
65
82
  * Reassign Tailwind's font size aliases to UDS's font size aliases
66
83
  * This makes it so UDS configs can power both Tailwind and UDS components
@@ -70,14 +87,25 @@ const typographyPlugin = tailwindcss_plugin_js.default.withOptions(({ config, di
70
87
  }));
71
88
  const textClasses = require_index.textVariants.map((variant) => `uds-text-${require_getResponsiveTextStyles.textVariantsSafe(variant)}`);
72
89
  const responsiveTextClasses = [require_index$1.TEXT_RESPONSIVE_CLASSNAME, ...Object.keys(require_index$1.TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES).map((variant) => require_index$1.TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES[variant])];
90
+ const fontFamily = require_getFontFamilyTheme.getFontFamilyTheme();
91
+ const { lineHeight, letterSpacing, fontSize, textTransform, fontWeight, fontSlant, fontWidth } = require_getResponsiveTextStyles.RESPONSIVE_TAILWIND_CONFIG_MAP;
73
92
  return {
74
93
  safelist: [...textClasses, ...responsiveTextClasses],
75
94
  theme: { extend: {
76
- fontFamily: require_getFontFamilyTheme.getFontFamilyTheme(),
77
- ...shouldNotMergeFontSizeTokensIntoTailwindTheme ? {} : { fontSize: tailwindFontSize },
78
- lineHeight: require_getResponsiveTextStyles.RESPONSIVE_TAILWIND_CONFIG_MAP.lineHeight,
79
- letterSpacing: require_getResponsiveTextStyles.RESPONSIVE_TAILWIND_CONFIG_MAP.letterSpacing,
80
- typography: require_getResponsiveTextStyles.RESPONSIVE_TAILWIND_CONFIG_MAP
95
+ ...shouldNotMergeTypographyTokensIntoTailwindTheme ? {} : {
96
+ fontFamily,
97
+ fontSize: tailwindFontSize,
98
+ lineHeight,
99
+ letterSpacing
100
+ },
101
+ [UDS_FONT_FAMILY_THEME_KEY]: fontFamily,
102
+ [UDS_FONT_SIZE_THEME_KEY]: fontSize,
103
+ [UDS_FONT_WEIGHT_THEME_KEY]: fontWeight,
104
+ [UDS_FONT_SLANT_THEME_KEY]: fontSlant,
105
+ [UDS_LINE_HEIGHT_THEME_KEY]: lineHeight,
106
+ [UDS_LETTER_SPACING_THEME_KEY]: letterSpacing,
107
+ [UDS_TEXT_TRANSFORM_THEME_KEY]: textTransform,
108
+ [UDS_FONT_WIDTH_THEME_KEY]: fontWidth
81
109
  } }
82
110
  };
83
111
  });
@@ -14,6 +14,14 @@ import plugin from "tailwindcss/plugin.js";
14
14
 
15
15
  //#region ../tailwind/dist/tailwind/plugins/typography.js
16
16
  /*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
17
+ const UDS_FONT_FAMILY_THEME_KEY = "udsFontFamily";
18
+ const UDS_FONT_SIZE_THEME_KEY = "udsFontSize";
19
+ const UDS_FONT_WEIGHT_THEME_KEY = "udsFontWeight";
20
+ const UDS_FONT_SLANT_THEME_KEY = "udsFontSlant";
21
+ const UDS_LINE_HEIGHT_THEME_KEY = "udsLineHeight";
22
+ const UDS_LETTER_SPACING_THEME_KEY = "udsLetterSpacing";
23
+ const UDS_TEXT_TRANSFORM_THEME_KEY = "udsTextTransform";
24
+ const UDS_FONT_WIDTH_THEME_KEY = "udsFontWidth";
17
25
  /** @deprecated Descriptive font weights vary based on font, so this is not correct for each font we support
18
26
  * This is used as a baseline for using native font weights in the system IE. <Text fontWeight="bold" />
19
27
  */
@@ -28,7 +36,8 @@ const fontWeightMap = {
28
36
  extrabold: "800",
29
37
  black: "900"
30
38
  };
31
- const typographyPlugin = plugin.withOptions(({ config, disableFontFaceDeclarations = false }) => (api) => {
39
+ const typographyPlugin = plugin.withOptions(({ config, disableOverrideTailwindTheme, disableFontFaceDeclarations = false }) => (api) => {
40
+ const shouldMergeTypographyTokensIntoTailwindTheme = !shouldNotMergeTokensIntoTailwindTheme(disableOverrideTailwindTheme, "typography");
32
41
  const { addBase, addUtilities, addComponents, matchUtilities, theme } = api;
33
42
  const fontIds = Object.values(config.font);
34
43
  if (disableFontFaceDeclarations === false) addFontFaceDeclarations(fontIds, api);
@@ -36,8 +45,7 @@ const typographyPlugin = plugin.withOptions(({ config, disableFontFaceDeclaratio
36
45
  addBase(getBaseTextVars(config));
37
46
  addBase(getGroupedTextStyles());
38
47
  if ((config.globalDefaults.enableResponsiveType ?? false) && config.typography && config.breakpoints) addComponents(getResponsiveTextStyles(config));
39
- matchUtilities({ case: (value) => ({ "text-transform": value }) }, { values: theme("typography.textTransform") });
40
- const namedFontWeightsFromPlugin = theme("typography.fontWeight") || {};
48
+ const namedFontWeightsFromPlugin = theme("udsFontWeight") || {};
41
49
  const fontWeightsWithDescriptives = {
42
50
  ...fontWeightMap,
43
51
  ...namedFontWeightsFromPlugin
@@ -46,19 +54,28 @@ const typographyPlugin = plugin.withOptions(({ config, disableFontFaceDeclaratio
46
54
  const styles = {};
47
55
  if (textVariants.map(textVariantsSafe).includes(fontWeight)) {
48
56
  const textVariant = fontWeight;
49
- const slantValue = theme(`typography.fontSlant.${textVariant}`);
50
- const widthValue = theme(`typography.fontWidth.${textVariant}`);
57
+ const slantValue = theme(`udsFontSlant.${textVariant}`);
58
+ const widthValue = theme(`udsFontWidth.${textVariant}`);
51
59
  styles["font-weight"] = value;
52
60
  styles["font-variation-settings"] = `"wght" ${value}, "slnt" ${slantValue}, "ital" ${slantValue}, "wdth" ${widthValue}`;
53
61
  const bolderStyles = { "font-variation-settings": "normal" };
54
62
  styles["b"] = bolderStyles;
55
63
  styles["strong"] = bolderStyles;
56
64
  } else styles["font-weight"] = value;
57
- addUtilities({ [`.font-weight-${fontWeight}`]: styles });
65
+ if (shouldMergeTypographyTokensIntoTailwindTheme) addUtilities({ [`.font-weight-${fontWeight}`]: styles });
66
+ addUtilities({ [`.uds-font-weight-${fontWeight}`]: styles });
58
67
  });
59
- matchUtilities({ "font-size": (value) => ({ "font-size": value }) }, { values: theme("typography.fontSize") });
68
+ if (shouldMergeTypographyTokensIntoTailwindTheme) matchUtilities({ "font-size": (value) => ({ "font-size": value }) }, { values: theme(UDS_FONT_SIZE_THEME_KEY) });
69
+ matchUtilities({ "uds-font-size": (value) => ({ "font-size": value }) }, { values: theme(UDS_FONT_SIZE_THEME_KEY) });
70
+ matchUtilities({ "uds-font-family": (value) => ({ "font-family": value }) }, { values: theme(UDS_FONT_FAMILY_THEME_KEY) });
71
+ matchUtilities({ "uds-line-height": (value) => ({ "line-height": value }) }, { values: theme(UDS_LINE_HEIGHT_THEME_KEY) });
72
+ matchUtilities({ "uds-letter-spacing": (value) => ({ "letter-spacing": value }) }, { values: theme(UDS_LETTER_SPACING_THEME_KEY) });
73
+ if (shouldMergeTypographyTokensIntoTailwindTheme) matchUtilities({ case: (value) => ({ "text-transform": value }) }, { values: theme(UDS_TEXT_TRANSFORM_THEME_KEY) });
74
+ matchUtilities({ "uds-text-transform": (value) => {
75
+ return { "text-transform": value };
76
+ } }, { values: theme(UDS_TEXT_TRANSFORM_THEME_KEY) });
60
77
  }, ({ disableOverrideTailwindTheme }) => {
61
- const shouldNotMergeFontSizeTokensIntoTailwindTheme = shouldNotMergeTokensIntoTailwindTheme(disableOverrideTailwindTheme, "textSize");
78
+ const shouldNotMergeTypographyTokensIntoTailwindTheme = shouldNotMergeTokensIntoTailwindTheme(disableOverrideTailwindTheme, "typography");
62
79
  /**
63
80
  * Reassign Tailwind's font size aliases to UDS's font size aliases
64
81
  * This makes it so UDS configs can power both Tailwind and UDS components
@@ -68,14 +85,25 @@ const typographyPlugin = plugin.withOptions(({ config, disableFontFaceDeclaratio
68
85
  }));
69
86
  const textClasses = textVariants.map((variant) => `uds-text-${textVariantsSafe(variant)}`);
70
87
  const responsiveTextClasses = [TEXT_RESPONSIVE_CLASSNAME, ...Object.keys(TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES).map((variant) => TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES[variant])];
88
+ const fontFamily = getFontFamilyTheme();
89
+ const { lineHeight, letterSpacing, fontSize, textTransform, fontWeight, fontSlant, fontWidth } = RESPONSIVE_TAILWIND_CONFIG_MAP;
71
90
  return {
72
91
  safelist: [...textClasses, ...responsiveTextClasses],
73
92
  theme: { extend: {
74
- fontFamily: getFontFamilyTheme(),
75
- ...shouldNotMergeFontSizeTokensIntoTailwindTheme ? {} : { fontSize: tailwindFontSize },
76
- lineHeight: RESPONSIVE_TAILWIND_CONFIG_MAP.lineHeight,
77
- letterSpacing: RESPONSIVE_TAILWIND_CONFIG_MAP.letterSpacing,
78
- typography: RESPONSIVE_TAILWIND_CONFIG_MAP
93
+ ...shouldNotMergeTypographyTokensIntoTailwindTheme ? {} : {
94
+ fontFamily,
95
+ fontSize: tailwindFontSize,
96
+ lineHeight,
97
+ letterSpacing
98
+ },
99
+ [UDS_FONT_FAMILY_THEME_KEY]: fontFamily,
100
+ [UDS_FONT_SIZE_THEME_KEY]: fontSize,
101
+ [UDS_FONT_WEIGHT_THEME_KEY]: fontWeight,
102
+ [UDS_FONT_SLANT_THEME_KEY]: fontSlant,
103
+ [UDS_LINE_HEIGHT_THEME_KEY]: lineHeight,
104
+ [UDS_LETTER_SPACING_THEME_KEY]: letterSpacing,
105
+ [UDS_TEXT_TRANSFORM_THEME_KEY]: textTransform,
106
+ [UDS_FONT_WIDTH_THEME_KEY]: fontWidth
79
107
  } }
80
108
  };
81
109
  });
@@ -13,7 +13,10 @@ const shouldNotMergeTokensIntoTailwindTheme = (disableOverrideTailwindTheme, fea
13
13
  const composeTailwindPlugins = (...plugins) => tailwindcss_plugin_js.default.withOptions((options) => {
14
14
  if (!options.config) throw new Error("`tailwindPlugin` requires a config object. If your project has not yet sync'd a config, you can import `defaultTokensConfig` from `@yahoo/uds/defaultTokensConfig` and pass it to `tailwindPlugin`.");
15
15
  options.disableOverrideTailwindTheme ??= false;
16
+ options.onlyTheme ??= false;
17
+ options.ignorePluginSafelists ??= false;
16
18
  return (api) => {
19
+ if (options.onlyTheme) return;
17
20
  const { addBase, addComponents, addUtilities, config } = api;
18
21
  const parentConfigImportant = config().important;
19
22
  const useImportNamespace = (0, lodash_es.isString)(parentConfigImportant);
@@ -55,8 +58,7 @@ const composeTailwindPlugins = (...plugins) => tailwindcss_plugin_js.default.wit
55
58
  throw new Error(`The theme.extend.${key} value cannot be a function when using composeTailwindPlugins. Please resolve the function to an object instead.`);
56
59
  }
57
60
  const mergedConfig = (0, lodash_es.merge)({}, ...pluginConfigs);
58
- const safelist = new Set([...options.safelist ?? [], ...pluginConfigs.flatMap((c) => c.safelist ?? [])]);
59
- mergedConfig.safelist = Array.from(safelist);
61
+ mergedConfig.safelist = options.ignorePluginSafelists ? options.safelist : Array.from(new Set([...options.safelist ?? [], ...pluginConfigs.flatMap((c) => c.safelist ?? [])]));
60
62
  return mergedConfig;
61
63
  });
62
64
 
@@ -34,7 +34,16 @@ interface TailwindPluginOptions {
34
34
  * Which UDS tokens should be merged into the tailwind theme.
35
35
  * @default false
36
36
  */
37
- disableOverrideTailwindTheme?: boolean | Array<'textSize' | 'borderRadius' | 'borderWidth' | 'screens'>;
37
+ disableOverrideTailwindTheme?: boolean | Array<'typography' | 'borderRadius' | 'borderWidth' | 'screens'>;
38
+ /**
39
+ * If we are in standalone (aka `uds css`) mode, only apply theme values
40
+ * @default false
41
+ */
42
+ onlyTheme?: boolean;
43
+ /**
44
+ * Whether to ignore the safelists requested by plugins (for optimized purger use only)
45
+ */
46
+ ignorePluginSafelists?: boolean;
38
47
  previewOptions?: {
39
48
  /**
40
49
  * Generates CSS classes for visually forcing components into a pseudo state (hover, focus, etc)
@@ -35,7 +35,16 @@ interface TailwindPluginOptions {
35
35
  * Which UDS tokens should be merged into the tailwind theme.
36
36
  * @default false
37
37
  */
38
- disableOverrideTailwindTheme?: boolean | Array<'textSize' | 'borderRadius' | 'borderWidth' | 'screens'>;
38
+ disableOverrideTailwindTheme?: boolean | Array<'typography' | 'borderRadius' | 'borderWidth' | 'screens'>;
39
+ /**
40
+ * If we are in standalone (aka `uds css`) mode, only apply theme values
41
+ * @default false
42
+ */
43
+ onlyTheme?: boolean;
44
+ /**
45
+ * Whether to ignore the safelists requested by plugins (for optimized purger use only)
46
+ */
47
+ ignorePluginSafelists?: boolean;
39
48
  previewOptions?: {
40
49
  /**
41
50
  * Generates CSS classes for visually forcing components into a pseudo state (hover, focus, etc)
@@ -11,7 +11,10 @@ const shouldNotMergeTokensIntoTailwindTheme = (disableOverrideTailwindTheme, fea
11
11
  const composeTailwindPlugins = (...plugins) => plugin.withOptions((options) => {
12
12
  if (!options.config) throw new Error("`tailwindPlugin` requires a config object. If your project has not yet sync'd a config, you can import `defaultTokensConfig` from `@yahoo/uds/defaultTokensConfig` and pass it to `tailwindPlugin`.");
13
13
  options.disableOverrideTailwindTheme ??= false;
14
+ options.onlyTheme ??= false;
15
+ options.ignorePluginSafelists ??= false;
14
16
  return (api) => {
17
+ if (options.onlyTheme) return;
15
18
  const { addBase, addComponents, addUtilities, config } = api;
16
19
  const parentConfigImportant = config().important;
17
20
  const useImportNamespace = isString(parentConfigImportant);
@@ -53,8 +56,7 @@ const composeTailwindPlugins = (...plugins) => plugin.withOptions((options) => {
53
56
  throw new Error(`The theme.extend.${key} value cannot be a function when using composeTailwindPlugins. Please resolve the function to an object instead.`);
54
57
  }
55
58
  const mergedConfig = merge({}, ...pluginConfigs);
56
- const safelist = new Set([...options.safelist ?? [], ...pluginConfigs.flatMap((c) => c.safelist ?? [])]);
57
- mergedConfig.safelist = Array.from(safelist);
59
+ mergedConfig.safelist = options.ignorePluginSafelists ? options.safelist : Array.from(new Set([...options.safelist ?? [], ...pluginConfigs.flatMap((c) => c.safelist ?? [])]));
58
60
  return mergedConfig;
59
61
  });
60
62
 
@@ -19,6 +19,6 @@ import { FontConfig } from "../../../../types/dist/index.cjs";
19
19
  * addBase(fontVars);
20
20
  *
21
21
  */
22
- declare function getFontStyles(fontConfig: Partial<FontConfig>): Record<"--uds-font-sans" | "--uds-font-sans-alt" | "--uds-font-serif" | "--uds-font-serif-alt" | "--uds-font-mono", string>; //#endregion
22
+ declare function getFontStyles(fontConfig: Partial<FontConfig>): Record<"--uds-font-sans" | "--uds-font-serif" | "--uds-font-mono" | "--uds-font-sans-alt" | "--uds-font-serif-alt", string>; //#endregion
23
23
  //#endregion
24
24
  export { getFontStyles };
@@ -19,6 +19,6 @@ import { FontConfig } from "../../../../types/dist/index.js";
19
19
  * addBase(fontVars);
20
20
  *
21
21
  */
22
- declare function getFontStyles(fontConfig: Partial<FontConfig>): Record<"--uds-font-sans" | "--uds-font-sans-alt" | "--uds-font-serif" | "--uds-font-serif-alt" | "--uds-font-mono", string>; //#endregion
22
+ declare function getFontStyles(fontConfig: Partial<FontConfig>): Record<"--uds-font-sans" | "--uds-font-serif" | "--uds-font-mono" | "--uds-font-sans-alt" | "--uds-font-serif-alt", string>; //#endregion
23
23
  //#endregion
24
24
  export { getFontStyles };