Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Rename to replacedThemeKeys
  • Loading branch information
philipp-spiess committed Oct 16, 2024
commit 3456eddb68c169bff724924b6bcd0c6afb2dbbb7
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
}