diff --git a/CHANGELOG.md b/CHANGELOG.md index a5d28326e01b..c26eee40afe4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Ensure custom variants using the JS API have access to modifiers ([#14637](https://github.com/tailwindlabs/tailwindcss/pull/14637)) - Ensure auto complete suggestions work when using `matchUtilities` ([#14589](https://github.com/tailwindlabs/tailwindcss/pull/14589)) - Pass options when using `addComponents` and `matchComponents` ([#14590](https://github.com/tailwindlabs/tailwindcss/pull/14590)) +- Convert to/from v3 theme keys in configs and plugins ([#14642](https://github.com/tailwindlabs/tailwindcss/pull/14642)) - _Upgrade (experimental)_: Ensure CSS before a layer stays unlayered when running codemods ([#14596](https://github.com/tailwindlabs/tailwindcss/pull/14596)) - _Upgrade (experimental)_: Resolve issues where some prefixed candidates were not properly migrated ([#14600](https://github.com/tailwindlabs/tailwindcss/pull/14600)) - _Upgrade (experimental)_: Migrate `@media screen(…)` when running codemods ([#14603](https://github.com/tailwindlabs/tailwindcss/pull/14603)) diff --git a/integrations/upgrade/js-config.test.ts b/integrations/upgrade/js-config.test.ts index 5ef1f55b2bb4..87f95ccd0a69 100644 --- a/integrations/upgrade/js-config.test.ts +++ b/integrations/upgrade/js-config.test.ts @@ -74,8 +74,8 @@ test( @variant dark (&:where(.dark, .dark *)); @theme { - --box-shadow-*: initial; - --box-shadow-sm: 0 2px 6px rgb(15 23 42 / 0.08); + --shadow-*: initial; + --shadow-sm: 0 2px 6px rgb(15 23 42 / 0.08); --color-*: initial; --color-red-400: #f87171; 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 aad2753b021d..41d24d184570 100644 --- a/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts +++ b/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts @@ -19,6 +19,22 @@ test('Config values can be merged into the theme', () => { }, }, + screens: { + sm: '1234px', + }, + + boxShadow: { + normal: '0 1px 3px black', + }, + + borderRadius: { + sm: '0.33rem', + }, + + animation: { + blink: 'blink 1s linear infinite', + }, + fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], mono: ['Potato Mono', { fontVariationSettings: '"XHGT" 0.7' }], @@ -41,6 +57,10 @@ test('Config values can be merged into the theme', () => { applyConfigToTheme(design, resolvedUserConfig) 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('sm', ['--radius'])).toEqual('0.33rem') + expect(theme.resolve('blink', ['--animate'])).toEqual('blink 1s linear infinite') expect(theme.resolve('red-500', ['--color'])).toEqual('red') expect(theme.resolve('sans', ['--font-family'])).toEqual('Inter, system-ui, sans-serif') expect(theme.resolveWith('mono', ['--font-family'], ['--font-variation-settings'])).toEqual([ diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.ts index 2e26697d28d4..f09d1770e7be 100644 --- a/packages/tailwindcss/src/compat/apply-config-to-theme.ts +++ b/packages/tailwindcss/src/compat/apply-config-to-theme.ts @@ -114,6 +114,8 @@ export function keyPathToCssProperty(path: string[]) { if (path[0] === 'colors') path[0] = 'color' if (path[0] === 'screens') path[0] = 'breakpoint' if (path[0] === 'borderRadius') path[0] = 'radius' + if (path[0] === 'boxShadow') path[0] = 'shadow' + if (path[0] === 'animation') path[0] = 'animate' return ( path diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts index b174895d6435..ab72ab6531f5 100644 --- a/packages/tailwindcss/src/compat/config.test.ts +++ b/packages/tailwindcss/src/compat/config.test.ts @@ -1,6 +1,6 @@ -import { describe, expect, test } from 'vitest' +import { describe, expect, test, vi } from 'vitest' import { compile, type Config } from '..' -import plugin from '../plugin' +import { default as plugin } from '../plugin' import { flattenColorPalette } from './flatten-color-palette' const css = String.raw @@ -1512,3 +1512,82 @@ test('blocklisted canddiates cannot be used with `@apply`', async () => { `[Error: Cannot apply unknown utility class: bg-white]`, ) }) + +test('old theme values are merged with their renamed counterparts in the CSS theme', async () => { + let didCallPluginFn = vi.fn() + + await compile( + css` + @theme reference { + --breakpoint-a: 1; + --breakpoint-b: 2; + + --color-a: 1; + --color-b: 2; + + --radius-a: 1; + --radius-b: 2; + + --shadow-a: 1; + --shadow-b: 2; + + --animate-a: 1; + --animate-b: 2; + } + + @plugin "./plugin.js"; + `, + { + async loadModule(id, base) { + return { + base, + module: plugin(function ({ theme }) { + didCallPluginFn() + + expect(theme('screens')).toMatchObject({ + a: '1', + b: '2', + }) + + expect(theme('screens.a')).toEqual('1') + expect(theme('screens.b')).toEqual('2') + + expect(theme('colors')).toMatchObject({ + a: '1', + b: '2', + }) + + expect(theme('colors.a')).toEqual('1') + expect(theme('colors.b')).toEqual('2') + + expect(theme('borderRadius')).toMatchObject({ + a: '1', + b: '2', + }) + + expect(theme('borderRadius.a')).toEqual('1') + expect(theme('borderRadius.b')).toEqual('2') + + expect(theme('animation')).toMatchObject({ + a: '1', + b: '2', + }) + + expect(theme('animation.a')).toEqual('1') + expect(theme('animation.b')).toEqual('2') + + expect(theme('boxShadow')).toMatchObject({ + a: '1', + b: '2', + }) + + expect(theme('boxShadow.a')).toEqual('1') + expect(theme('boxShadow.b')).toEqual('2') + }), + } + }, + }, + ) + + expect(didCallPluginFn).toHaveBeenCalled() +}) diff --git a/packages/tailwindcss/src/compat/config/create-compat-config.ts b/packages/tailwindcss/src/compat/config/create-compat-config.ts index 785167db74c1..2a06c95bae01 100644 --- a/packages/tailwindcss/src/compat/config/create-compat-config.ts +++ b/packages/tailwindcss/src/compat/config/create-compat-config.ts @@ -13,10 +13,31 @@ export function createCompatConfig(cssTheme: Theme): UserConfig { // and only allow colors from the CSS theme. colors: ({ theme }) => theme('color', {}), + boxShadow: ({ theme }) => ({ + ...defaultTheme.boxShadow, + ...theme('shadow', {}), + }), + + animation: ({ theme }) => ({ + ...defaultTheme.animation, + ...theme('animate', {}), + }), + + borderRadius: ({ theme }) => ({ + ...defaultTheme.borderRadius, + ...theme('radius', {}), + }), + + screens: ({ theme }) => ({ + ...defaultTheme.screens, + ...theme('breakpoint', {}), + }), + transitionDuration: { ...defaultTheme.transitionDuration, DEFAULT: cssTheme.get(['--default-transition-duration']) ?? null, }, + transitionTimingFunction: { ...defaultTheme.transitionTimingFunction, DEFAULT: cssTheme.get(['--default-transition-timing-function']) ?? null,