Proposal: Allow overwriting static utilities that have a namespace

Author: philipp-spiess

packages/tailwindcss/src/utilities.test.ts

@@ -9683,6 +9683,25 @@ test('rounded', async () => {
       border-radius: var(--radius-sm);
     }"
   `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --radius-full: 99999px;
+        }
+        @tailwind utilities;
+      `,
+      ['rounded-full'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --radius-full: 99999px;
+    }
+
+    .rounded-full {
+      border-radius: var(--radius-full);
+    }"
+  `)
   expect(
     await run([
       '-rounded',
@@ -9858,15 +9877,11 @@ test('rounded-t', async () => {
     }
 
     .rounded-t-full {
-      border-top-left-radius: 3.40282e38px;
-      border-top-right-radius: 3.40282e38px;
       border-top-left-radius: var(--radius-full);
       border-top-right-radius: var(--radius-full);
     }
 
     .rounded-t-none {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
       border-top-left-radius: var(--radius-none);
       border-top-right-radius: var(--radius-none);
     }
@@ -9925,15 +9940,11 @@ test('rounded-r', async () => {
     }
 
     .rounded-r-full {
-      border-top-right-radius: 3.40282e38px;
-      border-bottom-right-radius: 3.40282e38px;
       border-top-right-radius: var(--radius-full);
       border-bottom-right-radius: var(--radius-full);
     }
 
     .rounded-r-none {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
       border-top-right-radius: var(--radius-none);
       border-bottom-right-radius: var(--radius-none);
     }
@@ -9992,15 +10003,11 @@ test('rounded-b', async () => {
     }
 
     .rounded-b-full {
-      border-bottom-right-radius: 3.40282e38px;
-      border-bottom-left-radius: 3.40282e38px;
       border-bottom-right-radius: var(--radius-full);
       border-bottom-left-radius: var(--radius-full);
     }
 
     .rounded-b-none {
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
       border-bottom-right-radius: var(--radius-none);
       border-bottom-left-radius: var(--radius-none);
     }
@@ -10059,15 +10066,11 @@ test('rounded-l', async () => {
     }
 
     .rounded-l-full {
-      border-top-left-radius: 3.40282e38px;
-      border-bottom-left-radius: 3.40282e38px;
       border-top-left-radius: var(--radius-full);
       border-bottom-left-radius: var(--radius-full);
     }
 
     .rounded-l-none {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
       border-top-left-radius: var(--radius-none);
       border-bottom-left-radius: var(--radius-none);
     }
@@ -10356,12 +10359,10 @@ test('rounded-tl', async () => {
     }
 
     .rounded-tl-full {
-      border-top-left-radius: 3.40282e38px;
       border-top-left-radius: var(--radius-full);
     }
 
     .rounded-tl-none {
-      border-top-left-radius: 0;
       border-top-left-radius: var(--radius-none);
     }
 
@@ -10416,12 +10417,10 @@ test('rounded-tr', async () => {
     }
 
     .rounded-tr-full {
-      border-top-right-radius: 3.40282e38px;
       border-top-right-radius: var(--radius-full);
     }
 
     .rounded-tr-none {
-      border-top-right-radius: 0;
       border-top-right-radius: var(--radius-none);
     }
 
@@ -10476,12 +10475,10 @@ test('rounded-br', async () => {
     }
 
     .rounded-br-full {
-      border-bottom-right-radius: 3.40282e38px;
       border-bottom-right-radius: var(--radius-full);
     }
 
     .rounded-br-none {
-      border-bottom-right-radius: 0;
       border-bottom-right-radius: var(--radius-none);
     }
 
@@ -10536,12 +10533,10 @@ test('rounded-bl', async () => {
     }
 
     .rounded-bl-full {
-      border-bottom-left-radius: 3.40282e38px;
       border-bottom-left-radius: var(--radius-full);
     }
 
     .rounded-bl-none {
-      border-bottom-left-radius: 0;
       border-bottom-left-radius: var(--radius-none);
     }
 

packages/tailwindcss/src/utilities.ts

@@ -371,6 +371,7 @@ export function createUtilities(theme: Theme) {
     supportsFractions?: boolean
     themeKeys?: ThemeKey[]
     defaultValue?: string | null
+    fallbacks?: Record<string, AstNode[]>
     handleBareValue?: (value: NamedUtilityValue) => string | null
     handleNegativeBareValue?: (value: NamedUtilityValue) => string | null
     handle: (value: string, dataType: string | null) => AstNode[] | undefined
@@ -427,6 +428,14 @@ export function createUtilities(theme: Theme) {
             value = desc.handleBareValue(candidate.value)
             if (!value?.includes('/') && candidate.modifier) return
           }
+
+          if (value === null && desc.fallbacks) {
+            let fallback = desc.fallbacks[candidate.value.value]
+            if (fallback) {
+              if (candidate.modifier) return
+              return fallback
+            }
+          }
         }
 
         // If there is no value, don't generate any rules.
@@ -2119,17 +2128,13 @@ export function createUtilities(theme: Theme) {
       ['rounded-br', ['border-bottom-right-radius']],
       ['rounded-bl', ['border-bottom-left-radius']],
     ] as const) {
-      staticUtility(
-        `${root}-none`,
-        properties.map((property) => [property, '0']),
-      )
-      staticUtility(
-        `${root}-full`,
-        properties.map((property) => [property, 'calc(infinity * 1px)']),
-      )
       functionalUtility(root, {
         themeKeys: ['--radius'],
         handle: (value) => properties.map((property) => decl(property, value)),
+        fallbacks: {
+          none: properties.map((property) => decl(property, '0')),
+          full: properties.map((property) => decl(property, 'calc(infinity * 1px)')),
+        },
       })
     }
   }