From ea367b4c5b9164f29d1e0b61f246f5f426683706 Mon Sep 17 00:00:00 2001
From: Dany Castillo <31006608+dcastil@users.noreply.github.com>
Date: Sun, 20 Aug 2023 18:31:38 +0200
Subject: [PATCH] add documentation for type generics of fromTheme

---
 docs/api-reference.md | 22 ++++++++++++++++------
 src/lib/from-theme.ts | 13 ++++---------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/docs/api-reference.md b/docs/api-reference.md
index dd8e0c42..7f24a316 100644
--- a/docs/api-reference.md
+++ b/docs/api-reference.md
@@ -40,7 +40,7 @@ Why no object support? [Read here](https://github.com/dcastil/tailwind-merge/dis
 ## `getDefaultConfig`
 
 ```ts
-function getDefaultConfig(): Config
+function getDefaultConfig(): satisfies Config<DefaultClassGroupIds, DefaultThemeGroupIds>
 ```
 
 Function which returns the default config used by tailwind-merge. The tailwind-merge config is different from the Tailwind config. It is optimized for small bundle size and fast runtime performance because it is expected to run in the browser.
@@ -48,24 +48,34 @@ Function which returns the default config used by tailwind-merge. The tailwind-m
 ## `fromTheme`
 
 ```ts
-function fromTheme(key: string): ThemeGetter
+function fromTheme<
+    AdditionalThemeGroupIds extends string = never,
+    DefaultThemeGroupIdsInner extends string = DefaultThemeGroupIds,
+>(key: NoInfer<DefaultThemeGroupIdsInner | AdditionalThemeGroupIds>): ThemeGetter
 ```
 
 Function to retrieve values from a theme scale, to be used in class groups.
 
 `fromTheme` doesn't return the values from the theme scale, but rather another function which is used by tailwind-merge internally to retrieve the theme values. tailwind-merge can differentiate the theme getter function from a validator because it has a `isThemeGetter` property set to `true`.
 
-It can be used like this:
+When using TypeScript, the function only allows passing the default theme group IDs as the `key` argument. If you use custom theme group IDs, you need to pass them as the generic type argument `AdditionalThemeGroupIds`. In case you aren't using the default tailwind-merge config and use a different set of theme group IDs entirely, you can also pass them as the generic type argument `DefaultThemeGroupIdsInner`.
+
+`fromTheme` can be used like this:
 
 ```ts
-extendTailwindMerge({
+type MyClassGroupIds = 'my-group' | 'my-group-x'
+type MyThemeGroupIds = 'my-scale'
+
+extendTailwindMerge<MyClassGroupIds, MyThemeGroupIds>({
     extend: {
         theme: {
             'my-scale': ['foo', 'bar'],
         },
         classGroups: {
-            'my-group': [{ 'my-group': [fromTheme('my-scale'), fromTheme('spacing')] }],
-            'my-group-x': [{ 'my-group-x': [fromTheme('my-scale')] }],
+            'my-group': [
+                { 'my-group': [fromTheme<MyThemeGroupIds>('my-scale'), fromTheme('spacing')] },
+            ],
+            'my-group-x': [{ 'my-group-x': [fromTheme<MyThemeGroupIds>('my-scale')] }],
         },
     },
 })
diff --git a/src/lib/from-theme.ts b/src/lib/from-theme.ts
index ba155ff7..92a5b0dd 100644
--- a/src/lib/from-theme.ts
+++ b/src/lib/from-theme.ts
@@ -1,15 +1,10 @@
-import {
-    DefaultThemeGroupIds as DefaultThemeGroupIdsOuter,
-    NoInfer,
-    ThemeGetter,
-    ThemeObject,
-} from './types'
+import { DefaultThemeGroupIds, NoInfer, ThemeGetter, ThemeObject } from './types'
 
 export function fromTheme<
     AdditionalThemeGroupIds extends string = never,
-    DefaultThemeGroupIds extends string = DefaultThemeGroupIdsOuter,
->(key: NoInfer<DefaultThemeGroupIds | AdditionalThemeGroupIds>): ThemeGetter {
-    const themeGetter = (theme: ThemeObject<DefaultThemeGroupIds | AdditionalThemeGroupIds>) =>
+    DefaultThemeGroupIdsInner extends string = DefaultThemeGroupIds,
+>(key: NoInfer<DefaultThemeGroupIdsInner | AdditionalThemeGroupIds>): ThemeGetter {
+    const themeGetter = (theme: ThemeObject<DefaultThemeGroupIdsInner | AdditionalThemeGroupIds>) =>
         theme[key] || []
 
     themeGetter.isThemeGetter = true as const