@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.
- package/dist/automated-config/dist/mapTextVariantFixtureToValue.cjs +12 -1
- package/dist/automated-config/dist/mapTextVariantFixtureToValue.js +12 -1
- package/dist/automated-config/dist/properties.cjs +1 -1
- package/dist/automated-config/dist/properties.js +1 -1
- package/dist/automated-config/dist/utils/getConfigVariantProperties.d.cts +2 -2
- package/dist/automated-config/dist/utils/getConfigVariantProperties.d.ts +2 -2
- package/dist/cli/commands/sync.cjs +1 -3
- package/dist/cli/commands/sync.d.cts +1 -1
- package/dist/cli/commands/sync.d.ts +1 -1
- package/dist/cli/commands/sync.js +1 -3
- package/dist/cli/commands/version.cjs +0 -2
- package/dist/cli/commands/version.d.cts +1 -1
- package/dist/cli/commands/version.d.ts +1 -1
- package/dist/cli/commands/version.js +0 -2
- package/dist/cli/dist/cli.cjs +1 -1
- package/dist/cli/dist/cli.js +1 -1
- package/dist/cli/dist/commands/editor-rules.cjs +2 -2
- package/dist/cli/dist/commands/editor-rules.js +2 -2
- package/dist/cli/dist/lib/logger.cjs +66 -0
- package/dist/cli/dist/lib/logger.js +66 -0
- package/dist/cli/dist/utils/rules/config.cjs +1 -1
- package/dist/cli/dist/utils/rules/config.js +1 -1
- package/dist/cli/runner.cjs +11 -2
- package/dist/cli/runner.js +11 -2
- package/dist/components/client/Menu/Menu.ItemCheckbox.d.cts +1 -1
- package/dist/components/client/Menu/Menu.ItemCheckbox.d.ts +1 -1
- package/dist/index.cjs +2 -0
- package/dist/index.d.cts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +2 -1
- package/dist/styles/styler.d.cts +41 -41
- package/dist/styles/styler.d.ts +41 -41
- package/dist/styles/variants.cjs +278 -278
- package/dist/styles/variants.js +278 -278
- package/dist/tailwind/dist/commands/css.cjs +79 -0
- package/dist/tailwind/dist/commands/css.d.ts +3 -0
- package/dist/tailwind/dist/commands/css.helpers.cjs +32 -0
- package/dist/tailwind/dist/commands/css.helpers.js +28 -0
- package/dist/tailwind/dist/commands/css.js +79 -0
- package/dist/tailwind/dist/commands/generateComponentData.cjs +33 -31
- package/dist/tailwind/dist/commands/generateComponentData.d.ts +1 -1
- package/dist/tailwind/dist/commands/generateComponentData.js +33 -31
- package/dist/tailwind/dist/commands/generatePurgeCSSData.d.ts +1 -1
- package/dist/tailwind/dist/commands/purge.cjs +3 -4
- package/dist/tailwind/dist/commands/purge.d.ts +1 -1
- package/dist/tailwind/dist/commands/purge.js +3 -4
- package/dist/tailwind/dist/css/generate.cjs +120 -0
- package/dist/tailwind/dist/css/generate.d.cts +30 -0
- package/dist/tailwind/dist/css/generate.d.ts +31 -0
- package/dist/tailwind/dist/css/generate.helpers.cjs +112 -0
- package/dist/tailwind/dist/css/generate.helpers.js +100 -0
- package/dist/tailwind/dist/css/generate.js +115 -0
- package/dist/tailwind/dist/css/postcss.cjs +35 -0
- package/dist/tailwind/dist/css/postcss.helpers.cjs +27 -0
- package/dist/tailwind/dist/css/postcss.helpers.js +26 -0
- package/dist/tailwind/dist/css/postcss.js +35 -0
- package/dist/tailwind/dist/css/runner.cjs +278 -0
- package/dist/tailwind/dist/css/runner.helpers.cjs +26 -0
- package/dist/tailwind/dist/css/runner.helpers.js +23 -0
- package/dist/tailwind/dist/css/runner.js +275 -0
- package/dist/tailwind/dist/css/theme.cjs +12 -0
- package/dist/tailwind/dist/css/theme.d.cts +66 -0
- package/dist/tailwind/dist/css/theme.d.ts +66 -0
- package/dist/tailwind/dist/css/theme.js +11 -0
- package/dist/tailwind/dist/css/utils.cjs +234 -0
- package/dist/tailwind/dist/css/utils.js +223 -0
- package/dist/tailwind/dist/index.d.cts +1 -0
- package/dist/tailwind/dist/index.d.ts +5 -3
- package/dist/tailwind/dist/purger/legacy/purgeCSS.cjs +4 -3
- package/dist/tailwind/dist/purger/legacy/purgeCSS.js +4 -3
- package/dist/tailwind/dist/purger/optimized/ast/expressions.cjs +122 -125
- package/dist/tailwind/dist/purger/optimized/ast/expressions.js +122 -125
- package/dist/tailwind/dist/purger/optimized/ast/jsx.cjs +1 -8
- package/dist/tailwind/dist/purger/optimized/ast/jsx.js +1 -8
- package/dist/tailwind/dist/purger/optimized/purge.cjs +11 -10
- package/dist/tailwind/dist/purger/optimized/purge.js +10 -9
- package/dist/tailwind/dist/purger/optimized/purgeFromCode.cjs +232 -127
- package/dist/tailwind/dist/purger/optimized/purgeFromCode.js +232 -127
- package/dist/tailwind/dist/purger/optimized/utils/componentAnalyzer.cjs +330 -262
- package/dist/tailwind/dist/purger/optimized/utils/componentAnalyzer.js +329 -262
- package/dist/tailwind/dist/purger/optimized/utils/files.cjs +4 -3
- package/dist/tailwind/dist/purger/optimized/utils/files.js +4 -3
- package/dist/tailwind/dist/purger/optimized/utils/safelist.cjs +13 -21
- package/dist/tailwind/dist/purger/optimized/utils/safelist.js +13 -21
- package/dist/tailwind/dist/tailwind/plugins/typography.cjs +41 -13
- package/dist/tailwind/dist/tailwind/plugins/typography.js +41 -13
- package/dist/tailwind/dist/tailwind/utils/composeTailwindPlugins.cjs +4 -2
- package/dist/tailwind/dist/tailwind/utils/composeTailwindPlugins.d.cts +10 -1
- package/dist/tailwind/dist/tailwind/utils/composeTailwindPlugins.d.ts +10 -1
- package/dist/tailwind/dist/tailwind/utils/composeTailwindPlugins.js +4 -2
- package/dist/tailwind/dist/tailwind/utils/getFontStyles.d.cts +1 -1
- package/dist/tailwind/dist/tailwind/utils/getFontStyles.d.ts +1 -1
- package/dist/tailwind/dist/utils/optimizeCSS.cjs +405 -0
- package/dist/tailwind/dist/utils/optimizeCSS.js +403 -0
- package/dist/tailwind/dist/utils/postcssPreserveVars.cjs +67 -0
- package/dist/tailwind/dist/utils/postcssPreserveVars.js +65 -0
- package/dist/tailwind/dist/utils/tsMorph.cjs +1 -1
- package/dist/uds/generated/componentData.cjs +943 -928
- package/dist/uds/generated/componentData.js +943 -928
- package/dist/uds/package.cjs +10 -4
- package/dist/uds/package.js +10 -4
- package/generated/componentData.json +2397 -0
- package/generated/tailwindPurge.ts +4560 -0
- 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
|
|
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
|
|
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
|
-
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
|
|
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
|
-
|
|
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
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
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
|
|
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
|
-
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
|
|
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
|
-
|
|
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
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
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
|
|
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
|
-
|
|
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(`
|
|
52
|
-
const widthValue = theme(`
|
|
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(
|
|
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
|
|
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
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
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
|
-
|
|
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(`
|
|
50
|
-
const widthValue = theme(`
|
|
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(
|
|
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
|
|
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
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
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
|
-
|
|
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<'
|
|
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<'
|
|
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
|
-
|
|
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-
|
|
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-
|
|
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 };
|