-
-
Notifications
You must be signed in to change notification settings - Fork 38
/
tailwind.adapter.ts
109 lines (98 loc) · 2.59 KB
/
tailwind.adapter.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import {
TailwindColorValue,
TailwindValuesColor,
} from 'tailwindcss/tailwind-config'
import {WPThemeJson} from '.'
export type WordPressPalette = WPThemeJson['settings']['color']['palette']
export {TailwindColorValue, TailwindValuesColor}
/**
* Make a color name from a color label
*
* @param label - color label
* @returns string
*
* @public
*/
interface name {
(label: string): string
}
const name: name = label =>
`${label.charAt(0).toUpperCase()}${label.slice(1)}`
/**
* Make a theme.json palette.color item from a slug and a color
*
* @param slug - color slug
* @param value - color value
* @returns WordPress theme.json color
*/
export interface transform {
(slug: string, color: string): WordPressPalette[any]
}
export const transform: transform = (slug, color) => ({
name: name(slug),
slug,
color,
})
/**
* TailwindCSS palette to WordPress palette reducer
*
* @param acc - WordPress color palette array
* @param param - tuple of tailwind key and color values
*
* @returns
*/
export interface toThemeArray {
(
acc: WordPressPalette,
[key, value]: [string, TailwindColorValue | TailwindValuesColor],
): WordPressPalette
}
export const toThemeArray: toThemeArray = (palette, colorValue) => {
const [color] = colorValue
const normalizeKey = (key: string) =>
key !== 'default' ? `${color}-${key}` : color
const flatten: (
color: string,
shades: TailwindValuesColor | TailwindColorValue,
) => Array<[string, string]> = (color, shades) =>
typeof shades !== 'string'
? Object.entries(shades).reduce((all, [variant, color]) => {
return [...all, [normalizeKey(variant), color]]
}, [])
: [[color, shades]]
return flatten(...colorValue).reduce(
(palette, color) => [...palette, transform(...color)],
palette,
)
}
/**
* Get color palette from a tailwind config file
*
* @param path - path to tailwind.config.json
* @returns config.theme.extend.colors
*
* @public
*/
export interface getPalette {
(path: string): Promise<TailwindValuesColor>
}
export const getPalette = async (path: string) => {
const tailwindImport = await import(path)
const tailwind = tailwindImport?.default ?? tailwindImport
return tailwind?.theme?.extend?.colors ?? {}
}
/**
* Transform tailwindcss palette to wordpress theme.json palette
*
* @param palette - from tailwindcss
*
* @public
*/
export interface transformPalette {
(palette: TailwindValuesColor): WordPressPalette
}
export const transformPalette: transformPalette = (
palette: TailwindValuesColor,
) => {
return Object.entries(palette ?? {}).reduce(toThemeArray, [])
}