diff --git a/CHANGELOG.md b/CHANGELOG.md index e9bbf948f7d9..896c9d3ab9ea 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Ensure individual variants from groups are always sorted earlier than stacked variants from the same groups ([#14431](https://github.com/tailwindlabs/tailwindcss/pull/14431)) - Allow `anchor-size(…)` in arbitrary values ([#14394](https://github.com/tailwindlabs/tailwindcss/pull/14394)) - Skip candidates with invalid `theme()` calls ([#14437](https://github.com/tailwindlabs/tailwindcss/pull/14437)) +- Don't generate `inset-*` utilities for `--inset-shadow-*` and `--inset-ring-*` theme values ([#14447](https://github.com/tailwindlabs/tailwindcss/pull/14447)) ## [4.0.0-alpha.24] - 2024-09-11 diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 4e272d029207..5a48fce86e81 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -14143,14 +14143,6 @@ test('inset-shadow', async () => { --inset-shadow-sm: inset 0 1px 1px #0000000d; } - .inset-shadow { - inset: var(--inset-shadow, inset 0 2px 4px #0000000d); - } - - .inset-shadow-sm { - inset: var(--inset-shadow-sm, inset 0 1px 1px #0000000d); - } - .inset-shadow { --tw-inset-shadow: inset 0 2px 4px #0000000d; --tw-inset-shadow-colored: inset 0 2px 4px var(--tw-inset-shadow-color); @@ -14622,6 +14614,7 @@ test('inset-ring', async () => { css` @theme { --color-red-500: #ef4444; + --inset-ring-thick: 100px; } @tailwind utilities; `, @@ -14656,6 +14649,7 @@ test('inset-ring', async () => { 'inset-ring-1', 'inset-ring-2', 'inset-ring-4', + 'inset-ring-thick', 'inset-ring-[12px]', 'inset-ring-[length:--my-width]', ], @@ -14663,6 +14657,7 @@ 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 f05880a7f895..f3414ba13c7b 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -428,12 +428,49 @@ export function createUtilities(theme: Theme) { let value = candidate.negative ? '-100%' : '100%' return [decl('inset', value)] }) - functionalUtility('inset', { - supportsNegative: true, - supportsFractions: true, - themeKeys: ['--inset', '--spacing'], - handle: (value) => [decl('inset', value)], + utilities.functional('inset', (candidate) => { + if (!candidate.value) return + + let value + if (candidate.value.kind === 'arbitrary') { + if (candidate.modifier) return + value = candidate.value.value + } else { + // We need to make sure variables like `--inset-shadow-sm` and + // `--inset-ring-thick` don't mistakenly generate utilities for the + // `inset` property. + if ( + candidate.value.value === 'ring' || + candidate.value.value === 'shadow' || + candidate.value.value.startsWith('ring-') || + candidate.value.value.startsWith('shadow-') + ) { + value = theme.resolve(candidate.value.fraction ?? candidate.value.value, ['--spacing']) + } else { + value = theme.resolve(candidate.value.fraction ?? candidate.value.value, [ + '--inset', + '--spacing', + ]) + } + + if (!value && candidate.value.fraction) { + let [lhs, rhs] = segment(candidate.value.fraction, '/') + if (!Number.isInteger(Number(lhs)) || !Number.isInteger(Number(rhs))) return + value = `calc(${candidate.value.fraction} * 100%)` + } + + if (!value) return + } + value = withNegative(value, candidate) + return [decl('inset', value)] }) + suggest('inset', () => [ + { + supportsNegative: true, + valueThemeKeys: ['--inset', '--spacing'], + hasDefaultValue: false, + }, + ]) staticUtility('inset-x-auto', [ ['--tw-sort', 'inset-inline'],