Skip to content

Commit

Permalink
Rename to replacedThemeKeys
Browse files Browse the repository at this point in the history
  • Loading branch information
philipp-spiess committed Oct 16, 2024
1 parent 67139ac commit 34847f3
Show file tree
Hide file tree
Showing 7 changed files with 31 additions and 33 deletions.
6 changes: 3 additions & 3 deletions packages/tailwindcss/src/compat/apply-compat-hooks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ function upgradeToFullPluginSupport({
...userConfig,
{ config: { plugins: [darkModePlugin] }, base },
])
let { resolvedConfig: resolvedUserConfig, resetThemeKeys } = resolveConfig(
let { resolvedConfig: resolvedUserConfig, replacedThemeKeys } = resolveConfig(
designSystem,
userConfig,
)
Expand All @@ -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)
Expand Down
12 changes: 6 additions & 6 deletions packages/tailwindcss/src/compat/apply-config-to-theme.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -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: {
Expand All @@ -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 {
Expand All @@ -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: {
Expand All @@ -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())

Expand Down
4 changes: 2 additions & 2 deletions packages/tailwindcss/src/compat/apply-config-to-theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ function resolveThemeValue(value: unknown, subValue: string | null = null): stri
export function applyConfigToTheme(
designSystem: DesignSystem,
{ theme }: ResolvedConfig,
resetThemeKeys: Set<string>,
replacedThemeKeys: Set<string>,
) {
for (let resetThemeKey of resetThemeKeys) {
for (let resetThemeKey of replacedThemeKeys) {
let name = keyPathToCssProperty([resetThemeKey])
if (!name) continue

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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 {
Expand Down Expand Up @@ -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: {
Expand All @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { objectToAst } from './plugin-api'
export function applyKeyframesToTheme(
designSystem: DesignSystem,
resolvedConfig: Pick<ResolvedConfig, 'theme'>,
resetThemeKeys: Set<string>,
replacedThemeKeys: Set<string>,
) {
for (let rule of keyframesToRules(resolvedConfig)) {
designSystem.theme.addKeyframes(rule)
Expand Down
16 changes: 8 additions & 8 deletions packages/tailwindcss/src/compat/config/resolve-config.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -99,15 +99,15 @@ 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', ({
expect,
}) => {
let design = buildDesignSystem(new Theme())

let { resolvedConfig, resetThemeKeys } = resolveConfig(design, [
let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [
{
config: {
theme: {
Expand Down Expand Up @@ -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', () => {
Expand All @@ -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: {
Expand Down Expand Up @@ -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']),
)
})
16 changes: 7 additions & 9 deletions packages/tailwindcss/src/compat/config/resolve-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ import {
type UserConfig,
} from './types'

type ResetThemeKeys = Set<string>

export interface ConfigFile {
path?: string
base: string
Expand Down Expand Up @@ -44,7 +42,7 @@ let minimal: ResolvedConfig = {
export function resolveConfig(
design: DesignSystem,
files: ConfigFile[],
): { resolvedConfig: ResolvedConfig; resetThemeKeys: ResetThemeKeys } {
): { resolvedConfig: ResolvedConfig; replacedThemeKeys: Set<string> } {
let ctx: ResolutionContext = {
design,
configs: [],
Expand Down Expand Up @@ -83,7 +81,7 @@ export function resolveConfig(
}

// Merge themes
let resetThemeKeys = mergeTheme(ctx)
let replacedThemeKeys = mergeTheme(ctx)

return {
resolvedConfig: {
Expand All @@ -92,7 +90,7 @@ export function resolveConfig(
theme: ctx.theme as ResolvedConfig['theme'],
plugins: ctx.plugins,
},
resetThemeKeys,
replacedThemeKeys,
}
}

Expand Down Expand Up @@ -183,8 +181,8 @@ function extractConfigs(ctx: ResolutionContext, { config, base, path }: ConfigFi
ctx.configs.push(config)
}

function mergeTheme(ctx: ResolutionContext): ResetThemeKeys {
let resetThemeKeys: Set<string> = new Set()
function mergeTheme(ctx: ResolutionContext): Set<string> {
let replacedThemeKeys: Set<string> = new Set()

let themeFn = createThemeFn(ctx.design, () => ctx.theme, resolveValue)
let theme = Object.assign(themeFn, {
Expand All @@ -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
Expand Down Expand Up @@ -257,5 +255,5 @@ function mergeTheme(ctx: ResolutionContext): ResetThemeKeys {
}
}

return resetThemeKeys
return replacedThemeKeys
}

0 comments on commit 34847f3

Please sign in to comment.