/
transformer-attributify-jsx.test.ts
112 lines (104 loc) · 4.22 KB
/
transformer-attributify-jsx.test.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
110
111
112
import MagicString from 'magic-string'
import presetAttributify from '@unocss/preset-attributify'
import presetUno from '@unocss/preset-uno'
import { createGenerator } from '@unocss/core'
import { describe, expect, test } from 'vitest'
import transformerAttributifyJsx from '../packages/transformer-attributify-jsx/src'
describe('transformerAttributifyJs', () => {
const originalCode = `
<div h-full text-center flex select-none className={red ? 'text-red': 'text-green'}>
<input value={ target ? '10px' : '20px'} style={{ height: '100px' }}>
<div ma>
<div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s key={index}>
unocss
</div>
<div op30 text-lg fw300 m1 className={hidden && 'op0'}>
The instant on-demand Atomic CSS engine.
</div>
<div m2 flex justify-center text-2xl op30 hover:op80 hover:text-2xl>
<a
i-carbon-logo-github
text-inherit
href="https://github.com/unocss/unocss"
target="_blank"
></a>
</div>
</div>
</div>
<div absolute bottom-5 right-0 left-0 text-center op30 fw300>
on-demand · instant · fully customizable
</div>
`.trim()
const uno = createGenerator({
presets: [
presetUno(),
presetAttributify(),
],
})
test('transform', async () => {
const code = new MagicString(originalCode)
await transformerAttributifyJsx().transform(code, 'app.tsx', { uno, tokens: new Set() } as any)
expect(code.toString()).toMatchInlineSnapshot(`
"<div h-full=\\"\\" text-center=\\"\\" flex=\\"\\" select-none=\\"\\" className={red ? 'text-red': 'text-green'}>
<input value={ target ? '10px' : '20px'} style={{ height: '100px' }}>
<div ma=\\"\\">
<div text-5xl=\\"\\" fw100=\\"\\" animate-bounce-alt=\\"\\" animate-count-infinite=\\"\\" animate-duration-1s=\\"\\" key={index}>
unocss
</div>
<div op30=\\"\\" text-lg=\\"\\" fw300=\\"\\" m1=\\"\\" className={hidden && 'op0'}>
The instant on-demand Atomic CSS engine.
</div>
<div m2=\\"\\" flex=\\"\\" justify-center=\\"\\" text-2xl=\\"\\" op30=\\"\\" hover-op80=\\"\\" hover-text-2xl=\\"\\">
<a
i-carbon-logo-github
text-inherit=\\"\\"
href=\\"https://github.com/unocss/unocss\\"
target=\\"_blank\\"
></a>
</div>
</div>
</div>
<div absolute=\\"\\" bottom-5=\\"\\" right-0=\\"\\" left-0=\\"\\" text-center=\\"\\" op30=\\"\\" fw300=\\"\\">
on-demand · instant · fully customizable
</div>"
`)
})
test('blocklist', async () => {
const code = new MagicString(originalCode)
const blocklist: (string | RegExp)[] = ['flex', 'absolute']
await transformerAttributifyJsx({
blocklist,
}).transform(code, 'app.jsx', { uno, tokens: new Set() } as any)
expect(code.toString()).toMatchInlineSnapshot(`
"<div h-full=\\"\\" text-center=\\"\\" flex select-none=\\"\\" className={red ? 'text-red': 'text-green'}>
<input value={ target ? '10px' : '20px'} style={{ height: '100px' }}>
<div ma=\\"\\">
<div text-5xl=\\"\\" fw100=\\"\\" animate-bounce-alt=\\"\\" animate-count-infinite=\\"\\" animate-duration-1s=\\"\\" key={index}>
unocss
</div>
<div op30=\\"\\" text-lg=\\"\\" fw300=\\"\\" m1=\\"\\" className={hidden && 'op0'}>
The instant on-demand Atomic CSS engine.
</div>
<div m2=\\"\\" flex justify-center=\\"\\" text-2xl=\\"\\" op30=\\"\\" hover-op80=\\"\\" hover-text-2xl=\\"\\">
<a
i-carbon-logo-github
text-inherit=\\"\\"
href=\\"https://github.com/unocss/unocss\\"
target=\\"_blank\\"
></a>
</div>
</div>
</div>
<div absolute bottom-5=\\"\\" right-0=\\"\\" left-0=\\"\\" text-center=\\"\\" op30=\\"\\" fw300=\\"\\">
on-demand · instant · fully customizable
</div>"
`)
const codeToString = code.toString()
blocklist.forEach((rule) => {
if (rule instanceof RegExp)
expect(new RegExp(`${rule.source}=""`).test(codeToString)).not.true
else
expect(codeToString).not.toMatch(`${rule}=""`)
})
})
})