Rename --aspect-ratio theme key to --aspect

packages/tailwindcss/src/compat/apply-config-to-theme.test.ts

@@ -23,6 +23,10 @@ test('config values can be merged into the theme', () => {
             sm: '1234px',
           },
 
+          aspectRatio: {
+            retro: '4 / 3',
+          },
+
           boxShadow: {
             normal: '0 1px 3px black',
           },
@@ -75,13 +79,15 @@ test('config values can be merged into the theme', () => {
         },
       },
       base: '/root',
+      reference: false,
     },
   ])
   applyConfigToTheme(design, resolvedConfig, replacedThemeKeys)
 
   expect(theme.resolve('primary', ['--color'])).toEqual('#c0ffee')
   expect(theme.resolve('sm', ['--breakpoint'])).toEqual('1234px')
   expect(theme.resolve('normal', ['--shadow'])).toEqual('0 1px 3px black')
+  expect(theme.resolve('retro', ['--aspect'])).toEqual('4 / 3')
   expect(theme.resolve('sm', ['--radius'])).toEqual('0.33rem')
   expect(theme.resolve('blink', ['--animate'])).toEqual('blink 1s linear infinite')
   expect(theme.resolve('red-500', ['--color'])).toEqual('red')

packages/tailwindcss/src/compat/apply-config-to-theme.ts

@@ -148,6 +148,7 @@ export function keyPathToCssProperty(path: string[]) {
   path = structuredClone(path)
 
   if (path[0] === 'animation') path[0] = 'animate'
+  if (path[0] === 'aspectRatio') path[0] = 'aspect'
   if (path[0] === 'borderRadius') path[0] = 'radius'
   if (path[0] === 'boxShadow') path[0] = 'shadow'
   if (path[0] === 'colors') path[0] = 'color'

packages/tailwindcss/src/compat/config.test.ts

@@ -1534,6 +1534,9 @@ test('old theme values are merged with their renamed counterparts in the CSS the
         --animate-a: 1;
         --animate-b: 2;
 
+        --aspect-a: 1;
+        --aspect-b: 2;
+
         --container-a: 1;
         --container-b: 2;
 
@@ -1585,6 +1588,14 @@ test('old theme values are merged with their renamed counterparts in the CSS the
             expect(theme('animation.a')).toEqual('1')
             expect(theme('animation.b')).toEqual('2')
 
+            expect(theme('aspectRatio')).toMatchObject({
+              a: '1',
+              b: '2',
+            })
+
+            expect(theme('aspectRatio.a')).toEqual('1')
+            expect(theme('aspectRatio.b')).toEqual('2')
+
             expect(theme('boxShadow')).toMatchObject({
               a: '1',
               b: '2',

packages/tailwindcss/src/compat/config/create-compat-config.ts

@@ -26,6 +26,10 @@ export function createCompatConfig(cssTheme: Theme): UserConfig {
           ...theme('animate', {}),
         }),
 
+        aspectRatio: ({ theme }) => ({
+          ...theme('aspect', {}),
+        }),
+
         borderRadius: ({ theme }) => ({
           ...theme('radius', {}),
         }),

packages/tailwindcss/src/utilities.ts

@@ -830,7 +830,7 @@ export function createUtilities(theme: Theme) {
   staticUtility('aspect-square', [['aspect-ratio', '1 / 1']])
   staticUtility('aspect-video', [['aspect-ratio', '16 / 9']])
   functionalUtility('aspect', {
-    themeKeys: ['--aspect-ratio'],
+    themeKeys: ['--aspect'],
     handleBareValue: ({ fraction }) => {
       if (fraction === null) return null
       let [lhs, rhs] = segment(fraction, '/')