Skip to content

Commit 2f1592e

Browse files
committed
add test #25
1 parent bfcb507 commit 2f1592e

File tree

2 files changed

+86
-0
lines changed

2 files changed

+86
-0
lines changed

__tests__/issues.test.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html data-mode="dark" lang="en">
2+
<body>
3+
<div class="shadow-xs dark:shadow-xs"></div>
4+
<div class="shadow-sm dark:shadow-sm"></div>
5+
<div class="shadow-base dark:shadow-base"></div>
6+
<div class="shadow-md dark:shadow-md"></div>
7+
<div class="shadow-lg dark:shadow-lg"></div>
8+
<div class="shadow-xl dark:shadow-xl"></div>
9+
<div class="shadow-2xl dark:shadow-2xl"></div>
10+
<div class="shadow-outline dark:shadow-outline"></div>
11+
<div class="shadow-inner dark:shadow-inner"></div>
12+
<div class="shadow-none dark:shadow-none"></div>
13+
</body>
14+
</html>

__tests__/issues.test.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,75 @@ test('issue 23', async () => {
4242
"
4343
`)
4444
})
45+
46+
test('issue 25', async () => {
47+
const shadow = {
48+
xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
49+
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
50+
base: '0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06)',
51+
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06)',
52+
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05)',
53+
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04)',
54+
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
55+
outline: '0 0 0 3px rgba(var(--primary), 0.6)',
56+
inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
57+
none: 'none',
58+
}
59+
expect(
60+
await utils.diffOnly({
61+
content: [utils.content()],
62+
darkMode: 'class',
63+
theme: {
64+
variables: {
65+
DEFAULT: {
66+
shadow,
67+
},
68+
},
69+
70+
darkVariables: {
71+
DEFAULT: {
72+
shadow,
73+
},
74+
},
75+
},
76+
77+
plugins: [
78+
tailwindcssVariables({
79+
darkToRoot: true,
80+
darkSelector: '[data-mode="dark"]',
81+
colorVariables: true,
82+
}),
83+
],
84+
})
85+
).toMatchInlineSnapshot(`
86+
"
87+
88+
89+
+ :root {
90+
+ --shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05);
91+
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
92+
+ --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);
93+
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);
94+
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);
95+
+ --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);
96+
+ --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
97+
+ --shadow-outline: 0 0 0 3px rgba(var(--primary), 0.6);
98+
+ --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.06);
99+
+ --shadow-none: none
100+
+ }
101+
+ :root[data-mode='dark'] {
102+
+ --shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05);
103+
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
104+
+ --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);
105+
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);
106+
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);
107+
+ --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);
108+
+ --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
109+
+ --shadow-outline: 0 0 0 3px rgba(var(--primary), 0.6);
110+
+ --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.06);
111+
+ --shadow-none: none
112+
+ }
113+
114+
"
115+
`)
116+
})

0 commit comments

Comments
 (0)