@@ -45,7 +45,7 @@ test('user-defined dark mode variants do not stack', () => {
45
45
} )
46
46
} )
47
47
48
- test ( 'generating dark mode variants uses the media strategy by default ' , ( ) => {
48
+ test ( 'dark mode variants can be generated using the class strategy ' , ( ) => {
49
49
const input = `
50
50
@variants dark {
51
51
.text-red {
@@ -67,7 +67,7 @@ test('generating dark mode variants uses the media strategy by default', () => {
67
67
68
68
expect . assertions ( 2 )
69
69
70
- return run ( input ) . then ( ( result ) => {
70
+ return run ( input , { darkMode : 'media' } ) . then ( ( result ) => {
71
71
expect ( result . css ) . toMatchCss ( expected )
72
72
expect ( result . warnings ( ) . length ) . toBe ( 0 )
73
73
} )
@@ -95,7 +95,7 @@ test('dark mode variants can be generated even when the user has their own plugi
95
95
96
96
expect . assertions ( 2 )
97
97
98
- return run ( input , { plugins : [ ] } ) . then ( ( result ) => {
98
+ return run ( input , { darkMode : 'media' , plugins : [ ] } ) . then ( ( result ) => {
99
99
expect ( result . css ) . toMatchCss ( expected )
100
100
expect ( result . warnings ( ) . length ) . toBe ( 0 )
101
101
} )
@@ -121,7 +121,7 @@ test('dark mode variants can be generated using the class strategy', () => {
121
121
122
122
expect . assertions ( 2 )
123
123
124
- return run ( input , { dark : 'class' } ) . then ( ( result ) => {
124
+ return run ( input , { darkMode : 'class' } ) . then ( ( result ) => {
125
125
expect ( result . css ) . toMatchCss ( expected )
126
126
expect ( result . warnings ( ) . length ) . toBe ( 0 )
127
127
} )
@@ -150,6 +150,29 @@ test('dark mode variants can be disabled', () => {
150
150
} )
151
151
} )
152
152
153
+ test ( 'dark mode variants are disabled by default' , ( ) => {
154
+ const input = `
155
+ @variants dark {
156
+ .text-red {
157
+ color: red;
158
+ }
159
+ }
160
+ `
161
+
162
+ const expected = `
163
+ .text-red {
164
+ color: red;
165
+ }
166
+ `
167
+
168
+ expect . assertions ( 2 )
169
+
170
+ return run ( input ) . then ( ( result ) => {
171
+ expect ( result . css ) . toMatchCss ( expected )
172
+ expect ( result . warnings ( ) . length ) . toBe ( 0 )
173
+ } )
174
+ } )
175
+
153
176
test ( 'dark mode variants stack with other variants' , ( ) => {
154
177
const input = `
155
178
@variants responsive, dark, hover, focus {
@@ -228,10 +251,12 @@ test('dark mode variants stack with other variants', () => {
228
251
229
252
expect . assertions ( 2 )
230
253
231
- return run ( input , { theme : { screens : { sm : '500px' , lg : '800px' } } } ) . then ( ( result ) => {
232
- expect ( result . css ) . toMatchCss ( expected )
233
- expect ( result . warnings ( ) . length ) . toBe ( 0 )
234
- } )
254
+ return run ( input , { darkMode : 'media' , theme : { screens : { sm : '500px' , lg : '800px' } } } ) . then (
255
+ ( result ) => {
256
+ expect ( result . css ) . toMatchCss ( expected )
257
+ expect ( result . warnings ( ) . length ) . toBe ( 0 )
258
+ }
259
+ )
235
260
} )
236
261
237
262
test ( 'dark mode variants stack with other variants when using the class strategy' , ( ) => {
@@ -324,7 +349,7 @@ test('dark mode variants stack with other variants when using the class strategy
324
349
325
350
expect . assertions ( 2 )
326
351
327
- return run ( input , { dark : 'class' , theme : { screens : { sm : '500px' , lg : '800px' } } } ) . then (
352
+ return run ( input , { darkMode : 'class' , theme : { screens : { sm : '500px' , lg : '800px' } } } ) . then (
328
353
( result ) => {
329
354
expect ( result . css ) . toMatchCss ( expected )
330
355
expect ( result . warnings ( ) . length ) . toBe ( 0 )
0 commit comments