From ac92bb46c52f8d2c9c8c6abc60344a1bdcfaa181 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Thu, 7 Nov 2024 09:36:22 -0500 Subject: [PATCH 1/2] Don't unset keys like `--font-weight-*` when unsetting `--font-*` --- packages/tailwindcss/src/index.test.ts | 173 ++++++++++++++++++ packages/tailwindcss/src/intellisense.test.ts | 1 - packages/tailwindcss/src/theme.ts | 64 +++---- packages/tailwindcss/src/utilities.test.ts | 112 +++++------- packages/tailwindcss/src/utilities.ts | 19 +- 5 files changed, 254 insertions(+), 115 deletions(-) diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index c7dbe6373715..6a60c11979c6 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -1174,6 +1174,179 @@ describe('Parsing themes values from CSS', () => { `) }) + test('unsetting `--font-*` does not unset `--font-weight-*` or `--font-size-*`', async () => { + expect( + await compileCss( + css` + @theme { + --font-weight-bold: bold; + --font-size-sm: 14px; + --font-sans: sans-serif; + --font-serif: serif; + } + @theme { + --font-*: initial; + --font-body: Inter; + } + @tailwind utilities; + `, + ['font-bold', 'text-sm', 'font-sans', 'font-serif', 'font-body'], + ), + ).toMatchInlineSnapshot(` + ":root { + --font-weight-bold: bold; + --font-size-sm: 14px; + --font-body: Inter; + } + + .font-body { + font-family: var(--font-body); + } + + .text-sm { + font-size: var(--font-size-sm); + } + + .font-bold { + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + } + + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-font-weight: initial; + } + } + } + + @property --tw-font-weight { + syntax: "*"; + inherits: false + }" + `) + }) + + test('unsetting `--inset-*` does not unset `--inset-shadow-*`', async () => { + expect( + await compileCss( + css` + @theme { + --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05); + --inset-lg: 100px; + --inset-sm: 10px; + } + @theme { + --inset-*: initial; + --inset-md: 50px; + } + @tailwind utilities; + `, + ['inset-shadow-sm', 'inset-ring-thick', 'inset-lg', 'inset-sm', 'inset-md'], + ), + ).toMatchInlineSnapshot(` + ":root { + --inset-shadow-sm: inset 0 2px 4px #0000000d; + --inset-md: 50px; + } + + .inset-md { + inset: var(--inset-md); + } + + .inset-shadow-sm { + --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, #0000000d); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } + } + + @property --tw-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; + } + + @property --tw-shadow-color { + syntax: "*"; + inherits: false + } + + @property --tw-inset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; + } + + @property --tw-inset-shadow-color { + syntax: "*"; + inherits: false + } + + @property --tw-ring-color { + syntax: "*"; + inherits: false + } + + @property --tw-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; + } + + @property --tw-inset-ring-color { + syntax: "*"; + inherits: false + } + + @property --tw-inset-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; + } + + @property --tw-ring-inset { + syntax: "*"; + inherits: false + } + + @property --tw-ring-offset-width { + syntax: ""; + inherits: false; + initial-value: 0; + } + + @property --tw-ring-offset-color { + syntax: "*"; + inherits: false; + initial-value: #fff; + } + + @property --tw-ring-offset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; + }" + `) + }) + test('unused keyframes are removed when an animation is unset', async () => { expect( await compileCss( diff --git a/packages/tailwindcss/src/intellisense.test.ts b/packages/tailwindcss/src/intellisense.test.ts index 5faaaabd11ea..48ec98a5a007 100644 --- a/packages/tailwindcss/src/intellisense.test.ts +++ b/packages/tailwindcss/src/intellisense.test.ts @@ -18,7 +18,6 @@ function loadDesignSystem() { theme.add('--opacity-background', '0.3') theme.add('--drop-shadow-sm', '0 1px 1px rgb(0 0 0 / 0.05)') theme.add('--inset-shadow-sm', 'inset 0 1px 1px rgb(0 0 0 / 0.05)') - theme.add('--inset-ring-big', '100px') return buildDesignSystem(theme) } diff --git a/packages/tailwindcss/src/theme.ts b/packages/tailwindcss/src/theme.ts index 4f21de2dbab5..95f676133808 100644 --- a/packages/tailwindcss/src/theme.ts +++ b/packages/tailwindcss/src/theme.ts @@ -8,8 +8,16 @@ export const enum ThemeOptions { DEFAULT = 1 << 2, } -function isIgnoredThemeKey(themeKey: ThemeKey, ignoredThemeKeys: ThemeKey[]) { - return ignoredThemeKeys.some( +// In the future we may want to replace this with just a `Set` of known theme +// keys and let the computer sort out which keys should ignored which other keys +// based on overlapping prefixes. +const ignoredThemeKeyMap = new Map([ + ['--font', ['--font-weight', '--font-size']], + ['--inset', ['--inset-shadow', '--inset-ring']], +]) + +function isIgnoredThemeKey(themeKey: ThemeKey, namespace: ThemeKey) { + return (ignoredThemeKeyMap.get(namespace) ?? []).some( (ignoredThemeKey) => themeKey === ignoredThemeKey || themeKey.startsWith(`${ignoredThemeKey}-`), ) } @@ -50,22 +58,22 @@ export class Theme { } } - keysInNamespaces(themeKeys: ThemeKey[], ignoredThemeKeys: ThemeKey[] = []): string[] { + keysInNamespaces(themeKeys: ThemeKey[]): string[] { let keys: string[] = [] - for (let prefix of themeKeys) { - let namespace = `${prefix}-` + for (let namespace of themeKeys) { + let prefix = `${namespace}-` for (let key of this.values.keys()) { - if (!key.startsWith(namespace)) continue + if (!key.startsWith(prefix)) continue if (key.indexOf('--', 2) !== -1) continue - if (isIgnoredThemeKey(key as ThemeKey, ignoredThemeKeys)) { + if (isIgnoredThemeKey(key as ThemeKey, namespace)) { continue } - keys.push(key.slice(namespace.length)) + keys.push(key.slice(prefix.length)) } } @@ -106,7 +114,9 @@ export class Theme { } clearNamespace(namespace: string, clearOptions: ThemeOptions) { - for (let key of this.values.keys()) { + let ignored = ignoredThemeKeyMap.get(namespace) ?? [] + + outer: for (let key of this.values.keys()) { if (key.startsWith(namespace)) { if (clearOptions !== ThemeOptions.NONE) { let options = this.getOptions(key) @@ -114,24 +124,23 @@ export class Theme { continue } } + for (let ignoredNamespace of ignored) { + if (key.startsWith(ignoredNamespace)) continue outer + } this.values.delete(key) } } } - #resolveKey( - candidateValue: string | null, - themeKeys: ThemeKey[], - ignoredThemeKeys: ThemeKey[] = [], - ): string | null { - for (let key of themeKeys) { + #resolveKey(candidateValue: string | null, themeKeys: ThemeKey[]): string | null { + for (let namespace of themeKeys) { let themeKey = candidateValue !== null - ? (escape(`${key}-${candidateValue.replaceAll('.', '_')}`) as ThemeKey) - : key + ? (escape(`${namespace}-${candidateValue.replaceAll('.', '_')}`) as ThemeKey) + : namespace if (!this.values.has(themeKey)) continue - if (isIgnoredThemeKey(themeKey, ignoredThemeKeys)) continue + if (isIgnoredThemeKey(themeKey, namespace)) continue return themeKey } @@ -147,12 +156,8 @@ export class Theme { return `var(${this.#prefixKey(themeKey)})` } - resolve( - candidateValue: string | null, - themeKeys: ThemeKey[], - ignoredThemeKeys: ThemeKey[] = [], - ): string | null { - let themeKey = this.#resolveKey(candidateValue, themeKeys, ignoredThemeKeys) + resolve(candidateValue: string | null, themeKeys: ThemeKey[]): string | null { + let themeKey = this.#resolveKey(candidateValue, themeKeys) if (!themeKey) return null @@ -165,12 +170,8 @@ export class Theme { return this.#var(themeKey) } - resolveValue( - candidateValue: string | null, - themeKeys: ThemeKey[], - ignoredThemeKeys: ThemeKey[] = [], - ): string | null { - let themeKey = this.#resolveKey(candidateValue, themeKeys, ignoredThemeKeys) + resolveValue(candidateValue: string | null, themeKeys: ThemeKey[]): string | null { + let themeKey = this.#resolveKey(candidateValue, themeKeys) if (!themeKey) return null @@ -181,9 +182,8 @@ export class Theme { candidateValue: string, themeKeys: ThemeKey[], nestedKeys: `--${string}`[] = [], - ignoredThemeKeys: ThemeKey[] = [], ): [string, Record] | null { - let themeKey = this.#resolveKey(candidateValue, themeKeys, ignoredThemeKeys) + let themeKey = this.#resolveKey(candidateValue, themeKeys) if (!themeKey) return null diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index da762e845065..06605b1c0728 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -128,16 +128,14 @@ test('inset', async () => { @theme { --spacing-4: 1rem; --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05); - --inset-ring-thick: 100px; - --inset-ringo-starr: 1940px; + --inset-shadowned: 1940px; } @tailwind utilities; `, [ 'inset-auto', 'inset-shadow-sm', - 'inset-ring-thick', - 'inset-ringo-starr', + 'inset-shadowned', '-inset-full', 'inset-full', 'inset-3/4', @@ -150,8 +148,7 @@ test('inset', async () => { ":root { --spacing-4: 1rem; --inset-shadow-sm: inset 0 1px 1px #0000000d; - --inset-ring-thick: 100px; - --inset-ringo-starr: 1940px; + --inset-shadowned: 1940px; } .-inset-4 { @@ -182,8 +179,8 @@ test('inset', async () => { inset: 100%; } - .inset-ringo-starr { - inset: var(--inset-ringo-starr); + .inset-shadowned { + inset: var(--inset-shadowned); } .inset-shadow-sm { @@ -301,12 +298,12 @@ test('inset-x', async () => { css` @theme { --spacing-4: 1rem; - --inset-ringo-starr: 1940px; + --inset-shadowned: 1940px; } @tailwind utilities; `, [ - 'inset-x-ringo-starr', + 'inset-x-shadowned', 'inset-x-auto', 'inset-x-full', '-inset-x-full', @@ -319,7 +316,7 @@ test('inset-x', async () => { ).toMatchInlineSnapshot(` ":root { --spacing-4: 1rem; - --inset-ringo-starr: 1940px; + --inset-shadowned: 1940px; } .-inset-x-4 { @@ -350,8 +347,8 @@ test('inset-x', async () => { inset-inline: 100%; } - .inset-x-ringo-starr { - inset-inline: var(--inset-ringo-starr); + .inset-x-shadowned { + inset-inline: var(--inset-shadowned); }" `) expect( @@ -360,13 +357,11 @@ test('inset-x', async () => { @theme reference { --spacing-4: 1rem; --inset-shadow-sm: inset 0 1px 1px #0000000d; - --inset-ring-thick: 100px; } @tailwind utilities; `, [ 'inset-x-shadow-sm', - 'inset-x-ring-thick', 'inset-x', 'inset-x--1', 'inset-x--1/2', @@ -390,12 +385,12 @@ test('inset-y', async () => { css` @theme { --spacing-4: 1rem; - --inset-ringo-starr: 1940px; + --inset-shadowned: 1940px; } @tailwind utilities; `, [ - 'inset-y-ringo-starr', + 'inset-y-shadowned', 'inset-y-auto', 'inset-y-full', '-inset-y-full', @@ -408,7 +403,7 @@ test('inset-y', async () => { ).toMatchInlineSnapshot(` ":root { --spacing-4: 1rem; - --inset-ringo-starr: 1940px; + --inset-shadowned: 1940px; } .-inset-y-4 { @@ -439,8 +434,8 @@ test('inset-y', async () => { inset-block: 100%; } - .inset-y-ringo-starr { - inset-block: var(--inset-ringo-starr); + .inset-y-shadowned { + inset-block: var(--inset-shadowned); }" `) expect( @@ -449,13 +444,11 @@ test('inset-y', async () => { @theme reference { --spacing-4: 1rem; --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05); - --inset-ring-thick: 100px; } @tailwind utilities; `, [ 'inset-y-shadow-sm', - 'inset-y-ring-thick', 'inset-y', 'inset-y--1', 'inset-y--1/2', @@ -479,12 +472,12 @@ test('start', async () => { css` @theme { --spacing-4: 1rem; - --inset-ringo-starr: 1940px; + --inset-shadowned: 1940px; } @tailwind utilities; `, [ - 'start-ringo-starr', + 'start-shadowned', 'start-auto', '-start-full', 'start-full', @@ -497,7 +490,7 @@ test('start', async () => { ).toMatchInlineSnapshot(` ":root { --spacing-4: 1rem; - --inset-ringo-starr: 1940px; + --inset-shadowned: 1940px; } .-start-4 { @@ -528,8 +521,8 @@ test('start', async () => { inset-inline-start: 100%; } - .start-ringo-starr { - inset-inline-start: var(--inset-ringo-starr); + .start-shadowned { + inset-inline-start: var(--inset-shadowned); }" `) expect( @@ -538,13 +531,11 @@ test('start', async () => { @theme reference { --spacing-4: 1rem; --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05); - --inset-ring-thick: 100px; } @tailwind utilities; `, [ 'start-shadow-sm', - 'start-ring-thick', 'start', 'start--1', 'start--1/2', @@ -568,12 +559,12 @@ test('end', async () => { css` @theme { --spacing-4: 1rem; - --inset-ringo-starr: 1940px; + --inset-shadowned: 1940px; } @tailwind utilities; `, [ - 'end-ringo-starr', + 'end-shadowned', 'end-auto', '-end-full', 'end-full', @@ -586,7 +577,7 @@ test('end', async () => { ).toMatchInlineSnapshot(` ":root { --spacing-4: 1rem; - --inset-ringo-starr: 1940px; + --inset-shadowned: 1940px; } .-end-4 { @@ -617,8 +608,8 @@ test('end', async () => { inset-inline-end: 100%; } - .end-ringo-starr { - inset-inline-end: var(--inset-ringo-starr); + .end-shadowned { + inset-inline-end: var(--inset-shadowned); }" `) expect( @@ -627,13 +618,11 @@ test('end', async () => { @theme reference { --spacing-4: 1rem; --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05); - --inset-ring-thick: 100px; } @tailwind utilities; `, [ 'end-shadow-sm', - 'end-ring-thick', 'end', 'end--1', 'end--1/2', @@ -657,13 +646,13 @@ test('top', async () => { css` @theme { --spacing-4: 1rem; - --inset-ringo-starr: 1940px; + --inset-shadowned: 1940px; } @tailwind utilities; `, [ - 'top-ringo-starr', + 'top-shadowned', 'top-auto', '-top-full', 'top-full', @@ -676,7 +665,7 @@ test('top', async () => { ).toMatchInlineSnapshot(` ":root { --spacing-4: 1rem; - --inset-ringo-starr: 1940px; + --inset-shadowned: 1940px; } .-top-4 { @@ -707,8 +696,8 @@ test('top', async () => { top: 100%; } - .top-ringo-starr { - top: var(--inset-ringo-starr); + .top-shadowned { + top: var(--inset-shadowned); }" `) expect( @@ -717,13 +706,11 @@ test('top', async () => { @theme reference { --spacing-4: 1rem; --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05); - --inset-ring-thick: 100px; } @tailwind utilities; `, [ 'top-shadow-sm', - 'top-ring-thick', 'top', 'top--1', 'top--1/2', @@ -747,12 +734,12 @@ test('right', async () => { css` @theme { --spacing-4: 1rem; - --inset-ringo-starr: 1940px; + --inset-shadowned: 1940px; } @tailwind utilities; `, [ - 'right-ringo-starr', + 'right-shadowned', 'right-auto', '-right-full', 'right-full', @@ -765,7 +752,7 @@ test('right', async () => { ).toMatchInlineSnapshot(` ":root { --spacing-4: 1rem; - --inset-ringo-starr: 1940px; + --inset-shadowned: 1940px; } .-right-4 { @@ -796,8 +783,8 @@ test('right', async () => { right: 100%; } - .right-ringo-starr { - right: var(--inset-ringo-starr); + .right-shadowned { + right: var(--inset-shadowned); }" `) expect( @@ -806,13 +793,11 @@ test('right', async () => { @theme reference { --spacing-4: 1rem; --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05); - --inset-ring-thick: 100px; } @tailwind utilities; `, [ 'right-shadow-sm', - 'right-ring-thick', 'right', 'right--1', 'right--1/2', @@ -836,12 +821,12 @@ test('bottom', async () => { css` @theme { --spacing-4: 1rem; - --inset-ringo-starr: 1940px; + --inset-shadowned: 1940px; } @tailwind utilities; `, [ - 'bottom-ringo-starr', + 'bottom-shadowned', 'bottom-auto', '-bottom-full', 'bottom-full', @@ -854,7 +839,7 @@ test('bottom', async () => { ).toMatchInlineSnapshot(` ":root { --spacing-4: 1rem; - --inset-ringo-starr: 1940px; + --inset-shadowned: 1940px; } .-bottom-4 { @@ -885,8 +870,8 @@ test('bottom', async () => { bottom: 100%; } - .bottom-ringo-starr { - bottom: var(--inset-ringo-starr); + .bottom-shadowned { + bottom: var(--inset-shadowned); }" `) expect( @@ -895,13 +880,11 @@ test('bottom', async () => { @theme reference { --spacing-4: 1rem; --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05); - --inset-ring-thick: 100px; } @tailwind utilities; `, [ 'bottom-shadow-sm', - 'bottom-ring-thick', 'bottom', 'bottom--1', 'bottom--1/2', @@ -925,12 +908,12 @@ test('left', async () => { css` @theme { --spacing-4: 1rem; - --inset-ringo-starr: 1940px; + --inset-shadowned: 1940px; } @tailwind utilities; `, [ - 'left-ringo-starr', + 'left-shadowned', 'left-auto', '-left-full', 'left-full', @@ -943,7 +926,7 @@ test('left', async () => { ).toMatchInlineSnapshot(` ":root { --spacing-4: 1rem; - --inset-ringo-starr: 1940px; + --inset-shadowned: 1940px; } .-left-4 { @@ -974,8 +957,8 @@ test('left', async () => { left: 100%; } - .left-ringo-starr { - left: var(--inset-ringo-starr); + .left-shadowned { + left: var(--inset-shadowned); }" `) expect( @@ -984,13 +967,11 @@ test('left', async () => { @theme reference { --spacing-4: 1rem; --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05); - --inset-ring-thick: 100px; } @tailwind utilities; `, [ 'left-shadow-sm', - 'left-ring-thick', 'left', 'left--1', 'left--1/2', @@ -15614,7 +15595,6 @@ test('inset-ring', async () => { css` @theme { --color-red-500: #ef4444; - --inset-ring-thick: 100px; } @tailwind utilities; `, @@ -15649,7 +15629,6 @@ test('inset-ring', async () => { 'inset-ring-1', 'inset-ring-2', 'inset-ring-4', - 'inset-ring-thick', 'inset-ring-[12px]', 'inset-ring-[length:var(--my-width)]', ], @@ -15657,7 +15636,6 @@ test('inset-ring', async () => { ).toMatchInlineSnapshot(` ":root { --color-red-500: #ef4444; - --inset-ring-thick: 100px; } .inset-ring { diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 192beb172418..f6b018fa0a41 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -23,7 +23,6 @@ type SuggestionDefinition = values?: string[] modifiers?: string[] valueThemeKeys?: ThemeKey[] - ignoredThemeKeys?: ThemeKey[] modifierThemeKeys?: ThemeKey[] hasDefaultValue?: boolean } @@ -204,8 +203,8 @@ export function createUtilities(theme: Theme) { * Register list of suggestions for a class */ function suggest(classRoot: string, defns: () => SuggestionDefinition[]) { - function* resolve(themeKeys: ThemeKey[], ignoredThemeKeys: ThemeKey[] = []) { - for (let value of theme.keysInNamespaces(themeKeys, ignoredThemeKeys)) { + function* resolve(themeKeys: ThemeKey[]) { + for (let value of theme.keysInNamespaces(themeKeys)) { yield value.replaceAll('_', '.') } } @@ -221,7 +220,7 @@ export function createUtilities(theme: Theme) { let values: (string | null)[] = [ ...(defn.values ?? []), - ...resolve(defn.valueThemeKeys ?? [], defn.ignoredThemeKeys), + ...resolve(defn.valueThemeKeys ?? []), ] let modifiers = [...(defn.modifiers ?? []), ...resolve(defn.modifierThemeKeys ?? [])] @@ -253,7 +252,6 @@ export function createUtilities(theme: Theme) { supportsNegative?: boolean supportsFractions?: boolean themeKeys?: ThemeKey[] - ignoredThemeKeys?: ThemeKey[] defaultValue?: string | null handleBareValue?: (value: NamedUtilityValue) => string | null handleNegativeBareValue?: (value: NamedUtilityValue) => string | null @@ -280,8 +278,7 @@ export function createUtilities(theme: Theme) { // `defaultValue` (for candidates like `grow` that have no theme values) // or a bare theme value (like `--radius` for `rounded`). No utility // will ever support both of these. - value = - desc.defaultValue ?? theme.resolve(null, desc.themeKeys ?? [], desc.ignoredThemeKeys) + value = desc.defaultValue ?? theme.resolve(null, desc.themeKeys ?? []) } else if (candidate.value.kind === 'arbitrary') { if (candidate.modifier) return value = candidate.value.value @@ -289,7 +286,6 @@ export function createUtilities(theme: Theme) { value = theme.resolve( candidate.value.fraction ?? candidate.value.value, desc.themeKeys ?? [], - desc.ignoredThemeKeys, ) // Automatically handle things like `w-1/2` without requiring `1/2` to @@ -325,7 +321,6 @@ export function createUtilities(theme: Theme) { { supportsNegative: desc.supportsNegative, valueThemeKeys: desc.themeKeys ?? [], - ignoredThemeKeys: desc.ignoredThemeKeys ?? [], hasDefaultValue: desc.defaultValue !== undefined && desc.defaultValue !== null, }, ]) @@ -385,11 +380,9 @@ export function createUtilities(theme: Theme) { { supportsNegative = false, supportsFractions = false, - ignoredThemeKeys = [], }: { supportsNegative?: boolean supportsFractions?: boolean - ignoredThemeKeys?: ThemeKey[] } = {}, ) { utilities.static(`${name}-px`, (candidate) => { @@ -399,7 +392,6 @@ export function createUtilities(theme: Theme) { let themeKeys = ([] as ThemeKey[]).concat(themeNamespace, '--spacing') functionalUtility(name, { themeKeys, - ignoredThemeKeys, supportsFractions, supportsNegative, handleBareValue: ({ value }) => { @@ -459,7 +451,6 @@ export function createUtilities(theme: Theme) { ], supportsNegative, valueThemeKeys: themeKeys, - ignoredThemeKeys: ignoredThemeKeys ?? [], }, ]) } @@ -536,7 +527,6 @@ export function createUtilities(theme: Theme) { spacingUtility(name, '--inset', (value) => [decl(property, value)], { supportsNegative: true, supportsFractions: true, - ignoredThemeKeys: ['--inset-ring', '--inset-shadow'], }) } @@ -2780,7 +2770,6 @@ export function createUtilities(theme: Theme) { candidate.value.value, ['--font'], ['--font-feature-settings', '--font-variation-settings'], - ['--font-weight', '--font-size'], ) if (value) { let [families, options = {}] = value From 57ddb17a6c775e346c8c82cfdb3936b4fc83400f Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Thu, 7 Nov 2024 09:42:04 -0500 Subject: [PATCH 2/2] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index bee7ca749dad..71aa0122c7c9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Ensure `--inset-ring=*` and `--inset-shadow-*` variables are ignored by `inset-*` utilities ([#14855](https://github.com/tailwindlabs/tailwindcss/pull/14855)) - Ensure `url(…)` containing special characters such as `;` or `{}` end up in one declaration ([#14879](https://github.com/tailwindlabs/tailwindcss/pull/14879)) - Ensure adjacent rules are merged together after handling nesting when generating optimized CSS ([#14873](https://github.com/tailwindlabs/tailwindcss/pull/14873)) +- Don't unset keys like `--inset-shadow-*` when unsetting keys like `--inset-*` ([#14906](https://github.com/tailwindlabs/tailwindcss/pull/14906)) - _Upgrade (experimental)_: Install `@tailwindcss/postcss` next to `tailwindcss` ([#14830](https://github.com/tailwindlabs/tailwindcss/pull/14830)) - _Upgrade (experimental)_: Remove whitespace around `,` separator when print arbitrary values ([#14838](https://github.com/tailwindlabs/tailwindcss/pull/14838)) - _Upgrade (experimental)_: Fix crash during upgrade when content globs escape root of project ([#14896](https://github.com/tailwindlabs/tailwindcss/pull/14896))