/
preset-attributify.test.ts.snap
370 lines (359 loc) · 14.3 KB
/
preset-attributify.test.ts.snap
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
// Vitest Snapshot v1
exports[`attributify > autocomplete extractor 5`] = `
"
<button
uno-layer-base=\\"c-white/10 hover:c-black/20\\"
sm=\\"[color:red]\\"
md=\\"[--var:var(--another)]\\"
lg=\\"bg-blue-600\\"
class=\\"absolute fixed\\"
important=\\"text-red bg-red\\"
bg=\\"blue-4001 hover:blue-500 dark:!blue-500 dark:hover:blue-600\\"
text=\\"sm white\\"
!leading-4
flex=\\"!~ col\\"
p=\\"t-2\\"
pt=\\"2\\"
border=\\"rounded-xl x-1 x-style-dashed\\"
:font=\\"foo > bar ? 'mono' : 'sans'\\"
v-bind:p=\\"y-2 x-4\\"
border=\\"2 rounded blue-200\\"
un-children=\\"m-auto\\"
pt2 rounded-sm
inline-block
transform
translate-x-100%
translate-y-[10%]
rotate-30
after=\\"content-unocss\\"
rotate-60=\\"\\" ma=\\"\\"
m='\`
1 2
3
\`'
>
Button
</button>
"
`;
exports[`attributify > compatible with full controlled rules 1`] = `
"/* layer: default */
[custom~=\\"\\\\31 \\"] {
font-size: 1px;
}
/* you can have multiple rules */
[custom~=\\"\\\\31 \\"]::after {
content: 'after';
}
.foo > [custom~=\\"\\\\31 \\"] {
color: red;
}
/* or media queries */
@media (min-width: 680px) {
[custom~=\\"\\\\31 \\"] {
font-size: 16px;
}
}
.custom-2 {
font-size: 2px;
}
/* you can have multiple rules */
.custom-2::after {
content: 'after';
}
.foo > .custom-2 {
color: red;
}
/* or media queries */
@media (min-width: 680px) {
.custom-2 {
font-size: 16px;
}
}
"
`;
exports[`attributify > extractor1 1`] = `
Set {
"[uno-layer-base~=\\"c-white/10\\"]",
"[uno-layer-base~=\\"hover:c-black/20\\"]",
"[sm~=\\"[color:red]\\"]",
"[md~=\\"[--var:var(--another)]\\"]",
"[lg~=\\"bg-blue-600\\"]",
"absolute",
"fixed",
"[important~=\\"text-red\\"]",
"[important~=\\"bg-red\\"]",
"[bg~=\\"blue-400\\"]",
"[bg~=\\"hover:blue-500\\"]",
"[bg~=\\"dark:!blue-500\\"]",
"[bg~=\\"dark:hover:blue-600\\"]",
"[text~=\\"sm\\"]",
"[text~=\\"white\\"]",
"[!leading-4=\\"\\"]",
"[flex~=\\"!~\\"]",
"[flex~=\\"col\\"]",
"[p~=\\"t-2\\"]",
"[pt~=\\"2\\"]",
"[border~=\\"rounded-xl\\"]",
"[border~=\\"x-1\\"]",
"[border~=\\"x-style-dashed\\"]",
"[font~=\\"foo\\"]",
"[font~=\\">\\"]",
"[font~=\\"bar\\"]",
"[font~=\\"?\\"]",
"[font~=\\"mono\\"]",
"[font~=\\":\\"]",
"[font~=\\"sans\\"]",
"[p~=\\"y-2\\"]",
"[p~=\\"x-4\\"]",
"[border~=\\"2\\"]",
"[border~=\\"rounded\\"]",
"[border~=\\"blue-200\\"]",
"[un-children~=\\"m-auto\\"]",
"[pt2=\\"\\"]",
"[rounded-sm=\\"\\"]",
"[inline-block=\\"\\"]",
"[transform=\\"\\"]",
"[translate-x-100%=\\"\\"]",
"[translate-y-=\\"\\"]",
"[%=\\"\\"]",
"[rotate-30=\\"\\"]",
"[after~=\\"content-unocss\\"]",
"[rotate-60=\\"\\"]",
"[ma=\\"\\"]",
"[m~=\\"1\\"]",
"[m~=\\"2\\"]",
"[m~=\\"3\\"]",
}
`;
exports[`attributify > extractor2 1`] = `
Set {
"[h-80=\\"\\"]",
"[text-center=\\"\\"]",
"[flex=\\"\\"]",
"[flex-col=\\"\\"]",
"[align-center=\\"\\"]",
"[select-none=\\"\\"]",
"[all:transition-400=\\"\\"]",
"[type~=\\"checkbox\\"]",
"[peer=\\"\\"]",
"[mt-a=\\"\\"]",
"[mb-a=\\"\\"]",
"[group=\\"\\"]",
"[peer-checked~=\\"text-4xl\\"]",
"[font-100=\\"\\"]",
"[text-4xl=\\"\\"]",
"[mb--3=\\"\\"]",
"[p-10=\\"\\"]",
"[bg-gradient~=\\"to-r\\"]",
"[bg-gradient~=\\"from-yellow-400\\"]",
"[bg-gradient~=\\"via-red-500\\"]",
"[bg-gradient~=\\"to-pink-500\\"]",
"[text-5xl=\\"\\"]",
"[sm~=\\"bg-blue-600\\"]",
"[op-20=\\"\\"]",
"[font-200=\\"\\"]",
"[mt-1=\\"\\"]",
"[tracking-wider=\\"\\"]",
"[group-hover~=\\"text-teal-400\\"]",
"[group-hover~=\\"op-50\\"]",
"[ma=\\"\\"]",
"[inline-flex=\\"\\"]",
"[relative=\\"\\"]",
"[h-14=\\"\\"]",
"[type~=\\"text\\"]",
"[m-0=\\"\\"]",
"[pt-4=\\"\\"]",
"[px-4=\\"\\"]",
"[text-true-gray-800=\\"\\"]",
"[placeholder=\\"\\"]",
"[absolute=\\"\\"]",
"[leading-1rem=\\"\\"]",
"[left-4=\\"\\"]",
"[pointer-events-none=\\"\\"]",
"[text-gray-7=\\"\\"]",
"[top~=\\"1/3\\"]",
"[transition~=\\"200\\"]",
"[transition~=\\"linear\\"]",
"[peer-not-placeholder-shown~=\\"-translate-y-4\\"]",
"[peer-not-placeholder-shown~=\\"scale-75\\"]",
"[peer-not-placeholder-shown~=\\"origin-top-left\\"]",
"[peer-not-placeholder-shown~=\\"text-green-500\\"]",
"[peer-focus~=\\"-translate-y-4\\"]",
"[peer-focus~=\\"scale-75\\"]",
"[peer-focus~=\\"origin-top-left\\"]",
"[peer-focus~=\\"text-green-500\\"]",
"[before~=\\"content-!\\"]",
"[after~=\\"content-[!]\\"]",
}
`;
exports[`attributify > fixture1 1`] = `
"/* layer: base */
[uno-layer-base~=\\"c-white\\\\/10\\"]{color:rgba(255,255,255,0.1);}
[uno-layer-base~=\\"hover\\\\:c-black\\\\/20\\"]:hover{color:rgba(0,0,0,0.2);}
/* layer: default */
.absolute{position:absolute;}
.fixed{position:fixed;}
[m~=\\"\\\\31 \\"]{margin:0.25rem;}
[m~=\\"\\\\32 \\"]{margin:0.5rem;}
[m~=\\"\\\\33 \\"]{margin:0.75rem;}
[ma=\\"\\"],
[un-children~=\\"m-auto\\"]>*{margin:auto;}
[inline-block=\\"\\"]{display:inline-block;}
[flex~=\\"\\\\!\\\\~\\"]{display:flex !important;}
[flex~=\\"col\\"]{flex-direction:column;}
[translate-x-100\\\\%=\\"\\"]{--un-translate-x:100%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
[rotate-30=\\"\\"]{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:30deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
[rotate-60=\\"\\"]{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:60deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
[transform=\\"\\"]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
[border~=\\"\\\\32 \\"]{border-width:2px;border-style:solid;}
[border~=\\"x-1\\"]{border-left-width:1px;border-right-width:1px;border-left-style:solid;border-right-style:solid;}
[border~=\\"blue-200\\"]{--un-border-opacity:1;border-color:rgba(191,219,254,var(--un-border-opacity));}
[border~=\\"rounded-xl\\"]{border-radius:0.75rem;}
[border~=\\"rounded\\"]{border-radius:0.25rem;}
[rounded-sm=\\"\\"]{border-radius:0.125rem;}
[border~=\\"x-style-dashed\\"]{border-left-style:dashed;border-right-style:dashed;}
.dark [bg~=\\"dark\\\\:\\\\!blue-500\\"]{--un-bg-opacity:1 !important;background-color:rgba(59,130,246,var(--un-bg-opacity)) !important;}
.dark [bg~=\\"dark\\\\:hover\\\\:blue-600\\"]:hover{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));}
[bg~=\\"blue-400\\"]{--un-bg-opacity:1;background-color:rgba(96,165,250,var(--un-bg-opacity));}
[bg~=\\"hover\\\\:blue-500\\"]:hover{--un-bg-opacity:1;background-color:rgba(59,130,246,var(--un-bg-opacity));}
[important~=\\"bg-red\\"]{--un-bg-opacity:1 !important;background-color:rgba(248,113,113,var(--un-bg-opacity)) !important;}
[p~=\\"x-4\\"]{padding-left:1rem;padding-right:1rem;}
[p~=\\"y-2\\"]{padding-top:0.5rem;padding-bottom:0.5rem;}
[p~=\\"t-2\\"],
[pt~=\\"\\\\32 \\"],
[pt2=\\"\\"]{padding-top:0.5rem;}
[font~=\\"mono\\"]{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\\"Liberation Mono\\",\\"Courier New\\",monospace;}
[font~=\\"sans\\"]{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,\\"Helvetica Neue\\",Arial,\\"Noto Sans\\",sans-serif,\\"Apple Color Emoji\\",\\"Segoe UI Emoji\\",\\"Segoe UI Symbol\\",\\"Noto Color Emoji\\";}
[text~=\\"sm\\"]{font-size:0.875rem;line-height:1.25rem;}
[\\\\!leading-4=\\"\\"]{line-height:1rem !important;}
[important~=\\"text-red\\"]{--un-text-opacity:1 !important;color:rgba(248,113,113,var(--un-text-opacity)) !important;}
[text~=\\"white\\"]{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));}
[after~=\\"content-unocss\\"]::after{content:\\"unocss\\";}
@media (min-width: 640px){
[sm~=\\"\\\\[color\\\\:red\\\\]\\"]{color:red;}
}
@media (min-width: 768px){
[md~=\\"\\\\[--var\\\\:var\\\\(--another\\\\)\\\\]\\"]{--var:var(--another);}
}
@media (min-width: 1024px){
[lg~=\\"bg-blue-600\\"]{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));}
}"
`;
exports[`attributify > fixture2 1`] = `
"/* layer: default */
[pointer-events-none=\\"\\"]{pointer-events:none;}
[absolute=\\"\\"]{position:absolute;}
[relative=\\"\\"]{position:relative;}
[left-4=\\"\\"]{left:1rem;}
[top~=\\"\\\\31 \\\\/3\\"]{top:33.3333333333%;}
[m-0=\\"\\"]{margin:0rem;}
[ma=\\"\\"]{margin:auto;}
[mb--3=\\"\\"]{margin-bottom:-0.75rem;}
[mb-a=\\"\\"]{margin-bottom:auto;}
[mt-1=\\"\\"]{margin-top:0.25rem;}
[mt-a=\\"\\"]{margin-top:auto;}
[h-14=\\"\\"]{height:3.5rem;}
[h-80=\\"\\"]{height:20rem;}
[flex=\\"\\"]{display:flex;}
[inline-flex=\\"\\"]{display:inline-flex;}
[flex-col=\\"\\"]{flex-direction:column;}
[peer=\\"\\"]:focus~[peer-focus~=\\"origin-top-left\\"],
[peer=\\"\\"]:not(:placeholder-shown)~[peer-not-placeholder-shown~=\\"origin-top-left\\"]{transform-origin:top left;}
[peer=\\"\\"]:focus~[peer-focus~=\\"-translate-y-4\\"],
[peer=\\"\\"]:not(:placeholder-shown)~[peer-not-placeholder-shown~=\\"-translate-y-4\\"]{--un-translate-y:-1rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
[peer=\\"\\"]:focus~[peer-focus~=\\"scale-75\\"],
[peer=\\"\\"]:not(:placeholder-shown)~[peer-not-placeholder-shown~=\\"scale-75\\"]{--un-scale-x:0.75;--un-scale-y:0.75;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
[select-none=\\"\\"]{user-select:none;}
[bg-gradient~=\\"from-yellow-400\\"]{--un-gradient-from:rgba(250,204,21,var(--un-from-opacity, 1));--un-gradient-to:rgba(250,204,21,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
[bg-gradient~=\\"to-pink-500\\"]{--un-gradient-to:rgba(236,72,153,var(--un-to-opacity, 1));}
[bg-gradient~=\\"via-red-500\\"]{--un-gradient-to:rgba(239,68,68,0);--un-gradient-stops:var(--un-gradient-from), rgba(239,68,68,var(--un-via-opacity, 1)), var(--un-gradient-to);}
[bg-gradient~=\\"to-r\\"]{--un-gradient-shape:to right;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}
[p-10=\\"\\"]{padding:2.5rem;}
[px-4=\\"\\"]{padding-left:1rem;padding-right:1rem;}
[pt-4=\\"\\"]{padding-top:1rem;}
[text-center=\\"\\"]{text-align:center;}
[peer=\\"\\"]:checked~[peer-checked~=\\"text-4xl\\"],
[text-4xl=\\"\\"]{font-size:2.25rem;line-height:2.5rem;}
[text-5xl=\\"\\"]{font-size:3rem;line-height:1;}
[font-100=\\"\\"]{font-weight:100;}
[font-200=\\"\\"]{font-weight:200;}
[leading-1rem=\\"\\"]{line-height:1rem;}
[tracking-wider=\\"\\"]{letter-spacing:0.05em;}
[group=\\"\\"]:hover [group-hover~=\\"text-teal-400\\"]{--un-text-opacity:1;color:rgba(45,212,191,var(--un-text-opacity));}
[peer=\\"\\"]:focus~[peer-focus~=\\"text-green-500\\"],
[peer=\\"\\"]:not(:placeholder-shown)~[peer-not-placeholder-shown~=\\"text-green-500\\"]{--un-text-opacity:1;color:rgba(34,197,94,var(--un-text-opacity));}
[text-gray-7=\\"\\"]{--un-text-opacity:1;color:rgba(55,65,81,var(--un-text-opacity));}
[text-true-gray-800=\\"\\"]{--un-text-opacity:1;color:rgba(38,38,38,var(--un-text-opacity));}
[group=\\"\\"]:hover [group-hover~=\\"op-50\\"]{opacity:0.5;}
[op-20=\\"\\"]{opacity:0.2;}
[all\\\\:transition-400=\\"\\"] *{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:400ms;}
[transition~=\\"\\\\32 00\\"]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;}
[after~=\\"content-\\\\[\\\\!\\\\]\\"]::after{content:!;}
[before~=\\"content-\\\\!\\"]::before{content:\\"!\\";}
@media (min-width: 640px){
[sm~=\\"bg-blue-600\\"]{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));}
}"
`;
exports[`attributify > variant 1`] = `
[
"uno-layer-base-c-white/10",
"hover:uno-layer-base-c-black/20",
"sm-[color:red]",
"md-[--var:var(--another)]",
"lg-bg-blue-600",
undefined,
undefined,
"important-text-red",
"important-bg-red",
"bg-blue-400",
"hover:bg-blue-500",
"dark:!bg-blue-500",
"dark:hover:bg-blue-600",
"text-sm",
"text-white",
"!leading-4",
"!flex",
"flex-col",
"p-t-2",
"pt-2",
"border-rounded-xl",
"border-x-1",
"border-x-style-dashed",
"font-foo",
"font->",
"font-bar",
"font-?",
"font-mono",
"font-:",
"font-sans",
"p-y-2",
"p-x-4",
"border-2",
"border-rounded",
"border-blue-200",
"children-m-auto",
"pt2",
"rounded-sm",
"inline-block",
"transform",
"translate-x-100%",
"translate-y-",
"%",
"rotate-30",
"after-content-unocss",
"rotate-60",
"ma",
"m-1",
"m-2",
"m-3",
]
`;
exports[`attributify > with trueToNonValued 1`] = `
"/* layer: default */
.grid,
[grid~=\\"\\\\~\\"]{display:grid;}
[grid~=\\"cols-2\\"]{grid-template-columns:repeat(2,minmax(0,1fr));}
.flex,
[flex~=\\"true\\"]{display:flex;}"
`;