From 7da76ef36ce6263cd299b7496fea22d81c2a2fb3 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 28 Aug 2024 18:05:01 +0200 Subject: [PATCH 1/2] Remove named opacity support for color opacity modifier --- packages/tailwindcss/src/compile.ts | 2 +- packages/tailwindcss/src/utilities.test.ts | 19 ++-------- packages/tailwindcss/src/utilities.ts | 43 ++++++++-------------- 3 files changed, 20 insertions(+), 44 deletions(-) diff --git a/packages/tailwindcss/src/compile.ts b/packages/tailwindcss/src/compile.ts index 5b0d726ddd04..6450a288a073 100644 --- a/packages/tailwindcss/src/compile.ts +++ b/packages/tailwindcss/src/compile.ts @@ -235,7 +235,7 @@ function compileBaseUtility(candidate: Candidate, designSystem: DesignSystem) { // Assumption: If an arbitrary property has a modifier, then we assume it // is an opacity modifier. if (candidate.modifier) { - value = asColor(value, candidate.modifier, designSystem.theme) + value = asColor(value, candidate.modifier) } if (value === null) return [] diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 5ce50e95b800..4e272d029207 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -9610,28 +9610,15 @@ test('bg', async () => { expect( await compileCss( css` - @theme { + @theme reference { --opacity-half: 0.5; --opacity-custom: var(--custom-opacity); } @tailwind utilities; `, - ['bg-current/half', 'bg-current/custom'], + ['bg-current/half', 'bg-current/custom', '[color:red]/half'], ), - ).toMatchInlineSnapshot(` - ":root { - --opacity-half: .5; - --opacity-custom: var(--custom-opacity); - } - - .bg-current\\/custom { - background-color: color-mix(in srgb, currentColor calc(var(--opacity-custom, var(--custom-opacity)) * 100%), transparent); - } - - .bg-current\\/half { - background-color: color-mix(in srgb, currentColor calc(var(--opacity-half, .5) * 100%), transparent); - }" - `) + ).toEqual('') }) test('from', async () => { diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 650c654f7220..dfb40ea10aa9 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -129,24 +129,13 @@ export function withAlpha(value: string, alpha: string): string { /** * Resolve a color value + optional opacity modifier to a final color. */ -export function asColor( - value: string, - modifier: CandidateModifier | null, - theme: Theme, -): string | null { +export function asColor(value: string, modifier: CandidateModifier | null): string | null { if (!modifier) return value if (modifier.kind === 'arbitrary') { return withAlpha(value, modifier.value) } - // Check if the modifier exists in the `opacity` theme configuration and use - // that value if so. - let alpha = theme.resolve(modifier.value, ['--opacity']) - if (alpha) { - return withAlpha(value, alpha) - } - if (Number.isNaN(Number(modifier.value))) { return null } @@ -208,7 +197,7 @@ function resolveThemeColor( } } - return value ? asColor(value, candidate.modifier, theme) : null + return value ? asColor(value, candidate.modifier) : null } export function createUtilities(theme: Theme) { @@ -360,7 +349,7 @@ export function createUtilities(theme: Theme) { value = candidate.value.value // Apply an opacity modifier to the value if appropriate. - value = asColor(value, candidate.modifier, theme) + value = asColor(value, candidate.modifier) } else { value = resolveThemeColor(candidate, theme, desc.themeKeys) } @@ -2241,7 +2230,7 @@ export function createUtilities(theme: Theme) { return [borderProperties(), ...decls] } default: { - value = asColor(value, candidate.modifier, theme) + value = asColor(value, candidate.modifier) if (value === null) return return desc.color(value) @@ -2549,7 +2538,7 @@ export function createUtilities(theme: Theme) { return [decl('background-image', value)] } default: { - value = asColor(value, candidate.modifier, theme) + value = asColor(value, candidate.modifier) if (value === null) return return [decl('background-color', value)] @@ -2625,7 +2614,7 @@ export function createUtilities(theme: Theme) { return desc.position(value) } default: { - value = asColor(value, candidate.modifier, theme) + value = asColor(value, candidate.modifier) if (value === null) return return desc.color(value) @@ -2763,7 +2752,7 @@ export function createUtilities(theme: Theme) { if (candidate.negative || !candidate.value) return if (candidate.value.kind === 'arbitrary') { - let value = asColor(candidate.value.value, candidate.modifier, theme) + let value = asColor(candidate.value.value, candidate.modifier) if (value === null) return return [decl('fill', value)] } @@ -2801,7 +2790,7 @@ export function createUtilities(theme: Theme) { return [decl('stroke-width', value)] } default: { - value = asColor(candidate.value.value, candidate.modifier, theme) + value = asColor(candidate.value.value, candidate.modifier) if (value === null) return return [decl('stroke', value)] @@ -3099,7 +3088,7 @@ export function createUtilities(theme: Theme) { return [decl('text-decoration-thickness', value)] } default: { - value = asColor(value, candidate.modifier, theme) + value = asColor(value, candidate.modifier) if (value === null) return return [decl('text-decoration-color', value)] @@ -3936,7 +3925,7 @@ export function createUtilities(theme: Theme) { ] } default: { - value = asColor(value, candidate.modifier, theme) + value = asColor(value, candidate.modifier) if (value === null) return return [decl('outline-color', value)] @@ -4068,7 +4057,7 @@ export function createUtilities(theme: Theme) { return [decl('font-size', value)] } default: { - value = asColor(value, candidate.modifier, theme) + value = asColor(value, candidate.modifier) if (value === null) return return [decl('color', value)] @@ -4184,7 +4173,7 @@ export function createUtilities(theme: Theme) { switch (type) { case 'color': { - value = asColor(value, candidate.modifier, theme) + value = asColor(value, candidate.modifier) if (value === null) return return [ @@ -4280,7 +4269,7 @@ export function createUtilities(theme: Theme) { switch (type) { case 'color': { - value = asColor(value, candidate.modifier, theme) + value = asColor(value, candidate.modifier) if (value === null) return return [ @@ -4392,7 +4381,7 @@ export function createUtilities(theme: Theme) { ] } default: { - value = asColor(value, candidate.modifier, theme) + value = asColor(value, candidate.modifier) if (value === null) return return [decl('--tw-ring-color', value)] @@ -4468,7 +4457,7 @@ export function createUtilities(theme: Theme) { ] } default: { - value = asColor(value, candidate.modifier, theme) + value = asColor(value, candidate.modifier) if (value === null) return return [decl('--tw-inset-ring-color', value)] @@ -4533,7 +4522,7 @@ export function createUtilities(theme: Theme) { ] } default: { - value = asColor(value, candidate.modifier, theme) + value = asColor(value, candidate.modifier) if (value === null) return return [decl('--tw-ring-offset-color', value)] From c95d50107ce46ef2801b00186192ce8748d0c987 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 28 Aug 2024 18:08:27 +0200 Subject: [PATCH 2/2] Add changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a30cd69141c0..b8fd24c0e064 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix fallback values when using the CSS `theme()` function ([#14262](https://github.com/tailwindlabs/tailwindcss/pull/14262)) - Fix support for declaration fallbacks in plugins ([#14265](https://github.com/tailwindlabs/tailwindcss/pull/14265)) +## Changed + +- Remove named opacity support for color opacity modifiers ([#14278](https://github.com/tailwindlabs/tailwindcss/pull/14278)) + ## [4.0.0-alpha.20] - 2024-08-23 ### Added