fix: support deep nested colors in the theme

tw-in-js · Dec 29, 2020 · 0b1f512 · 0b1f512
1 parent e942b0f
commit 0b1f512
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 24 deletions.
diff --git a/src/__tests__/theme.test.ts b/src/__tests__/theme.test.ts
@@ -45,6 +45,36 @@ test('custom color', () => {
   assert.is(theme('borderColor', ['gray', '300']), '#d1d5db')
 })
 
+test('deep custom color', () => {
+  const theme = makeThemeResolver({
+    extend: {
+      colors: {
+        gray: {
+          a: {
+            b: {
+              c: {
+                d: {
+                  e: {
+                    f: '#abcdef',
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  })
+
+  assert.is(theme('colors', 'gray.a.b.c.d.e.f'), '#abcdef')
+  assert.is(theme('colors', 'gray-a-b-c-d-e-f'), '#abcdef')
+  assert.is(theme('colors', ['gray', 'a', 'b', 'c', 'd', 'e', 'f']), '#abcdef')
+
+  assert.is(theme('colors', 'gray.300'), '#d1d5db')
+  assert.is(theme('colors', 'gray-300'), '#d1d5db')
+  assert.is(theme('colors', ['gray', '300']), '#d1d5db')
+})
+
 test('negative is available and no-op', () => {
   const theme = makeThemeResolver({
     extend: {

diff --git a/src/shim/index.ts b/src/shim/index.ts
@@ -1,5 +1,4 @@
 import type { Configuration } from '../types'
-import type { TwindObserver } from '../observe'
 
 import { setup as setupTW } from '../index'
 import { createObserver } from '../observe/index'

diff --git a/src/twind/plugins.ts b/src/twind/plugins.ts
@@ -179,7 +179,7 @@ const border: DirectiveHandler = (params, { theme }, id): CSSRules | undefined =
     : withOpacityFallback(
         'borderColor',
         id,
-        theme((id + 'Color') as 'borderColor' | 'divideColor', params),
+        theme((id + 'Color') as 'borderColor' | 'divideColor', params) as string,
       )
 }
 
@@ -614,7 +614,7 @@ export const corePlugins: Plugins = {
           }
     }
 
-    return withOpacityFallback('color', 'text', theme('textColor', params))
+    return withOpacityFallback('color', 'text', theme('textColor', params) as string)
   },
 
   // eslint-disable-next-line complexity
@@ -666,7 +666,7 @@ export const corePlugins: Plugins = {
 
     return (_ = theme('backgroundImage', params, '' /* Optional */))
       ? { backgroundImage: _ }
-      : withOpacityFallback('backgroundColor', 'bg', theme('backgroundColor', params))
+      : withOpacityFallback('backgroundColor', 'bg', theme('backgroundColor', params) as string)
   },
 
   // .from-purple-400
@@ -711,7 +711,11 @@ export const corePlugins: Plugins = {
     (_ =
       params[0] === 'opacity'
         ? opacityProperty(params, theme, id)
-        : withOpacityFallback('color', 'placeholder', theme('placeholderColor', params))) && {
+        : withOpacityFallback(
+            'color',
+            'placeholder',
+            theme('placeholderColor', params) as string,
+          )) && {
       '&::placeholder': _,
     },
 
@@ -796,7 +800,7 @@ export const corePlugins: Plugins = {
             '',
             '0px',
           )})) var(--tw-ring-color,${asRGBA(
-            theme('ringColor', '', '#93c5fd'),
+            theme('ringColor', '', '#93c5fd') as string,
             'ring-opacity',
             theme('ringOpacity', '', '0.5'),
           )})`,
@@ -806,7 +810,7 @@ export const corePlugins: Plugins = {
       : {
           // A color
           '--tw-ring-opacity': '1',
-          '--tw-ring-color': asRGBA(theme('ringColor', params), 'ring-opacity'),
+          '--tw-ring-color': asRGBA(theme('ringColor', params) as string, 'ring-opacity'),
         }
   },
 

diff --git a/src/twind/theme.ts b/src/twind/theme.ts
@@ -702,25 +702,30 @@ export const defaultTheme: Theme = {
 }
 
 // https://github.com/tailwindlabs/tailwindcss/blob/master/src/util/flattenColorPalette.js
-const flattenColorPalette = (colors: Record<string, ThemeColor>): Record<string, ThemeColor> =>
-  Object.keys(colors).reduce((flatColors, key) => {
-    const value = colors[key]
-
-    flatColors[key] = value
+const flattenColorPalette = (
+  colors: Record<string, ThemeColor>,
+  target: Record<string, ThemeColor> = {},
+  prefix: string[] = [],
+): Record<string, ThemeColor> => {
+  Object.keys(colors).forEach((property) => {
+    const value = colors[property]
+
+    if (property === 'DEFAULT') {
+      target[join(prefix)] = value
+      target[join(prefix, '.')] = value
+    }
 
-    return is.object(value)
-      ? Object.keys(value).reduce((flatColors, number) => {
-          if (number === 'DEFAULT') {
-            flatColors[key] = value[number]
-          }
+    const key = [...prefix, property]
+    target[join(key)] = value
+    target[join(key, '.')] = value
 
-          flatColors[key + '-' + number] = value[number]
-          flatColors[key + '.' + number] = value[number]
+    if (is.object(value)) {
+      flattenColorPalette(value, target, key)
+    }
+  }, target)
 
-          return flatColors
-        }, flatColors)
-      : flatColors
-  }, {} as Record<string, ThemeColor>)
+  return target
+}
 
 const resolveContext: ThemeSectionResolverContext = {
   // ?negative: (source) =>

diff --git a/src/types/theme.ts b/src/types/theme.ts
@@ -48,7 +48,12 @@ export interface ThemeContainer {
   padding?: string | Record<string, string | undefined>
 }
 
-export type ThemeColor = string | Record<string, string>
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface ThemeColorObject extends Record<string, ThemeColor> {
+  /* empty */
+}
+
+export type ThemeColor = string | ThemeColorObject
 
 export type ThemeFontSize =
   | string