Skip to content

Commit ee37578

Browse files
EazashEazash
committed
test: use vitest to add tests
1 parent 9450d93 commit ee37578

File tree

4 files changed

+2209
-17
lines changed

4 files changed

+2209
-17
lines changed

‎index.test.js‎

Lines changed: 146 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,154 @@
1-
const postcss = require('postcss')
2-
const { equal } = require('node:assert')
3-
const { test } = require('node:test')
4-
5-
const plugin = require('./')
1+
import postcss from 'postcss'
2+
import plugin from '.'
3+
import { it, expect } from 'vitest'
4+
import { describe } from 'vitest'
65

76
async function run(input, output, opts = {}) {
87
let result = await postcss([plugin(opts)]).process(input, { from: undefined })
9-
equal(result.css, output)
10-
equal(result.warnings().length, 0)
8+
expect(result.css).toEqual(output)
9+
expect(result.warnings().length).toEqual(0)
1110
}
1211

13-
/* Write tests here
12+
it('does not change unrelated CSS', async () => {
13+
await run('.foo { margin-top: 1px; }', '.foo { margin-top: 1px; }', {})
14+
})
15+
16+
it('handles space-x-* selector', async () => {
17+
const input = `
18+
.space-x-4 > :not(:last-child) {
19+
--tw-space-x-reverse: 0;
20+
margin-right: calc(1rem * var(--tw-space-x-reverse));
21+
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
22+
}
23+
`
24+
const output = `
25+
.space-x-4 > :not(:last-child) {
26+
--tw-space-x-reverse: 0;
27+
margin-right: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
28+
margin-left: calc(1rem * var(--tw-space-x-reverse));
29+
}
30+
`
31+
await run(input, output, {})
32+
})
33+
34+
it('handles space-y-* selector', async () => {
35+
const input = `
36+
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
37+
--tw-space-y-reverse: 0;
38+
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
39+
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
40+
}
41+
`
42+
const output = `
43+
.space-y-2 > :not(:last-child) {
44+
--tw-space-y-reverse: 0;
45+
margin-top: calc(0.5rem * var(--tw-space-y-reverse));
46+
margin-bottom: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
47+
}
48+
`
49+
await run(input, output, {})
50+
})
51+
52+
it('handles divide-x-* classes', async () => {
53+
const input = `
54+
.divide-x-2 > :not([hidden]) ~ :not([hidden]) {
55+
--tw-divide-x-reverse: 0;
56+
border-right-width: calc(2px * var(--tw-divide-x-reverse));
57+
border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
58+
}
59+
`
60+
const output = `
61+
.divide-x-2 > :not(:last-child) {
62+
--tw-divide-x-reverse: 0;
63+
border-right-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
64+
border-left-width: calc(2px * var(--tw-divide-x-reverse));
65+
}
66+
`
67+
await run(input, output, {})
68+
})
1469

15-
test('does something', async () => {
16-
await run('a{ }', 'a{ }', { })
70+
it('handles divide-y-* classes', async () => {
71+
const input = `
72+
.divide-y-4 > :not([hidden]) ~ :not([hidden]) {
73+
--tw-divide-y-reverse: 0;
74+
border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
75+
border-bottom-width: calc(4px * var(--tw-divide-y-reverse));
76+
}
77+
`
78+
const output = `
79+
.divide-y-4 > :not(:last-child) {
80+
--tw-divide-y-reverse: 0;
81+
border-top-width: calc(4px * var(--tw-divide-y-reverse));
82+
border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
83+
}
84+
`
85+
await run(input, output, {})
1786
})
1887

19-
*/
88+
it('handles divide-* color classes', async () => {
89+
const input = `
90+
.divide-black > :not([hidden]) ~ :not([hidden]) {
91+
--tw-divide-opacity: 1;
92+
border-color: rgb(0 0 0 / var(--tw-divide-opacity, 1));
93+
}
94+
`
95+
const output = `
96+
.divide-black > :not(:last-child) {
97+
--tw-divide-opacity: 1;
98+
border-color: rgb(0 0 0 / var(--tw-divide-opacity, 1));
99+
}
100+
`
101+
await run(input, output, {})
102+
})
103+
104+
it('handles arbitrary values', async () => {
105+
const input = `
106+
.space-y-\[4px\] > :not([hidden]) ~ :not([hidden]) {
107+
--tw-space-y-reverse: 0;
108+
margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse)));
109+
margin-bottom: calc(4px * var(--tw-space-y-reverse));
110+
}
111+
`
112+
const output = `
113+
.space-y-\[4px\] > :not(:last-child) {
114+
--tw-space-y-reverse: 0;
115+
margin-top: calc(4px * var(--tw-space-y-reverse));
116+
margin-bottom: calc(4px * calc(1 - var(--tw-space-y-reverse)));
117+
}
118+
`
119+
await run(input, output, {})
120+
})
121+
122+
it('handles prefixed space classes', async () => {
123+
const input = `
124+
@media (min-width: 768px) {
125+
.md\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
126+
--tw-space-y-reverse: 0;
127+
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
128+
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
129+
}
130+
}
131+
`
132+
const output = `
133+
@media (min-width: 768px) {
134+
.md\:space-y-6 > :not(:last-child) {
135+
--tw-space-y-reverse: 0;
136+
margin-top: calc(1.5rem * var(--tw-space-y-reverse));
137+
margin-bottom: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
138+
}
139+
}
140+
`
141+
await run(input, output, {})
142+
})
143+
144+
145+
it('ignores non-tailwind selectors', async () => {
146+
const input = `
147+
.custom-class > div {
148+
--custom-margin: 10px;
149+
margin-top: calc(var(--custom-margin) * 2);
150+
}
151+
`
152+
const output = input
153+
await run(input, output, {})
154+
})

‎package.json‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,16 @@
22
"name": "postcss-tailwind-space-divide-optimizer",
33
"version": "0.0.0",
44
"description": "PostCSS plugin to optimize the selector tailwindcss v3 .space-* & .divide-* classes",
5-
"keywords": ["postcss", "css", "postcss-plugin", "postcss-tailwind-space-divide-optimizer"],
5+
"keywords": [
6+
"postcss",
7+
"css",
8+
"postcss-plugin",
9+
"postcss-tailwind-space-divide-optimizer"
10+
],
611
"scripts": {
7-
"unit": "node --test index.test.js",
8-
"test": "npm run unit && eslint ."
12+
"unit": "vitest index.test.js",
13+
"test": "pnpm run unit",
14+
"lint": "eslint . --ext .js,.ts"
915
},
1016
"author": "Ezira Ashenafi <eazash22@gmail.com>",
1117
"license": "MIT",
@@ -17,8 +23,10 @@
1723
"postcss": "^8.4.27"
1824
},
1925
"devDependencies": {
26+
"@vitest/coverage-v8": "3.2.4",
2027
"eslint": "^8.47.0",
21-
"postcss": "^8.4.27"
28+
"postcss": "^8.4.27",
29+
"vitest": "^3.2.4"
2230
},
2331
"eslintConfig": {
2432
"parserOptions": {
@@ -28,6 +36,9 @@
2836
"node": true,
2937
"es6": true
3038
},
31-
"extends": ["eslint:recommended"]
32-
}
39+
"extends": [
40+
"eslint:recommended"
41+
]
42+
},
43+
"packageManager": "pnpm@10.12.1+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac"
3344
}

0 commit comments

Comments
 (0)