Resolve borderRadius when using dot notation inside the theme() function (#14436)

Fixes an issue where `borderRadius` was not properly upgraded when using
it in the `theme()` function like this:

```
rounded-[theme(borderRadius.lg)]
```

---------

Co-authored-by: Jordan Pittman <[email protected]>
Co-authored-by: Adam Wathan <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Support `borderRadius.*` as an alias for `--radius-*` when using dot notation inside the `theme()` function ([#14436](https://github.com/tailwindlabs/tailwindcss/pull/14436))
 
 ## [4.0.0-alpha.24] - 2024-09-11
 

packages/tailwindcss/src/compat/apply-compat-hooks.ts

@@ -278,6 +278,7 @@ let themeUpgradeKeys = {
   '--background-opacity': '--opacity',
   '--border-color': '--color',
   '--border-opacity': '--opacity',
+  '--border-radius': '--radius',
   '--border-spacing': '--spacing',
   '--box-shadow-color': '--color',
   '--caret-color': '--color',

packages/tailwindcss/src/css-functions.test.ts

@@ -241,6 +241,27 @@ describe('theme function', () => {
         `)
       })
 
+      test('theme(borderRadius.lg)', async () => {
+        expect(
+          await compileCss(css`
+            @theme {
+              --radius-lg: 0.5rem;
+            }
+            .radius {
+              border-radius: theme(borderRadius.lg);
+            }
+          `),
+        ).toMatchInlineSnapshot(`
+          ":root {
+            --radius-lg: .5rem;
+          }
+
+          .radius {
+            border-radius: .5rem;
+          }"
+        `)
+      })
+
       describe('for v3 compatibility', () => {
         test('theme(blur.DEFAULT)', async () => {
           expect(