@@ -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