/
createUtilityPlugin.js
48 lines (45 loc) · 1.55 KB
/
createUtilityPlugin.js
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
import transformThemeValue from './transformThemeValue'
import { asValue, asList, asColor, asAngle, asLength, asLookupValue } from '../util/pluginUtils'
let asMap = new Map([
[asValue, 'any'],
[asList, 'list'],
[asColor, 'color'],
[asAngle, 'angle'],
[asLength, 'length'],
[asLookupValue, 'lookup'],
])
export default function createUtilityPlugin(
themeKey,
utilityVariations = [[themeKey, [themeKey]]],
{ filterDefault = false, resolveArbitraryValue = asValue } = {}
) {
let transformValue = transformThemeValue(themeKey)
return function ({ matchUtilities, variants, theme }) {
for (let utilityVariation of utilityVariations) {
let group = Array.isArray(utilityVariation[0]) ? utilityVariation : [utilityVariation]
matchUtilities(
group.reduce((obj, [classPrefix, properties]) => {
return Object.assign(obj, {
[classPrefix]: (value) => {
return properties.reduce((obj, name) => {
if (Array.isArray(name)) {
return Object.assign(obj, { [name[0]]: name[1] })
}
return Object.assign(obj, { [name]: transformValue(value) })
}, {})
},
})
}, {}),
{
values: filterDefault
? Object.fromEntries(
Object.entries(theme(themeKey)).filter(([modifier]) => modifier !== 'DEFAULT')
)
: theme(themeKey),
variants: variants(themeKey),
type: asMap.get(resolveArbitraryValue) ?? 'any',
}
)
}
}
}