diff --git a/CHANGELOG.md b/CHANGELOG.md index 250c9bff2fb4..4ccd72524320 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix missing `shadow-none` suggestion in IntelliSense ([#15342](https://github.com/tailwindlabs/tailwindcss/pull/15342)) - Optimize AST before printing for IntelliSense ([#15347](https://github.com/tailwindlabs/tailwindcss/pull/15347)) +### Changed + +- Rename `--aspect-ratio-*` theme key to `--aspect-*` ([#15365](https://github.com/tailwindlabs/tailwindcss/pull/15365)) +- Derive `aspect-video` utility from theme ([#15365](https://github.com/tailwindlabs/tailwindcss/pull/15365)) + ## [4.0.0-beta.6] - 2024-12-06 ### Fixed @@ -752,4 +757,3 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Move the CLI into a separate `@tailwindcss/cli` package ([#13095](https://github.com/tailwindlabs/tailwindcss/pull/13095)) ## [4.0.0-alpha.1] - 2024-03-06 - diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index f5bed31afce5..cf0794ff2eed 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -359,6 +359,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; + --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index 78e3eee55b53..4c8a9f5a93c7 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -358,6 +358,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; + --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts index ca33f49e3157..23f5c46cb720 100644 --- a/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts +++ b/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,6 +79,7 @@ test('config values can be merged into the theme', () => { }, }, base: '/root', + reference: false, }, ]) applyConfigToTheme(design, resolvedConfig, replacedThemeKeys) @@ -82,6 +87,7 @@ test('config values can be merged into the theme', () => { 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') diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.ts index ad46e3b3544e..3f18711c7f16 100644 --- a/packages/tailwindcss/src/compat/apply-config-to-theme.ts +++ b/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' diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts index 3747f8ae4f5d..2d0ee4b7ab87 100644 --- a/packages/tailwindcss/src/compat/config.test.ts +++ b/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', diff --git a/packages/tailwindcss/src/compat/config/create-compat-config.ts b/packages/tailwindcss/src/compat/config/create-compat-config.ts index 6dd198afc9a3..39bbec07d226 100644 --- a/packages/tailwindcss/src/compat/config/create-compat-config.ts +++ b/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', {}), }), diff --git a/packages/tailwindcss/src/intellisense.test.ts b/packages/tailwindcss/src/intellisense.test.ts index 90c5a5bad273..b32883d5cbd1 100644 --- a/packages/tailwindcss/src/intellisense.test.ts +++ b/packages/tailwindcss/src/intellisense.test.ts @@ -11,6 +11,7 @@ function loadDesignSystem() { theme.add('--colors-red-500', 'red') theme.add('--colors-blue-500', 'blue') theme.add('--breakpoint-sm', '640px') + theme.add('--aspect-video', '16 / 9') theme.add('--font-sans', 'sans-serif') theme.add('--font-weight-superbold', '900') theme.add('--text-xs', '0.75rem') diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index d8cd24c026f5..967da7221aba 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -2485,8 +2485,22 @@ test('field-sizing', async () => { }) test('aspect-ratio', async () => { - expect(await run(['aspect-video', 'aspect-[10/9]', 'aspect-4/3'])).toMatchInlineSnapshot(` - ".aspect-4\\/3 { + expect( + await compileCss( + css` + @theme { + --aspect-video: 16 / 9; + } + @tailwind utilities; + `, + ['aspect-video', 'aspect-[10/9]', 'aspect-4/3'], + ), + ).toMatchInlineSnapshot(` + ":root { + --aspect-video: 16 / 9; + } + + .aspect-4\\/3 { aspect-ratio: 4 / 3; } @@ -2495,7 +2509,7 @@ test('aspect-ratio', async () => { } .aspect-video { - aspect-ratio: 16 / 9; + aspect-ratio: var(--aspect-video); }" `) expect( diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 7ae95db6a717..73993934be4f 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -828,9 +828,8 @@ export function createUtilities(theme: Theme) { */ staticUtility('aspect-auto', [['aspect-ratio', 'auto']]) 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, '/') diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css index 7ae95968f12e..a0652e07d2ac 100644 --- a/packages/tailwindcss/theme.css +++ b/packages/tailwindcss/theme.css @@ -429,6 +429,8 @@ --perspective-midrange: 800px; --perspective-distant: 1200px; + --aspect-video: 16 / 9; + --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans);