Improve resolveConfig return type: merge themes (#12272)

* Generate types: do not intersect with Config theme type when generating DefaultTheme

* Merge default theme in ResolvedConfig

* UnwrapResolvables on theme.extend as well

* Apply extend to overrides and default theme

* Omit extend from DefaultTheme

* Relax generic constraints, better generic variable names

* Fall back to ThemeConfig if key not in DefaultTheme

* Split out ThemeConfigCustomizable to avoid anys in ThemeConfigResolved

* Allow custom theme properties

* handle TypeScript error

* apply prettier formatting

* update changelog

* change type name

---------

Co-authored-by: Nikita Gaidakov <[email protected]>
Co-authored-by: Robin Malfait <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fallback to RegEx based parser when using custom transformers or extractors ([#11335](https://github.com/tailwindlabs/tailwindcss/pull/11335))
 - Bump `lightningcss` and reflect related improvements in tests ([#11550](https://github.com/tailwindlabs/tailwindcss/pull/11550))
 - Fix incorrect spaces around `-` in `calc()` expression ([#12283](https://github.com/tailwindlabs/tailwindcss/pull/12283))
+- Improve types for `resolveConfig` ([#12272](https://github.com/tailwindlabs/tailwindcss/pull/12272))
 
 ### Added
 

resolveConfig.d.ts

@@ -1,11 +1,30 @@
-import type { Config, ResolvableTo } from './types/config'
+import { Config, ResolvableTo, ThemeConfig } from './types/config'
+import { DefaultTheme } from './types/generated/default-theme'
+import { DefaultColors } from './types/generated/colors'
+
+type ResolvedConfig<T extends Config> = Omit<T, 'theme'> & {
+  theme: MergeThemes<
+    UnwrapResolvables<Omit<T['theme'], 'extend'>>,
+    T['theme'] extends { extend: infer TExtend } ? UnwrapResolvables<TExtend> : {}
+  >
+}
 
 type UnwrapResolvables<T> = {
   [K in keyof T]: T[K] extends ResolvableTo<infer R> ? R : T[K]
 }
 
-type ResolvedConfig<T extends Config> = Omit<T, 'theme'> & {
-  theme: UnwrapResolvables<T['theme']>
+type ThemeConfigResolved = UnwrapResolvables<ThemeConfig>
+type DefaultThemeFull = DefaultTheme & { colors: DefaultColors }
+
+type MergeThemes<Overrides extends object, Extensions extends object> = {
+  [K in keyof ThemeConfigResolved | keyof Overrides]: (K extends keyof Overrides
+    ? Overrides[K]
+    : K extends keyof DefaultThemeFull
+    ? DefaultThemeFull[K]
+    : K extends keyof ThemeConfigResolved
+    ? ThemeConfigResolved[K]
+    : never) &
+    (K extends keyof Extensions ? Extensions[K] : {})
 }
 
 declare function resolveConfig<T extends Config>(config: T): ResolvedConfig<T>

scripts/generate-types.js

@@ -91,9 +91,8 @@ fs.writeFileSync(
   path.join(process.cwd(), 'types', 'generated', 'default-theme.d.ts'),
   prettier.format(
     `
-    import { Config } from '../../types'
     type CSSDeclarationList = Record<string, string>
-    export type DefaultTheme = Config['theme'] & { ${defaultThemeTypes} }
+    export type DefaultTheme = { ${defaultThemeTypes} }
   `,
     {
       semi: false,

types/config.d.ts

@@ -80,7 +80,7 @@ type Screen = { raw: string } | { min: string } | { max: string } | { min: strin
 type ScreensConfig = string[] | KeyValuePair<string, string | Screen | Screen[]>
 
 // Theme related config
-interface ThemeConfig {
+export interface ThemeConfig {
   // Responsiveness
   screens: ResolvableTo<ScreensConfig>
   supports: ResolvableTo<Record<string, string>>
@@ -235,8 +235,9 @@ interface ThemeConfig {
   transitionDuration: ResolvableTo<KeyValuePair>
   willChange: ResolvableTo<KeyValuePair>
   content: ResolvableTo<KeyValuePair>
+}
 
-  // Custom
+interface CustomThemeConfig extends ThemeConfig {
   [key: string]: any
 }
 
@@ -361,7 +362,7 @@ interface OptionalConfig {
   future: Partial<FutureConfig>
   experimental: Partial<ExperimentalConfig>
   darkMode: Partial<DarkModeConfig>
-  theme: Partial<ThemeConfig & { extend: Partial<ThemeConfig> }>
+  theme: Partial<CustomThemeConfig & { extend: Partial<CustomThemeConfig> }>
   corePlugins: Partial<CorePluginsConfig>
   plugins: Partial<PluginsConfig>
   // Custom