-
Notifications
You must be signed in to change notification settings - Fork 170
/
css_test.ts
100 lines (89 loc) · 3.15 KB
/
css_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
import { assertEquals } from 'std/testing/asserts.ts'
import { CSSProcessor } from './css.ts'
import { stopEsbuild } from './helper.ts'
Deno.test('css processor', async () => {
const processor = new CSSProcessor()
const { code } = await processor.transform(
'/test.css',
'h1 { font-size: 18px; }'
)
assertEquals(code, [
'import { applyCSS } from "https://deno.land/x/aleph/framework/core/style.ts"',
'const css = "h1 { font-size: 18px; }"',
'applyCSS("/test.css", css)',
'export default { __url$: "/test.css", __css$: css, }'
].join('\n'))
})
Deno.test({
name: 'css processor in production mode',
sanitizeResources: false,
fn: async () => {
const processor = new CSSProcessor()
processor.config(true, { modules: false, postcss: { plugins: [] } })
const { code } = await processor.transform(
'/test.css',
'h1 { font-size: 18px; }'
)
assertEquals(code, [
'import { applyCSS } from "https://deno.land/x/aleph/framework/core/style.ts"',
'const css = "h1{font-size:18px}\\n"',
'applyCSS("/test.css", css)',
'export default { __url$: "/test.css", __css$: css, }'
].join('\n'))
stopEsbuild()
}
})
Deno.test('css processor of remote CSS', async () => {
const processor = new CSSProcessor()
processor.config(true, { modules: false, postcss: { plugins: [] } })
const { code } = await processor.transform(
'https://esm.sh/tailwindcss/dist/tailwind.min.css',
''
)
assertEquals(code, [
'import { applyCSS } from "https://deno.land/x/aleph/framework/core/style.ts"',
'applyCSS("https://esm.sh/tailwindcss/dist/tailwind.min.css")',
'export default { __url$: "https://esm.sh/tailwindcss/dist/tailwind.min.css" }'
].join('\n'))
})
Deno.test('css processor enables module feature', async () => {
const processor = new CSSProcessor()
processor.config(false, {
modules: {
scopeBehaviour: 'local',
generateScopedName: '[name]_[local]'
}, postcss: { plugins: [] }
})
const { code } = await processor.transform(
'/test.css',
'.name { font-size: 18px; }'
)
assertEquals(code, [
'import { applyCSS } from "https://deno.land/x/aleph/framework/core/style.ts"',
'const css = ".test_name { font-size: 18px; }"',
'applyCSS("/test.css", css)',
'export default { __url$: "/test.css", __css$: css, "name":"test_name"}'
].join('\n'))
})
Deno.test('css processor for inline style', async () => {
const processor = new CSSProcessor()
const { code } = await processor.transform(
'#inline-style-{}',
'h1 { font-size: 18px; }'
)
assertEquals(code, 'h1 { font-size: 18px; }')
})
Deno.test('css processor with postcss plugins', async () => {
const processor = new CSSProcessor()
processor.config(false, { modules: false, postcss: { plugins: ['postcss-nested'] } })
const { code } = await processor.transform(
'/test.css',
'.foo { .bar { font-size: 100%; } }'
)
assertEquals(code, [
'import { applyCSS } from "https://deno.land/x/aleph/framework/core/style.ts"',
'const css = ".foo .bar { font-size: 100%; }"',
'applyCSS("/test.css", css)',
'export default { __url$: "/test.css", __css$: css, }'
].join('\n'))
})