Skip to content

Commit 454493c

Browse files
committed
add class map test
1 parent 46a9c6c commit 454493c

File tree

1 file changed

+233
-0
lines changed

1 file changed

+233
-0
lines changed

tests/class-map.test.ts

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
import { ClassPartObject, createClassMap } from '../src/class-utils'
2+
import { getDefaultConfig } from '../src/default-config'
3+
4+
test('class map has correct class groups at first part', () => {
5+
const classMap = createClassMap(getDefaultConfig())
6+
7+
const classGroupsByFirstPart = Object.fromEntries(
8+
Object.keys(classMap.nextPart)
9+
.sort()
10+
.map((key) => [
11+
key,
12+
Array.from(getClassGroupsInClassPart(classMap.nextPart[key]!)).sort(),
13+
])
14+
)
15+
16+
expect(classMap.classGroupId).toBeUndefined()
17+
expect(classMap.validators).toHaveLength(0)
18+
expect(classGroupsByFirstPart).toEqual({
19+
absolute: ['position'],
20+
align: ['vertival-alignment'],
21+
animate: ['animate'],
22+
antialiased: ['font-smoothing'],
23+
appearance: ['appearance'],
24+
auto: ['auto-cols', 'auto-rows'],
25+
backdrop: [
26+
'backdrop-blur',
27+
'backdrop-brightness',
28+
'backdrop-contrast',
29+
'backdrop-filter',
30+
'backdrop-grayscale',
31+
'backdrop-hue-rotate',
32+
'backdrop-invert',
33+
'backdrop-opacity',
34+
'backdrop-saturate',
35+
'backdrop-sepia',
36+
],
37+
bg: [
38+
'bg-attachment',
39+
'bg-blend',
40+
'bg-clip',
41+
'bg-color',
42+
'bg-image',
43+
'bg-opacity',
44+
'bg-origin',
45+
'bg-position',
46+
'bg-repeeat',
47+
'bg-size',
48+
],
49+
block: ['display'],
50+
blur: ['blur'],
51+
border: [
52+
'border-collapse',
53+
'border-color',
54+
'border-color-b',
55+
'border-color-l',
56+
'border-color-r',
57+
'border-color-t',
58+
'border-opacity',
59+
'border-style',
60+
'border-w',
61+
'border-w-b',
62+
'border-w-l',
63+
'border-w-r',
64+
'border-w-t',
65+
],
66+
bottom: ['bottom'],
67+
box: ['box'],
68+
break: ['break'],
69+
brightness: ['brightness'],
70+
capitalize: ['text-transform'],
71+
caret: ['caret-color'],
72+
clear: ['clear'],
73+
col: ['col-end', 'col-start', 'col-start-end'],
74+
container: ['container'],
75+
content: ['align-content', 'content'],
76+
contents: ['display'],
77+
contrast: ['contrast'],
78+
cursor: ['cursor'],
79+
decoration: ['decoration'],
80+
delay: ['delay'],
81+
diagonal: ['fvn-fraction'],
82+
divide: [
83+
'divide-color',
84+
'divide-opacity',
85+
'divide-style',
86+
'divide-x',
87+
'divide-x-reverse',
88+
'divide-y',
89+
'divide-y-reverse',
90+
],
91+
drop: ['drop-shadow'],
92+
duration: ['duration'],
93+
ease: ['ease'],
94+
fill: ['fill'],
95+
filter: ['filter'],
96+
fixed: ['position'],
97+
flex: ['display', 'flex', 'flex-direction', 'flex-grow', 'flex-shrink', 'flex-wrap'],
98+
float: ['float'],
99+
flow: ['display'],
100+
font: ['font-family', 'font-weight'],
101+
from: ['gradient-from'],
102+
gap: ['gap', 'gap-x', 'gap-y'],
103+
grayscale: ['grayscale'],
104+
grid: ['display', 'grid-cols', 'grid-flow', 'grid-rows'],
105+
h: ['h'],
106+
hidden: ['display'],
107+
hue: ['hue-rotate'],
108+
inline: ['display'],
109+
inset: ['inset', 'inset-x', 'inset-y'],
110+
invert: ['invert'],
111+
invisible: ['visibility'],
112+
isolate: ['isolation'],
113+
isolation: ['isolation'],
114+
italic: ['font-style'],
115+
items: ['align-items'],
116+
justify: ['justify-content', 'justify-items', 'justify-self'],
117+
leading: ['leading'],
118+
left: ['left'],
119+
line: ['text-decoration'],
120+
lining: ['fvn-figure'],
121+
list: ['display', 'list-style-position', 'list-style-type'],
122+
lowercase: ['text-transform'],
123+
m: ['m'],
124+
max: ['max-h', 'max-w'],
125+
mb: ['mb'],
126+
min: ['min-h', 'min-w'],
127+
mix: ['mix-blend'],
128+
ml: ['ml'],
129+
mr: ['mr'],
130+
mt: ['mt'],
131+
mx: ['mx'],
132+
my: ['my'],
133+
no: ['text-decoration'],
134+
normal: ['fvn-normal', 'text-transform'],
135+
not: ['font-style', 'sr'],
136+
object: ['object-fit', 'object-position'],
137+
oldstyle: ['fvn-figure'],
138+
opacity: ['opacity'],
139+
order: ['order'],
140+
ordinal: ['fvn-ordinal'],
141+
origin: ['transform-origin'],
142+
outline: ['outline'],
143+
overflow: ['overflow', 'overflow-x', 'overflow-y', 'text-overflow'],
144+
overscroll: ['overscroll', 'overscroll-x', 'overscroll-y'],
145+
p: ['p'],
146+
pb: ['pb'],
147+
pl: ['pl'],
148+
place: ['place-content', 'place-items', 'place-self'],
149+
placeholder: ['placeholder-color', 'placeholder-opacity'],
150+
pointer: ['pointer-events'],
151+
pr: ['pr'],
152+
proportional: ['fvn-spacing'],
153+
pt: ['pt'],
154+
px: ['px'],
155+
py: ['py'],
156+
relative: ['position'],
157+
resize: ['resize'],
158+
right: ['right'],
159+
ring: [
160+
'ring-color',
161+
'ring-offset-color',
162+
'ring-offset-w',
163+
'ring-opacity',
164+
'ring-w',
165+
'ring-w-inset',
166+
],
167+
rotate: ['rotate'],
168+
rounded: [
169+
'rounded',
170+
'rounded-b',
171+
'rounded-bl',
172+
'rounded-br',
173+
'rounded-l',
174+
'rounded-r',
175+
'rounded-t',
176+
'rounded-tl',
177+
'rounded-tr',
178+
],
179+
row: ['row-end', 'row-start', 'row-start-end'],
180+
saturate: ['saturate'],
181+
scale: ['scale', 'scale-x', 'scale-y'],
182+
select: ['select'],
183+
self: ['align-self'],
184+
sepia: ['sepia'],
185+
shadow: ['shadow'],
186+
skew: ['skew-x', 'skew-y'],
187+
slashed: ['fvn-slashed-zero'],
188+
space: ['space-x', 'space-x-reverse', 'space-y', 'space-y-reverse'],
189+
sr: ['sr'],
190+
stacked: ['fvn-fraction'],
191+
static: ['position'],
192+
sticky: ['position'],
193+
stroke: ['stroke', 'stroke-w'],
194+
subpixel: ['font-smoothing'],
195+
table: ['display', 'table-layout'],
196+
tabular: ['fvn-spacing'],
197+
text: ['font-size', 'text-alignment', 'text-color', 'text-opacity'],
198+
to: ['gradient-to'],
199+
top: ['top'],
200+
tracking: ['tracking'],
201+
transform: ['transform'],
202+
transition: ['transition'],
203+
translate: ['translate-x', 'translate-y'],
204+
truncate: ['text-overflow'],
205+
underline: ['text-decoration'],
206+
uppercase: ['text-transform'],
207+
via: ['gradient-via'],
208+
visible: ['visibility'],
209+
w: ['w'],
210+
whitespace: ['whitespace'],
211+
z: ['z'],
212+
})
213+
})
214+
215+
function getClassGroupsInClassPart(classPart: ClassPartObject): Set<string> {
216+
const { classGroupId, validators, nextPart } = classPart
217+
218+
const classGroups = new Set<string>()
219+
220+
if (classGroupId) {
221+
classGroups.add(classGroupId)
222+
}
223+
224+
validators.forEach((validator) => classGroups.add(validator.classGroupId))
225+
226+
Object.values(nextPart).forEach((nextClassPart) => {
227+
getClassGroupsInClassPart(nextClassPart).forEach((classGroup) => {
228+
classGroups.add(classGroup)
229+
})
230+
})
231+
232+
return classGroups
233+
}

0 commit comments

Comments
 (0)