From 8309b4726641a256517c00ed7cfa4497f636746a Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 11 Mar 2024 14:02:18 -0400
Subject: [PATCH] Remove static radius values from theme (#13186)

* Remove static radius values from theme

* Update snapshots

* Update changelog

* Use static utilities + a big loop

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
---
 CHANGELOG.md                                  |   4 +
 .../src/__snapshots__/index.test.ts.snap      |   4 +-
 .../src/__snapshots__/index.test.ts.snap      |   4 +-
 .../__snapshots__/intellisense.test.ts.snap   |  30 +++++
 packages/tailwindcss/src/utilities.test.ts    |  46 +++----
 packages/tailwindcss/src/utilities.ts         | 126 +++++-------------
 packages/tailwindcss/theme.css                |   4 +-
 7 files changed, 91 insertions(+), 127 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a3f984fc0..5a59060fd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Ensure `scale-*` utilities support percentage values ([#13182](https://github.com/tailwindlabs/tailwindcss/pull/13182))
 
+### Changed
+
+- Replace `--radius-none` and `--radius-full` theme values with static `rounded-none` and `rounded-full` utilities ([#13186](https://github.com/tailwindlabs/tailwindcss/pull/13186))
+
 ## [4.0.0-alpha.7] - 2024-03-08
 
 ### Added
diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index fd246450b..15830a4ef 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -271,10 +271,8 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --blur-xl: 24px;
     --blur-2xl: 40px;
     --blur-3xl: 64px;
-    --radius-none: 0px;
-    --radius-full: 9999px;
-    --radius-sm: .125rem;
     --radius: .25rem;
+    --radius-sm: .125rem;
     --radius-md: .375rem;
     --radius-lg: .5rem;
     --radius-xl: .75rem;
diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
index f8f0e8685..ccaf12fe7 100644
--- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -270,10 +270,8 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --blur-xl: 24px;
   --blur-2xl: 40px;
   --blur-3xl: 64px;
-  --radius-none: 0px;
-  --radius-full: 9999px;
-  --radius-sm: .125rem;
   --radius: .25rem;
+  --radius-sm: .125rem;
   --radius-md: .375rem;
   --radius-lg: .5rem;
   --radius-xl: .75rem;
diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index 017025da9..f4f1ad0bf 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -1244,6 +1244,36 @@ exports[`getClassList 1`] = `
   "rotate-45",
   "rotate-6",
   "rotate-90",
+  "rounded-b-full",
+  "rounded-b-none",
+  "rounded-bl-full",
+  "rounded-bl-none",
+  "rounded-br-full",
+  "rounded-br-none",
+  "rounded-e-full",
+  "rounded-e-none",
+  "rounded-ee-full",
+  "rounded-ee-none",
+  "rounded-es-full",
+  "rounded-es-none",
+  "rounded-full",
+  "rounded-l-full",
+  "rounded-l-none",
+  "rounded-none",
+  "rounded-r-full",
+  "rounded-r-none",
+  "rounded-s-full",
+  "rounded-s-none",
+  "rounded-se-full",
+  "rounded-se-none",
+  "rounded-ss-full",
+  "rounded-ss-none",
+  "rounded-t-full",
+  "rounded-t-none",
+  "rounded-tl-full",
+  "rounded-tl-none",
+  "rounded-tr-full",
+  "rounded-tr-none",
   "row-auto",
   "row-end-1",
   "row-end-10",
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 5d92d89fb..0873766a4 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -5787,8 +5787,6 @@ test('rounded', () => {
     compileCss(
       css`
         @theme {
-          --radius-none: 0px;
-          --radius-full: 9999px;
           --radius-sm: 0.125rem;
           --radius: 0.25rem;
         }
@@ -5798,8 +5796,6 @@ test('rounded', () => {
     ),
   ).toMatchInlineSnapshot(`
     ":root {
-      --radius-none: 0px;
-      --radius-full: 9999px;
       --radius-sm: .125rem;
       --radius: .25rem;
     }
@@ -5813,7 +5809,7 @@ test('rounded', () => {
     }
 
     .rounded-full {
-      border-radius: 9999px;
+      border-radius: 3.40282e38px;
     }
 
     .rounded-none {
@@ -5862,8 +5858,8 @@ test('rounded-s', () => {
     }
 
     .rounded-s-full {
-      border-start-start-radius: 9999px;
-      border-end-start-radius: 9999px;
+      border-start-start-radius: 3.40282e38px;
+      border-end-start-radius: 3.40282e38px;
     }
 
     .rounded-s-none {
@@ -5914,8 +5910,8 @@ test('rounded-e', () => {
     }
 
     .rounded-e-full {
-      border-start-end-radius: 9999px;
-      border-end-end-radius: 9999px;
+      border-start-end-radius: 3.40282e38px;
+      border-end-end-radius: 3.40282e38px;
     }
 
     .rounded-e-none {
@@ -5966,8 +5962,8 @@ test('rounded-t', () => {
     }
 
     .rounded-t-full {
-      border-top-left-radius: 9999px;
-      border-top-right-radius: 9999px;
+      border-top-left-radius: 3.40282e38px;
+      border-top-right-radius: 3.40282e38px;
     }
 
     .rounded-t-none {
@@ -6018,8 +6014,8 @@ test('rounded-r', () => {
     }
 
     .rounded-r-full {
-      border-top-right-radius: 9999px;
-      border-bottom-right-radius: 9999px;
+      border-top-right-radius: 3.40282e38px;
+      border-bottom-right-radius: 3.40282e38px;
     }
 
     .rounded-r-none {
@@ -6070,8 +6066,8 @@ test('rounded-b', () => {
     }
 
     .rounded-b-full {
-      border-bottom-right-radius: 9999px;
-      border-bottom-left-radius: 9999px;
+      border-bottom-right-radius: 3.40282e38px;
+      border-bottom-left-radius: 3.40282e38px;
     }
 
     .rounded-b-none {
@@ -6122,8 +6118,8 @@ test('rounded-l', () => {
     }
 
     .rounded-l-full {
-      border-top-left-radius: 9999px;
-      border-bottom-left-radius: 9999px;
+      border-top-left-radius: 3.40282e38px;
+      border-bottom-left-radius: 3.40282e38px;
     }
 
     .rounded-l-none {
@@ -6172,7 +6168,7 @@ test('rounded-ss', () => {
     }
 
     .rounded-ss-full {
-      border-start-start-radius: 9999px;
+      border-start-start-radius: 3.40282e38px;
     }
 
     .rounded-ss-none {
@@ -6225,7 +6221,7 @@ test('rounded-se', () => {
     }
 
     .rounded-se-full {
-      border-start-end-radius: 9999px;
+      border-start-end-radius: 3.40282e38px;
     }
 
     .rounded-se-none {
@@ -6278,7 +6274,7 @@ test('rounded-ee', () => {
     }
 
     .rounded-ee-full {
-      border-end-end-radius: 9999px;
+      border-end-end-radius: 3.40282e38px;
     }
 
     .rounded-ee-none {
@@ -6331,7 +6327,7 @@ test('rounded-es', () => {
     }
 
     .rounded-es-full {
-      border-end-start-radius: 9999px;
+      border-end-start-radius: 3.40282e38px;
     }
 
     .rounded-es-none {
@@ -6384,7 +6380,7 @@ test('rounded-tl', () => {
     }
 
     .rounded-tl-full {
-      border-top-left-radius: 9999px;
+      border-top-left-radius: 3.40282e38px;
     }
 
     .rounded-tl-none {
@@ -6437,7 +6433,7 @@ test('rounded-tr', () => {
     }
 
     .rounded-tr-full {
-      border-top-right-radius: 9999px;
+      border-top-right-radius: 3.40282e38px;
     }
 
     .rounded-tr-none {
@@ -6490,7 +6486,7 @@ test('rounded-br', () => {
     }
 
     .rounded-br-full {
-      border-bottom-right-radius: 9999px;
+      border-bottom-right-radius: 3.40282e38px;
     }
 
     .rounded-br-none {
@@ -6543,7 +6539,7 @@ test('rounded-bl', () => {
     }
 
     .rounded-bl-full {
-      border-bottom-left-radius: 9999px;
+      border-bottom-left-radius: 3.40282e38px;
     }
 
     .rounded-bl-none {
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 87589a7ce..e50f80c2b 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -1954,99 +1954,39 @@ export function createUtilities(theme: Theme) {
   staticUtility('break-all', [['word-break', 'break-all']])
   staticUtility('break-keep', [['word-break', 'break-keep']])
 
-  // rounded-*
-  functionalUtility('rounded', {
-    themeKeys: ['--radius'],
-    handle: (value) => [decl('border-radius', value)],
-  })
-
-  functionalUtility('rounded-s', {
-    themeKeys: ['--radius'],
-    handle: (value) => [
-      decl('border-start-start-radius', value),
-      decl('border-end-start-radius', value),
-    ],
-  })
-
-  functionalUtility('rounded-e', {
-    themeKeys: ['--radius'],
-    handle: (value) => [
-      decl('border-start-end-radius', value),
-      decl('border-end-end-radius', value),
-    ],
-  })
-
-  functionalUtility('rounded-t', {
-    themeKeys: ['--radius'],
-    handle: (value) => [
-      decl('border-top-left-radius', value),
-      decl('border-top-right-radius', value),
-    ],
-  })
-
-  functionalUtility('rounded-r', {
-    themeKeys: ['--radius'],
-    handle: (value) => [
-      decl('border-top-right-radius', value),
-      decl('border-bottom-right-radius', value),
-    ],
-  })
-
-  functionalUtility('rounded-b', {
-    themeKeys: ['--radius'],
-    handle: (value) => [
-      decl('border-bottom-right-radius', value),
-      decl('border-bottom-left-radius', value),
-    ],
-  })
-
-  functionalUtility('rounded-l', {
-    themeKeys: ['--radius'],
-    handle: (value) => [
-      decl('border-top-left-radius', value),
-      decl('border-bottom-left-radius', value),
-    ],
-  })
-
-  functionalUtility('rounded-ss', {
-    themeKeys: ['--radius'],
-    handle: (value) => [decl('border-start-start-radius', value)],
-  })
-
-  functionalUtility('rounded-se', {
-    themeKeys: ['--radius'],
-    handle: (value) => [decl('border-start-end-radius', value)],
-  })
-
-  functionalUtility('rounded-ee', {
-    themeKeys: ['--radius'],
-    handle: (value) => [decl('border-end-end-radius', value)],
-  })
-
-  functionalUtility('rounded-es', {
-    themeKeys: ['--radius'],
-    handle: (value) => [decl('border-end-start-radius', value)],
-  })
-
-  functionalUtility('rounded-tl', {
-    themeKeys: ['--radius'],
-    handle: (value) => [decl('border-top-left-radius', value)],
-  })
-
-  functionalUtility('rounded-tr', {
-    themeKeys: ['--radius'],
-    handle: (value) => [decl('border-top-right-radius', value)],
-  })
-
-  functionalUtility('rounded-br', {
-    themeKeys: ['--radius'],
-    handle: (value) => [decl('border-bottom-right-radius', value)],
-  })
-
-  functionalUtility('rounded-bl', {
-    themeKeys: ['--radius'],
-    handle: (value) => [decl('border-bottom-left-radius', value)],
-  })
+  {
+    // border-radius
+    for (let [root, properties] of [
+      ['rounded', ['border-radius']],
+      ['rounded-s', ['border-start-start-radius', 'border-end-start-radius']],
+      ['rounded-e', ['border-start-end-radius', 'border-end-end-radius']],
+      ['rounded-t', ['border-top-left-radius', 'border-top-right-radius']],
+      ['rounded-r', ['border-top-right-radius', 'border-bottom-right-radius']],
+      ['rounded-b', ['border-bottom-right-radius', 'border-bottom-left-radius']],
+      ['rounded-l', ['border-top-left-radius', 'border-bottom-left-radius']],
+      ['rounded-ss', ['border-start-start-radius']],
+      ['rounded-se', ['border-start-end-radius']],
+      ['rounded-ee', ['border-end-end-radius']],
+      ['rounded-es', ['border-end-start-radius']],
+      ['rounded-tl', ['border-top-left-radius']],
+      ['rounded-tr', ['border-top-right-radius']],
+      ['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)),
+      })
+    }
+  }
 
   staticUtility('border-solid', [
     ['--tw-border-style', 'solid'],
diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css
index d751f895b..1c05262c7 100644
--- a/packages/tailwindcss/theme.css
+++ b/packages/tailwindcss/theme.css
@@ -278,10 +278,8 @@
   --blur-3xl: 64px;
 
   /* Radii */
-  --radius-none: 0px;
-  --radius-full: 9999px;
-  --radius-sm: 0.125rem;
   --radius: 0.25rem;
+  --radius-sm: 0.125rem;
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
   --radius-xl: 0.75rem;