/
parallel-variants.test.js
70 lines (64 loc) · 1.85 KB
/
parallel-variants.test.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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import postcss from 'postcss'
import path from 'path'
import tailwind from '../../src/jit/index.js'
import { transformAllSelectors, updateAllClasses } from '../../src/util/pluginUtils.js'
function run(input, config = {}) {
const { currentTestName } = expect.getState()
return postcss(tailwind(config)).process(input, {
from: `${path.resolve(__filename)}?test=${currentTestName}`,
})
}
test('basic parallel variants', async () => {
let config = {
mode: 'jit',
purge: [
{
raw: '<div class="font-normal hover:test:font-black test:font-bold test:font-medium"></div>',
},
],
theme: {},
plugins: [
function test({ addVariant, config }) {
addVariant('test', [
transformAllSelectors((selector) => {
let variantSelector = updateAllClasses(selector, (className) => {
return `test${config('separator')}${className}`
})
return `${variantSelector} *::test`
}),
transformAllSelectors((selector) => {
return updateAllClasses(selector, (className, { withPseudo }) => {
return withPseudo(`test${config('separator')}${className}`, '::test')
})
}),
])
},
],
}
let css = `@tailwind utilities`
return run(css, config).then((result) => {
expect(result.css).toMatchFormattedCss(`
.font-normal {
font-weight: 400;
}
.test\\:font-bold *::test {
font-weight: 700;
}
.test\\:font-medium *::test {
font-weight: 500;
}
.hover\\:test\\:font-black:hover *::test {
font-weight: 900;
}
.test\\:font-bold::test {
font-weight: 700;
}
.test\\:font-medium::test {
font-weight: 500;
}
.hover\\:test\\:font-black:hover::test {
font-weight: 900;
}
`)
})
})