Skip to content

Commit 5823488

Browse files
mertasanmertasan
committed
new tests for coverage
1 parent fc8d5c8 commit 5823488

File tree

4 files changed

+266
-8
lines changed

4 files changed

+266
-8
lines changed

‎__tests__/color-variable-helper.test.html

+3
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,6 @@
88
<div class="bg-green bg-opacity-50">tailwindcss-variables</div>
99
<div class="bg-white bg-opacity-50">tailwindcss-variables</div>
1010
<div class="bg-yellow bg-opacity-50">tailwindcss-variables</div>
11+
<div class="bg-gradient-to-r from-red-400 to-transparent"></div>
12+
<div class="bg-gradient-to-r from-red-500 to-transparent"></div>
13+
<div class="bg-gradient-to-r from-red-600 to-transparent"></div>

‎__tests__/color-variable-helper.test.js

+148
Original file line numberDiff line numberDiff line change
@@ -147,3 +147,151 @@ test('colorVariable helper', async () => {
147147
"
148148
`)
149149
})
150+
151+
test('colorVariable with gradient color stops', async () => {
152+
expect(
153+
await utils.diffOnly({
154+
corePlugins: ['textColor', 'textOpacity', 'gradientColorStops'],
155+
purge: {
156+
enabled: true,
157+
content: [utils.content()],
158+
},
159+
160+
darkMode: false,
161+
theme: {
162+
screens: false,
163+
colors: {
164+
red: {
165+
400: colorVariable('var(--colors-red-400)'), // RGBA
166+
500: colorVariable('var(--colors-red-500)'), // RGBA
167+
600: colorVariable('var(--colors-red-600)'), // HEX
168+
},
169+
},
170+
171+
variables: {
172+
DEFAULT: {
173+
colors: {
174+
red: {
175+
400: 'rgba(254,0,0,1)',
176+
500: 'rgba(254,0,0,0.5)',
177+
600: '#a20606',
178+
},
179+
},
180+
},
181+
},
182+
},
183+
184+
plugins: [
185+
tailwindcssVariables({
186+
colorVariables: true,
187+
}),
188+
],
189+
})
190+
).toMatchInlineSnapshot(`
191+
"
192+
193+
194+
+ :root {
195+
+ --colors-red-400: rgba(254,0,0,1);
196+
+ --colors-red-500: rgba(254,0,0,0.5);
197+
+ --colors-red-600: #a20606;
198+
+ --colors-red-400-rgb: 254,0,0;
199+
+ --colors-red-500-rgb: 254,0,0;
200+
+ --colors-red-600-rgb: 162,6,6
201+
+ }
202+
+
203+
+ .text-opacity-50 {
204+
+ --tw-text-opacity: 0.5
205+
+ }
206+
+
207+
+ .from-red-400 {
208+
+ --tw-gradient-from: rgb(var(--colors-red-400-rgb));
209+
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-400-rgb), 0))
210+
+ }
211+
+
212+
+ .from-red-500 {
213+
+ --tw-gradient-from: rgb(var(--colors-red-500-rgb));
214+
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-500-rgb), 0))
215+
+ }
216+
+
217+
+ .from-red-600 {
218+
+ --tw-gradient-from: rgb(var(--colors-red-600-rgb));
219+
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-600-rgb), 0))
220+
+ }
221+
222+
"
223+
`)
224+
})
225+
226+
test('colorVariable with gradient color stops (forceRGB)', async () => {
227+
expect(
228+
await utils.diffOnly({
229+
corePlugins: ['textColor', 'textOpacity', 'gradientColorStops'],
230+
purge: {
231+
enabled: true,
232+
content: [utils.content()],
233+
},
234+
235+
darkMode: false,
236+
theme: {
237+
screens: false,
238+
colors: {
239+
red: {
240+
400: colorVariable('var(--colors-red-400)', true), // RGBA
241+
500: colorVariable('var(--colors-red-500)', true), // RGBA
242+
600: colorVariable('var(--colors-red-600)', true), // HEX
243+
},
244+
},
245+
246+
variables: {
247+
DEFAULT: {
248+
colors: {
249+
red: {
250+
400: 'rgba(254,0,0,1)',
251+
500: 'rgba(254,0,0,0.5)',
252+
600: '#a20606',
253+
},
254+
},
255+
},
256+
},
257+
},
258+
259+
plugins: [
260+
tailwindcssVariables({
261+
colorVariables: true,
262+
forceRGB: true,
263+
}),
264+
],
265+
})
266+
).toMatchInlineSnapshot(`
267+
"
268+
269+
270+
+ :root {
271+
+ --colors-red-400: 254,0,0;
272+
+ --colors-red-500: 254,0,0;
273+
+ --colors-red-600: 162,6,6
274+
+ }
275+
+
276+
+ .text-opacity-50 {
277+
+ --tw-text-opacity: 0.5
278+
+ }
279+
+
280+
+ .from-red-400 {
281+
+ --tw-gradient-from: rgb(var(--colors-red-400));
282+
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-400), 0))
283+
+ }
284+
+
285+
+ .from-red-500 {
286+
+ --tw-gradient-from: rgb(var(--colors-red-500));
287+
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-500), 0))
288+
+ }
289+
+
290+
+ .from-red-600 {
291+
+ --tw-gradient-from: rgb(var(--colors-red-600));
292+
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-600), 0))
293+
+ }
294+
295+
"
296+
`)
297+
})

‎__tests__/plugin-api.test.html

+1
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@
44
<div class="default-multi"></div>
55
<div class="other-multi"></div>
66
</div>
7+
<div class="select"></div>

‎__tests__/plugin-api.test.js

+114-8
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,10 @@ test('simple example with dark mode set to `class`', async () => {
5959
variables: {
6060
DEFAULT: {
6161
colors: {
62-
primary: 'indigo'
62+
primary: 'indigo',
6363
},
6464
},
65-
}
65+
},
6666
},
6767
plugins: [require('../examples/api-examples/simple/index')],
6868
})
@@ -204,6 +204,112 @@ test('with-components example with dark mode set to `media`', async () => {
204204
`)
205205
})
206206

207+
test('with-components-null-selector example with dark mode set to `class`', async () => {
208+
expect(
209+
await utils.diffOnly({
210+
purge: [utils.content()],
211+
darkMode: 'class',
212+
theme: {},
213+
plugins: [require('../examples/api-examples/with-components-null-selector/index')],
214+
})
215+
).toMatchInlineSnapshot(`
216+
"
217+
218+
219+
+ :root {
220+
+ --prefix2-colors-primary: black;
221+
+ --prefix2-colors-secondary: white;
222+
+ --prefix2-colors-warning: pink;
223+
+ }
224+
+
225+
+ .admin {
226+
+ --prefix2-colors-primary: blue;
227+
+ --prefix2-colors-secondary: green;
228+
+ --prefix2-colors-warning: gray;
229+
+ }
230+
+
231+
+ .dark {
232+
+ --prefix2-colors-primary: yellow;
233+
+ --prefix2-colors-secondary: white;
234+
+ --prefix2-colors-warning: pink;
235+
+ }
236+
+
237+
+ .dark .admin {
238+
+ --prefix2-colors-primary: blue;
239+
+ --prefix2-colors-secondary: green;
240+
+ --prefix2-colors-warning: gray;
241+
+ }
242+
+
243+
+ .select {
244+
+ background-color: var(--colors-prefix2-primary);
245+
+ }
246+
+
247+
+ .select .default-multi {
248+
+ background-color: var(--prefix2-colors-secondary);
249+
+ }
250+
+
251+
+ .select .other-multi {
252+
+ background-color: var(--prefix2-colors-warning);
253+
+ }
254+
255+
"
256+
`)
257+
})
258+
259+
test('with-components-null-selector example with dark mode set to `media`', async () => {
260+
expect(
261+
await utils.diffOnly({
262+
purge: [utils.content()],
263+
darkMode: 'media',
264+
theme: {},
265+
plugins: [require('../examples/api-examples/with-components-null-selector/index')],
266+
})
267+
).toMatchInlineSnapshot(`
268+
"
269+
270+
271+
+ :root {
272+
+ --prefix2-colors-primary: black;
273+
+ --prefix2-colors-secondary: white;
274+
+ --prefix2-colors-warning: pink;
275+
+ }
276+
+
277+
+ .admin {
278+
+ --prefix2-colors-primary: blue;
279+
+ --prefix2-colors-secondary: green;
280+
+ --prefix2-colors-warning: gray;
281+
+ }
282+
+
283+
+ @media (prefers-color-scheme: dark) {
284+
+ :root {
285+
+ --prefix2-colors-primary: yellow;
286+
+ --prefix2-colors-secondary: white;
287+
+ --prefix2-colors-warning: pink;
288+
+ }
289+
+
290+
+ .admin {
291+
+ --prefix2-colors-primary: blue;
292+
+ --prefix2-colors-secondary: green;
293+
+ --prefix2-colors-warning: gray;
294+
+ }
295+
+ }
296+
+
297+
+ .select {
298+
+ background-color: var(--colors-prefix2-primary);
299+
+ }
300+
+
301+
+ .select .default-multi {
302+
+ background-color: var(--prefix2-colors-secondary);
303+
+ }
304+
+
305+
+ .select .other-multi {
306+
+ background-color: var(--prefix2-colors-warning);
307+
+ }
308+
309+
"
310+
`)
311+
})
312+
207313
test('with-themes example with dark mode set to `media`', async () => {
208314
expect(
209315
await utils.diffOnly({
@@ -255,10 +361,10 @@ test('with-themes example with dark mode set to `class`', async () => {
255361
variables: {
256362
DEFAULT: {
257363
colors: {
258-
primary: 'indigo'
364+
primary: 'indigo',
259365
},
260366
},
261-
}
367+
},
262368
},
263369
plugins: [require('../examples/api-examples/with-themes/index')],
264370
})
@@ -303,10 +409,10 @@ test('advanced example with dark mode set to `media`', async () => {
303409
variables: {
304410
DEFAULT: {
305411
colors: {
306-
primary: 'indigo'
412+
primary: 'indigo',
307413
},
308414
},
309-
}
415+
},
310416
},
311417
plugins: [require('../examples/api-examples/advanced/index')],
312418
})
@@ -365,10 +471,10 @@ test('advanced example with dark mode set to `class`', async () => {
365471
variables: {
366472
DEFAULT: {
367473
colors: {
368-
primary: 'indigo'
474+
primary: 'indigo',
369475
},
370476
},
371-
}
477+
},
372478
},
373479
plugins: [require('../examples/api-examples/advanced/index')],
374480
})

0 commit comments

Comments
 (0)