Skip to content

Commit 3275cbd

Browse files
sonofmagicsonofmagic
committed
chore(postcss): add dark mode case
1 parent cedd932 commit 3275cbd

8 files changed

Lines changed: 181 additions & 0 deletions

File tree

‎packages/postcss/test/__snapshots__/darkMode.test.ts.snap‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2+
3+
exports[`darkMode > darkMode: 'class', 1`] = `
4+
".dark view.darkcbg-black,.dark text.darkcbg-black {
5+
--tw-bg-opacity: 1;
6+
background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1)) ;
7+
}"
8+
`;
9+
10+
exports[`darkMode > darkMode: 'class', uni-app x 1`] = `
11+
".darkcbg-black {
12+
--tw-bg-opacity: 1;
13+
background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1)) ;
14+
}"
15+
`;
16+
17+
exports[`darkMode > darkMode: 'selector', 1`] = `
18+
".darkcbg-black:where(.dark,.dark view) {
19+
--tw-bg-opacity: 1;
20+
background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1)) ;
21+
}
22+
.darkcbg-black:where(.dark,.dark text) {
23+
--tw-bg-opacity: 1;
24+
background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1)) ;
25+
}"
26+
`;
27+
28+
exports[`darkMode > darkMode: 'selector', uni-app x 1`] = `
29+
".darkcbg-black {
30+
--tw-bg-opacity: 1;
31+
background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1)) ;
32+
}"
33+
`;
34+
35+
exports[`darkMode > darkMode: ['selector', '[data-mode="dark"]'], 1`] = `
36+
".darkcbg-black:where(, view) {
37+
--tw-bg-opacity: 1;
38+
background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1)) ;
39+
}
40+
.darkcbg-black:where(, text) {
41+
--tw-bg-opacity: 1;
42+
background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1)) ;
43+
}"
44+
`;
45+
46+
exports[`darkMode > darkMode: ['selector', '[data-mode="dark"]'], uni-app x 1`] = `
47+
".darkcbg-black {
48+
--tw-bg-opacity: 1;
49+
background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1)) ;
50+
}"
51+
`;
52+
53+
exports[`darkMode > darkMode: ['variant', '&:not(.light *)'], 1`] = `
54+
".darkcbg-black:not(view):not(text) {
55+
--tw-bg-opacity: 1;
56+
background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1)) ;
57+
}"
58+
`;
59+
60+
exports[`darkMode > darkMode: ['variant', '&:not(.light *)'], uni-app x 1`] = `
61+
".darkcbg-black:not(view):not(text) {
62+
--tw-bg-opacity: 1;
63+
background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1)) ;
64+
}"
65+
`;

‎packages/postcss/test/darkMode.test.ts‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import fs from 'fs-extra'
2+
import path from 'pathe'
3+
import { createStyleHandler } from '@/index'
4+
5+
function getCase(name: string) {
6+
return fs.readFile(path.resolve(import.meta.dirname, `./fixtures/css/darkMode/${name}`), 'utf8')
7+
}
8+
9+
describe('darkMode', () => {
10+
it(`darkMode: 'class',`, async () => {
11+
const styleHandler = createStyleHandler({
12+
isMainChunk: true,
13+
})
14+
const code = await getCase('class.css')
15+
const { css } = await styleHandler(code)
16+
expect(css).toMatchSnapshot()
17+
})
18+
19+
it(`darkMode: 'class', uni-app x`, async () => {
20+
const styleHandler = createStyleHandler({
21+
isMainChunk: true,
22+
uniAppX: true,
23+
})
24+
const code = await getCase('class.css')
25+
const { css } = await styleHandler(code)
26+
expect(css).toMatchSnapshot()
27+
})
28+
29+
it(`darkMode: 'selector',`, async () => {
30+
const styleHandler = createStyleHandler({
31+
isMainChunk: true,
32+
})
33+
const code = await getCase('selector.css')
34+
const { css } = await styleHandler(code)
35+
expect(css).toMatchSnapshot()
36+
})
37+
38+
it(`darkMode: 'selector', uni-app x`, async () => {
39+
const styleHandler = createStyleHandler({
40+
isMainChunk: true,
41+
uniAppX: true,
42+
})
43+
const code = await getCase('selector.css')
44+
const { css } = await styleHandler(code)
45+
expect(css).toMatchSnapshot()
46+
})
47+
48+
it(`darkMode: ['selector', '[data-mode="dark"]'],`, async () => {
49+
const styleHandler = createStyleHandler({
50+
isMainChunk: true,
51+
})
52+
const code = await getCase('attr.css')
53+
const { css } = await styleHandler(code)
54+
expect(css).toMatchSnapshot()
55+
})
56+
57+
it(`darkMode: ['selector', '[data-mode="dark"]'], uni-app x`, async () => {
58+
const styleHandler = createStyleHandler({
59+
isMainChunk: true,
60+
uniAppX: true,
61+
})
62+
const code = await getCase('attr.css')
63+
const { css } = await styleHandler(code)
64+
expect(css).toMatchSnapshot()
65+
})
66+
67+
it(`darkMode: ['variant', '&:not(.light *)'],`, async () => {
68+
const styleHandler = createStyleHandler({
69+
isMainChunk: true,
70+
})
71+
const code = await getCase('variant0.css')
72+
const { css } = await styleHandler(code)
73+
expect(css).toMatchSnapshot()
74+
})
75+
76+
it(`darkMode: ['variant', '&:not(.light *)'], uni-app x`, async () => {
77+
const styleHandler = createStyleHandler({
78+
isMainChunk: true,
79+
})
80+
const code = await getCase('variant0.css')
81+
const { css } = await styleHandler(code)
82+
expect(css).toMatchSnapshot()
83+
})
84+
})

‎packages/postcss/test/fixtures/css/darkMode/attr.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.dark\:bg-black:where([data-mode="dark"], [data-mode="dark"] *) {
2+
--tw-bg-opacity: 1;
3+
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)) /* #000000 */;
4+
}

‎packages/postcss/test/fixtures/css/darkMode/class.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.dark\:bg-black:is(.dark *) {
2+
--tw-bg-opacity: 1;
3+
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)) /* #000000 */;
4+
}

‎packages/postcss/test/fixtures/css/darkMode/default.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@media (prefers-color-scheme: dark) {
2+
.dark\:bg-black {
3+
--tw-bg-opacity: 1;
4+
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)) /* #000000 */;
5+
}
6+
}

‎packages/postcss/test/fixtures/css/darkMode/selector.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.dark\:bg-black:where(.dark, .dark *) {
2+
--tw-bg-opacity: 1;
3+
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)) /* #000000 */;
4+
}

‎packages/postcss/test/fixtures/css/darkMode/variant0.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.dark\:bg-black:not(.light *) {
2+
--tw-bg-opacity: 1;
3+
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)) /* #000000 */;
4+
}

‎packages/postcss/test/fixtures/css/darkMode/variant1.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@media (prefers-color-scheme: dark) {
2+
.dark\:bg-black:not(.light *) {
3+
--tw-bg-opacity: 1;
4+
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)) /* #000000 */;
5+
}
6+
}
7+
.dark\:bg-black:is(.dark *) {
8+
--tw-bg-opacity: 1;
9+
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)) /* #000000 */;
10+
}

0 commit comments

Comments
 (0)