Explicitly ignore --inset-shadow and --inset-ring variables in inset handler (#14447)

Resolves #14440.

This PR fixes an issue where registering a custom `inset-shadow-*`
utility value in your theme like this:

```css
@theme {
  --inset-shadow-potato: inset 0px 2px 6px #7a4724;
}
```

…mistakenly generates both an `inset-shadow-*` and `inset-*` utility
with that value:

```css
.inset-shadow-potato {
  inset: inset 0px 2px 6px #7a4724;
}

.inset-shadow-potato {
  box-shadow: inset 0px 2px 6px #7a4724;
}
```

This replaces #14445 which turns out to not be the ideal solution.

Now we just explicitly ignore variables like `--inset-shadow-*` and
`--inset-ring-*` in the `inset` handler. Kind of a gross patch but I can
live with it because the whole existence of the `--inset-*` key is kind
of a backwards compatibility thing anyways.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Philipp Spiess <hello@philippspiess.com>

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
 

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 {

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'],