Skip to content

Commit 703a8b0

Browse files
thecrypticacethecrypticace
committed
Update tests
1 parent 86fb660 commit 703a8b0

File tree

1 file changed

+26
-42
lines changed

1 file changed

+26
-42
lines changed

‎tests/variant-grouping.test.skip.js

Lines changed: 26 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ it('should not generate nested selectors if the feature flag is not enabled', ()
2626

2727
it('should be possible to group variants', () => {
2828
let config = {
29-
experimental: 'all',
29+
experimental: { variantGrouping: true, oxideParser: false },
3030
content: [{ raw: html`<div class="md:(underline,italic)"></div>` }],
3131
corePlugins: { preflight: false },
3232
plugins: [],
@@ -39,7 +39,7 @@ it('should be possible to group variants', () => {
3939
return run(input, config).then((result) => {
4040
expect(result.css).toMatchFormattedCss(css`
4141
@media (min-width: 768px) {
42-
.md\:\(underline\2c italic\) {
42+
.md\:\(underline\,italic\) {
4343
font-style: italic;
4444
text-decoration-line: underline;
4545
}
@@ -50,7 +50,7 @@ it('should be possible to group variants', () => {
5050

5151
it('should be possible to group using constrained and arbitrary variants together', () => {
5252
let config = {
53-
experimental: 'all',
53+
experimental: { variantGrouping: true, oxideParser: false },
5454
content: [
5555
{
5656
raw: html`<div
@@ -70,9 +70,8 @@ it('should be possible to group using constrained and arbitrary variants togethe
7070
expect(result.css).toMatchFormattedCss(css`
7171
@media (prefers-color-scheme: dark) {
7272
@supports (hover: hover) {
73-
.dark\:\[\@supports\(hover\:hover\)\]\:hover\:\[\&\>\*\]\:\(\[--potato\:baked\]\2c
74-
bg-\[\#0088cc\]\)
75-
> *:hover {
73+
.dark\:\[\@supports\(hover\:hover\)\]\:hover\:\[\&\>\*\]\:\(\[--potato\:baked\]\,bg-\[\#0088cc\]\)
74+
> :hover {
7675
--tw-bg-opacity: 1;
7776
background-color: rgb(0 136 204 / var(--tw-bg-opacity));
7877
--potato: baked;
@@ -85,7 +84,7 @@ it('should be possible to group using constrained and arbitrary variants togethe
8584

8685
it('should be possible to group multiple variants', () => {
8786
let config = {
88-
experimental: 'all',
87+
experimental: { variantGrouping: true, oxideParser: false },
8988
content: [{ raw: html`<div class="md:dark:(underline,italic)"></div>` }],
9089
corePlugins: { preflight: false },
9190
plugins: [],
@@ -99,7 +98,7 @@ it('should be possible to group multiple variants', () => {
9998
expect(result.css).toMatchFormattedCss(css`
10099
@media (min-width: 768px) {
101100
@media (prefers-color-scheme: dark) {
102-
.md\:dark\:\(underline\2c italic\) {
101+
.md\:dark\:\(underline\,italic\) {
103102
font-style: italic;
104103
text-decoration-line: underline;
105104
}
@@ -111,7 +110,7 @@ it('should be possible to group multiple variants', () => {
111110

112111
it('should be possible to group nested grouped variants', () => {
113112
let config = {
114-
experimental: 'all',
113+
experimental: { variantGrouping: true, oxideParser: false },
115114
content: [{ raw: html`<div class="md:(underline,italic,hover:(uppercase,font-bold))"></div>` }],
116115
corePlugins: { preflight: false },
117116
plugins: [],
@@ -124,13 +123,13 @@ it('should be possible to group nested grouped variants', () => {
124123
return run(input, config).then((result) => {
125124
expect(result.css).toMatchFormattedCss(css`
126125
@media (min-width: 768px) {
127-
.md\:\(underline\2c italic\2c hover\:\(uppercase\2c font-bold\)\) {
126+
.md\:\(underline\,italic\,hover\:\(uppercase\,font-bold\)\) {
128127
font-style: italic;
129128
text-decoration-line: underline;
130129
}
131-
.md\:\(underline\2c italic\2c hover\:\(uppercase\2c font-bold\)\):hover {
132-
font-weight: 700;
130+
.md\:\(underline\,italic\,hover\:\(uppercase\,font-bold\)\):hover {
133131
text-transform: uppercase;
132+
font-weight: 700;
134133
}
135134
}
136135
`)
@@ -139,7 +138,7 @@ it('should be possible to group nested grouped variants', () => {
139138

140139
it('should be possible to use nested multiple grouped variants', () => {
141140
let config = {
142-
experimental: 'all',
141+
experimental: { variantGrouping: true, oxideParser: false },
143142
content: [
144143
{
145144
raw: html`<div class="md:(text-black,dark:(text-white,hover:focus:text-gray-100))"></div>`,
@@ -156,16 +155,16 @@ it('should be possible to use nested multiple grouped variants', () => {
156155
return run(input, config).then((result) => {
157156
expect(result.css).toMatchFormattedCss(css`
158157
@media (min-width: 768px) {
159-
.md\:\(text-black\2c dark\:\(text-white\2c hover\:focus\:text-gray-100\)\) {
158+
.md\:\(text-black\,dark\:\(text-white\,hover\:focus\:text-gray-100\)\) {
160159
--tw-text-opacity: 1;
161160
color: rgb(0 0 0 / var(--tw-text-opacity));
162161
}
163162
@media (prefers-color-scheme: dark) {
164-
.md\:\(text-black\2c dark\:\(text-white\2c hover\:focus\:text-gray-100\)\) {
163+
.md\:\(text-black\,dark\:\(text-white\,hover\:focus\:text-gray-100\)\) {
165164
--tw-text-opacity: 1;
166165
color: rgb(255 255 255 / var(--tw-text-opacity));
167166
}
168-
.md\:\(text-black\2c dark\:\(text-white\2c hover\:focus\:text-gray-100\)\):focus:hover {
167+
.md\:\(text-black\,dark\:\(text-white\,hover\:focus\:text-gray-100\)\):focus:hover {
169168
--tw-text-opacity: 1;
170169
color: rgb(243 244 246 / var(--tw-text-opacity));
171170
}
@@ -177,11 +176,11 @@ it('should be possible to use nested multiple grouped variants', () => {
177176

178177
it('should be possible to mix and match nesting and different variant combinations', () => {
179178
let config = {
180-
experimental: 'all',
179+
experimental: { variantGrouping: true, oxideParser: false },
181180
content: [
182181
{
183182
raw: html`<div
184-
class="md:[&>*]:(text-black,dark:(text-white,hover:[@supports(color:green)]:[&:nth-child(2n=1)]:text-gray-100))"
183+
class="md:[&>*]:(text-black,dark:(text-white,hover:[@supports(color:green)]:[&:nth-child(2n+1)]:text-gray-100))"
185184
></div>`,
186185
},
187186
],
@@ -196,26 +195,20 @@ it('should be possible to mix and match nesting and different variant combinatio
196195
return run(input, config).then((result) => {
197196
expect(result.css).toMatchFormattedCss(css`
198197
@media (min-width: 768px) {
199-
.md\:\[\&\>\*\]\:\(text-black\2c
200-
dark\:\(text-white\2c
201-
hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\=1\)\]\:text-gray-100\)\)
198+
.md\:\[\&\>\*\]\:\(text-black\,dark\:\(text-white\,hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\+1\)\]\:text-gray-100\)\)
202199
> * {
203200
--tw-text-opacity: 1;
204201
color: rgb(0 0 0 / var(--tw-text-opacity));
205202
}
206203
@media (prefers-color-scheme: dark) {
207-
.md\:\[\&\>\*\]\:\(text-black\2c
208-
dark\:\(text-white\2c
209-
hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\=1\)\]\:text-gray-100\)\)
204+
.md\:\[\&\>\*\]\:\(text-black\,dark\:\(text-white\,hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\+1\)\]\:text-gray-100\)\)
210205
> * {
211206
--tw-text-opacity: 1;
212207
color: rgb(255 255 255 / var(--tw-text-opacity));
213208
}
214209
@supports (color: green) {
215-
.md\:\[\&\>\*\]\:\(text-black\2c
216-
dark\:\(text-white\2c
217-
hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\=1\)\]\:text-gray-100\)\):nth-child(
218-
2n=1
210+
.md\:\[\&\>\*\]\:\(text-black\,dark\:\(text-white\,hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\+1\)\]\:text-gray-100\)\):nth-child(
211+
odd
219212
):hover
220213
> * {
221214
--tw-text-opacity: 1;
@@ -230,7 +223,7 @@ it('should be possible to mix and match nesting and different variant combinatio
230223

231224
it('should group with variants defined in external plugins', () => {
232225
let config = {
233-
experimental: 'all',
226+
experimental: { variantGrouping: true, oxideParser: false },
234227
content: [
235228
{
236229
raw: html`
@@ -253,24 +246,15 @@ it('should group with variants defined in external plugins', () => {
253246

254247
return run(input, config).then((result) => {
255248
expect(result.css).toMatchFormattedCss(css`
256-
.ui-active\:\(bg-black\2c text-white\)[data-ui-state~='active'] {
249+
.ui-active\:\(bg-black\,text-white\)[data-ui-state~='active'],
250+
[data-ui-state~='active'] .ui-active\:\(bg-black\,text-white\) {
257251
--tw-bg-opacity: 1;
258252
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
259253
--tw-text-opacity: 1;
260254
color: rgb(255 255 255 / var(--tw-text-opacity));
261255
}
262-
[data-ui-state~='active'] .ui-active\:\(bg-black\2c text-white\) {
263-
--tw-bg-opacity: 1;
264-
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
265-
--tw-text-opacity: 1;
266-
color: rgb(255 255 255 / var(--tw-text-opacity));
267-
}
268-
.ui-selected\:\(bg-indigo-500\2c underline\)[data-ui-state~='selected'] {
269-
--tw-bg-opacity: 1;
270-
background-color: rgb(99 102 241 / var(--tw-bg-opacity));
271-
text-decoration-line: underline;
272-
}
273-
[data-ui-state~='selected'] .ui-selected\:\(bg-indigo-500\2c underline\) {
256+
.ui-selected\:\(bg-indigo-500\,underline\)[data-ui-state~='selected'],
257+
[data-ui-state~='selected'] .ui-selected\:\(bg-indigo-500\,underline\) {
274258
--tw-bg-opacity: 1;
275259
background-color: rgb(99 102 241 / var(--tw-bg-opacity));
276260
text-decoration-line: underline;

0 commit comments

Comments
 (0)