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

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Resolve `borderRadius` when using dot notation inside the `theme()` function.
 
 ## [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(