From 3cd6c6bc4be683dc5a9a31399679479eafa5b9b7 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Fri, 11 Oct 2024 17:05:00 +0200 Subject: [PATCH 1/2] Support the `color` property in JS theme configuration callbacks --- CHANGELOG.md | 1 + .../src/compat/config/resolve-config.test.ts | 19 +++++++++++++++++++ .../src/compat/config/resolve-config.ts | 3 +++ 3 files changed, 23 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e1ad6f1f6875..04fb48c69cbb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add support for `tailwindcss/colors.js`, `tailwindcss/defaultTheme.js`, and `tailwindcss/plugin.js` exports ([#14595](https://github.com/tailwindlabs/tailwindcss/pull/14595)) - Support `keyframes` in JS config file themes ([#14594](https://github.com/tailwindlabs/tailwindcss/pull/14594)) +- Support the `color` property in JS theme configuration callbacks ([#14651](https://github.com/tailwindlabs/tailwindcss/pull/14651)) - _Upgrade (experimental)_: Migrate v3 PostCSS setups to v4 in some cases ([#14612](https://github.com/tailwindlabs/tailwindcss/pull/14612)) - _Upgrade (experimental)_: Automatically discover JavaScript config files ([#14597](https://github.com/tailwindlabs/tailwindcss/pull/14597)) - _Upgrade (experimental)_: Migrate legacy classes to the v4 alternative ([#14643](https://github.com/tailwindlabs/tailwindcss/pull/14643)) diff --git a/packages/tailwindcss/src/compat/config/resolve-config.test.ts b/packages/tailwindcss/src/compat/config/resolve-config.test.ts index 895939bcaa4a..a4e9ba0b4b2f 100644 --- a/packages/tailwindcss/src/compat/config/resolve-config.test.ts +++ b/packages/tailwindcss/src/compat/config/resolve-config.test.ts @@ -198,6 +198,10 @@ test('theme keys can read from the CSS theme', () => { // Reads from the --color-* namespace directly secondary: theme('color.green'), }), + caretColor: ({ colors }) => ({ + // Gives access to the colors object directly + primary: colors.green, + }), }, }, base: '/root', @@ -218,6 +222,21 @@ test('theme keys can read from the CSS theme', () => { primary: 'green', secondary: 'green', }, + caretColor: { + primary: { + '100': '#dcfce7', + '200': '#bbf7d0', + '300': '#86efac', + '400': '#4ade80', + '50': '#f0fdf4', + '500': '#22c55e', + '600': '#16a34a', + '700': '#15803d', + '800': '#166534', + '900': '#14532d', + '950': '#052e16', + }, + }, }, }) }) diff --git a/packages/tailwindcss/src/compat/config/resolve-config.ts b/packages/tailwindcss/src/compat/config/resolve-config.ts index 2d8a86ff6176..fbbf807abf28 100644 --- a/packages/tailwindcss/src/compat/config/resolve-config.ts +++ b/packages/tailwindcss/src/compat/config/resolve-config.ts @@ -1,4 +1,5 @@ import type { DesignSystem } from '../../design-system' +import colors from '../colors' import type { PluginWithConfig } from '../plugin-api' import { createThemeFn } from '../plugin-functions' import { deepMerge, isPlainObject } from './deep-merge' @@ -117,6 +118,7 @@ export function mergeThemeExtension( export interface PluginUtils { theme(keypath: string, defaultValue?: any): any + colors: typeof colors } function extractConfigs(ctx: ResolutionContext, { config, base, path }: ConfigFile): void { @@ -176,6 +178,7 @@ function extractConfigs(ctx: ResolutionContext, { config, base, path }: ConfigFi function mergeTheme(ctx: ResolutionContext) { let api: PluginUtils = { theme: createThemeFn(ctx.design, () => ctx.theme, resolveValue), + colors, } function resolveValue(value: ThemeValue | null | undefined): ResolvedThemeValue { From 9bf38b15713fe09a273d0d770aadfa25608d910f Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Fri, 11 Oct 2024 17:48:47 +0200 Subject: [PATCH 2/2] Apply suggestions from code review Co-authored-by: Adam Wathan --- CHANGELOG.md | 2 +- packages/tailwindcss/src/compat/config/resolve-config.test.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 04fb48c69cbb..5af6d0fddd28 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add support for `tailwindcss/colors.js`, `tailwindcss/defaultTheme.js`, and `tailwindcss/plugin.js` exports ([#14595](https://github.com/tailwindlabs/tailwindcss/pull/14595)) - Support `keyframes` in JS config file themes ([#14594](https://github.com/tailwindlabs/tailwindcss/pull/14594)) -- Support the `color` property in JS theme configuration callbacks ([#14651](https://github.com/tailwindlabs/tailwindcss/pull/14651)) +- Support the `color` parameter in JS theme configuration callbacks ([#14651](https://github.com/tailwindlabs/tailwindcss/pull/14651)) - _Upgrade (experimental)_: Migrate v3 PostCSS setups to v4 in some cases ([#14612](https://github.com/tailwindlabs/tailwindcss/pull/14612)) - _Upgrade (experimental)_: Automatically discover JavaScript config files ([#14597](https://github.com/tailwindlabs/tailwindcss/pull/14597)) - _Upgrade (experimental)_: Migrate legacy classes to the v4 alternative ([#14643](https://github.com/tailwindlabs/tailwindcss/pull/14643)) diff --git a/packages/tailwindcss/src/compat/config/resolve-config.test.ts b/packages/tailwindcss/src/compat/config/resolve-config.test.ts index a4e9ba0b4b2f..d755cf8e12a9 100644 --- a/packages/tailwindcss/src/compat/config/resolve-config.test.ts +++ b/packages/tailwindcss/src/compat/config/resolve-config.test.ts @@ -224,11 +224,11 @@ test('theme keys can read from the CSS theme', () => { }, caretColor: { primary: { + '50': '#f0fdf4', '100': '#dcfce7', '200': '#bbf7d0', '300': '#86efac', '400': '#4ade80', - '50': '#f0fdf4', '500': '#22c55e', '600': '#16a34a', '700': '#15803d',