diff --git a/packages/tailwindcss/src/compat/apply-compat-hooks.ts b/packages/tailwindcss/src/compat/apply-compat-hooks.ts index a5674bb53bf0..75b4dbafdce8 100644 --- a/packages/tailwindcss/src/compat/apply-compat-hooks.ts +++ b/packages/tailwindcss/src/compat/apply-compat-hooks.ts @@ -220,7 +220,7 @@ function upgradeToFullPluginSupport({ ...userConfig, { config: { plugins: [darkModePlugin] }, base }, ]) - let { resolvedConfig: resolvedUserConfig, resetThemeKeys } = resolveConfig( + let { resolvedConfig: resolvedUserConfig, replacedThemeKeys } = resolveConfig( designSystem, userConfig, ) @@ -234,8 +234,8 @@ function upgradeToFullPluginSupport({ // Merge the user-configured theme keys into the design system. The compat // config would otherwise expand into namespaces like `background-color` which // core utilities already read from. - applyConfigToTheme(designSystem, resolvedUserConfig, resetThemeKeys) - applyKeyframesToTheme(designSystem, resolvedUserConfig, resetThemeKeys) + applyConfigToTheme(designSystem, resolvedUserConfig, replacedThemeKeys) + applyKeyframesToTheme(designSystem, resolvedUserConfig, replacedThemeKeys) registerThemeVariantOverrides(resolvedUserConfig, designSystem) registerScreensConfig(resolvedUserConfig, designSystem) diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts index 7a7a84079701..9b415e0d1a3c 100644 --- a/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts +++ b/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts @@ -8,7 +8,7 @@ test('config values can be merged into the theme', () => { let theme = new Theme() let design = buildDesignSystem(theme) - let { resolvedConfig, resetThemeKeys } = resolveConfig(design, [ + let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [ { config: { theme: { @@ -54,7 +54,7 @@ test('config values can be merged into the theme', () => { base: '/root', }, ]) - applyConfigToTheme(design, resolvedConfig, resetThemeKeys) + applyConfigToTheme(design, resolvedConfig, replacedThemeKeys) expect(theme.resolve('primary', ['--color'])).toEqual('#c0ffee') expect(theme.resolve('sm', ['--breakpoint'])).toEqual('1234px') @@ -84,7 +84,7 @@ test('will reset default theme values with overwriting theme values', () => { theme.add('--color-red-400', '#f87171') theme.add('--color-red-500', '#ef4444') - let { resolvedConfig, resetThemeKeys } = resolveConfig(design, [ + let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [ { config: { theme: { @@ -111,7 +111,7 @@ test('will reset default theme values with overwriting theme values', () => { base: '/root', }, ]) - applyConfigToTheme(design, resolvedConfig, resetThemeKeys) + applyConfigToTheme(design, resolvedConfig, replacedThemeKeys) expect(theme.namespace('--color')).toMatchInlineSnapshot(` Map { @@ -128,7 +128,7 @@ test('invalid keys are not merged into the theme', () => { let theme = new Theme() let design = buildDesignSystem(theme) - let { resolvedConfig, resetThemeKeys } = resolveConfig(design, [ + let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [ { config: { theme: { @@ -141,7 +141,7 @@ test('invalid keys are not merged into the theme', () => { }, ]) - applyConfigToTheme(design, resolvedConfig, resetThemeKeys) + applyConfigToTheme(design, resolvedConfig, replacedThemeKeys) let entries = Array.from(theme.entries()) diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.ts index 3c8124f06e53..6e6c245118c6 100644 --- a/packages/tailwindcss/src/compat/apply-config-to-theme.ts +++ b/packages/tailwindcss/src/compat/apply-config-to-theme.ts @@ -22,9 +22,9 @@ function resolveThemeValue(value: unknown, subValue: string | null = null): stri export function applyConfigToTheme( designSystem: DesignSystem, { theme }: ResolvedConfig, - resetThemeKeys: Set, + replacedThemeKeys: Set, ) { - for (let resetThemeKey of resetThemeKeys) { + for (let resetThemeKey of replacedThemeKeys) { let name = keyPathToCssProperty([resetThemeKey]) if (!name) continue diff --git a/packages/tailwindcss/src/compat/apply-keyframes-to-theme.test.ts b/packages/tailwindcss/src/compat/apply-keyframes-to-theme.test.ts index 602c9364d2ac..313d98c3c80a 100644 --- a/packages/tailwindcss/src/compat/apply-keyframes-to-theme.test.ts +++ b/packages/tailwindcss/src/compat/apply-keyframes-to-theme.test.ts @@ -9,7 +9,7 @@ test('keyframes can be merged into the theme', () => { let theme = new Theme() let design = buildDesignSystem(theme) - let { resolvedConfig, resetThemeKeys } = resolveConfig(design, [ + let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [ { config: { theme: { @@ -30,7 +30,7 @@ test('keyframes can be merged into the theme', () => { base: '/root', }, ]) - applyKeyframesToTheme(design, resolvedConfig, resetThemeKeys) + applyKeyframesToTheme(design, resolvedConfig, replacedThemeKeys) expect(toCss(design.theme.getKeyframes())).toMatchInlineSnapshot(` "@keyframes fade-in { @@ -70,7 +70,7 @@ test('will append to the default keyframes with new keyframes', () => { ]), ) - let { resolvedConfig, resetThemeKeys } = resolveConfig(design, [ + let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [ { config: { theme: { @@ -93,7 +93,7 @@ test('will append to the default keyframes with new keyframes', () => { base: '/root', }, ]) - applyKeyframesToTheme(design, resolvedConfig, resetThemeKeys) + applyKeyframesToTheme(design, resolvedConfig, replacedThemeKeys) expect(toCss(design.theme.getKeyframes())).toMatchInlineSnapshot(` "@keyframes slide-in { diff --git a/packages/tailwindcss/src/compat/apply-keyframes-to-theme.ts b/packages/tailwindcss/src/compat/apply-keyframes-to-theme.ts index f4868d87a702..7f853a0d45e1 100644 --- a/packages/tailwindcss/src/compat/apply-keyframes-to-theme.ts +++ b/packages/tailwindcss/src/compat/apply-keyframes-to-theme.ts @@ -6,7 +6,7 @@ import { objectToAst } from './plugin-api' export function applyKeyframesToTheme( designSystem: DesignSystem, resolvedConfig: Pick, - resetThemeKeys: Set, + replacedThemeKeys: Set, ) { for (let rule of keyframesToRules(resolvedConfig)) { designSystem.theme.addKeyframes(rule) diff --git a/packages/tailwindcss/src/compat/config/resolve-config.test.ts b/packages/tailwindcss/src/compat/config/resolve-config.test.ts index e0ee595cc975..4bcd4feb9a25 100644 --- a/packages/tailwindcss/src/compat/config/resolve-config.test.ts +++ b/packages/tailwindcss/src/compat/config/resolve-config.test.ts @@ -6,7 +6,7 @@ import { resolveConfig } from './resolve-config' test('top level theme keys are replaced', () => { let design = buildDesignSystem(new Theme()) - let { resolvedConfig, resetThemeKeys } = resolveConfig(design, [ + let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [ { config: { theme: { @@ -53,13 +53,13 @@ test('top level theme keys are replaced', () => { }, }, }) - expect(resetThemeKeys).toEqual(new Set(['colors', 'fontFamily'])) + expect(replacedThemeKeys).toEqual(new Set(['colors', 'fontFamily'])) }) test('theme can be extended', () => { let design = buildDesignSystem(new Theme()) - let { resolvedConfig, resetThemeKeys } = resolveConfig(design, [ + let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [ { config: { theme: { @@ -99,7 +99,7 @@ test('theme can be extended', () => { }, }, }) - expect(resetThemeKeys).toEqual(new Set(['colors', 'fontFamily'])) + expect(replacedThemeKeys).toEqual(new Set(['colors', 'fontFamily'])) }) test('theme keys can reference other theme keys using the theme function regardless of order', ({ @@ -107,7 +107,7 @@ test('theme keys can reference other theme keys using the theme function regardl }) => { let design = buildDesignSystem(new Theme()) - let { resolvedConfig, resetThemeKeys } = resolveConfig(design, [ + let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [ { config: { theme: { @@ -172,7 +172,7 @@ test('theme keys can reference other theme keys using the theme function regardl }, }, }) - expect(resetThemeKeys).toEqual(new Set(['colors', 'placeholderColor'])) + expect(replacedThemeKeys).toEqual(new Set(['colors', 'placeholderColor'])) }) test('theme keys can read from the CSS theme', () => { @@ -181,7 +181,7 @@ test('theme keys can read from the CSS theme', () => { let design = buildDesignSystem(theme) - let { resolvedConfig, resetThemeKeys } = resolveConfig(design, [ + let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [ { config: { theme: { @@ -250,7 +250,7 @@ test('theme keys can read from the CSS theme', () => { }, }, }) - expect(resetThemeKeys).toEqual( + expect(replacedThemeKeys).toEqual( new Set(['colors', 'accentColor', 'placeholderColor', 'caretColor', 'transitionColor']), ) }) diff --git a/packages/tailwindcss/src/compat/config/resolve-config.ts b/packages/tailwindcss/src/compat/config/resolve-config.ts index cd7fbfad9070..9b09ad63fa77 100644 --- a/packages/tailwindcss/src/compat/config/resolve-config.ts +++ b/packages/tailwindcss/src/compat/config/resolve-config.ts @@ -11,8 +11,6 @@ import { type UserConfig, } from './types' -type ResetThemeKeys = Set - export interface ConfigFile { path?: string base: string @@ -44,7 +42,7 @@ let minimal: ResolvedConfig = { export function resolveConfig( design: DesignSystem, files: ConfigFile[], -): { resolvedConfig: ResolvedConfig; resetThemeKeys: ResetThemeKeys } { +): { resolvedConfig: ResolvedConfig; replacedThemeKeys: Set } { let ctx: ResolutionContext = { design, configs: [], @@ -83,7 +81,7 @@ export function resolveConfig( } // Merge themes - let resetThemeKeys = mergeTheme(ctx) + let replacedThemeKeys = mergeTheme(ctx) return { resolvedConfig: { @@ -92,7 +90,7 @@ export function resolveConfig( theme: ctx.theme as ResolvedConfig['theme'], plugins: ctx.plugins, }, - resetThemeKeys, + replacedThemeKeys, } } @@ -183,8 +181,8 @@ function extractConfigs(ctx: ResolutionContext, { config, base, path }: ConfigFi ctx.configs.push(config) } -function mergeTheme(ctx: ResolutionContext): ResetThemeKeys { - let resetThemeKeys: Set = new Set() +function mergeTheme(ctx: ResolutionContext): Set { + let replacedThemeKeys: Set = new Set() let themeFn = createThemeFn(ctx.design, () => ctx.theme, resolveValue) let theme = Object.assign(themeFn, { @@ -209,7 +207,7 @@ function mergeTheme(ctx: ResolutionContext): ResetThemeKeys { if (key === 'extend') { continue } - resetThemeKeys.add(key) + replacedThemeKeys.add(key) } // Shallow merge themes so latest "group" wins @@ -257,5 +255,5 @@ function mergeTheme(ctx: ResolutionContext): ResetThemeKeys { } } - return resetThemeKeys + return replacedThemeKeys }