wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Update tests

Browse source
This commit is contained in:
Jordan Pittman 2023-07-31 12:57:46 -04:00
parent 86fb660593
commit 703a8b014d
1 changed files with 26 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

68
tests/variant-grouping.test.skip.js
View file

@ -26,7 +26,7 @@ it('should not generate nested selectors if the feature flag is not enabled', ()
it('should be possible to group variants', () => {
let config = {
experimental: 'all',
experimental: { variantGrouping: true, oxideParser: false },
content: [{ raw: html`<div class="md:(underline,italic)"></div>` }],
corePlugins: { preflight: false },
plugins: [],
@ -39,7 +39,7 @@ it('should be possible to group variants', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (min-width: 768px) {
.md\:\(underline\2c italic\) {
.md\:\(underline\,italic\) {
font-style: italic;
text-decoration-line: underline;
}
@ -50,7 +50,7 @@ it('should be possible to group variants', () => {
it('should be possible to group using constrained and arbitrary variants together', () => {
let config = {
experimental: 'all',
experimental: { variantGrouping: true, oxideParser: false },
content: [
{
raw: html`<div
@ -70,9 +70,8 @@ it('should be possible to group using constrained and arbitrary variants togethe
expect(result.css).toMatchFormattedCss(css`
@media (prefers-color-scheme: dark) {
@supports (hover: hover) {
.dark\:\[\@supports\(hover\:hover\)\]\:hover\:\[\&\>\*\]\:\(\[--potato\:baked\]\2c
bg-\[\#0088cc\]\)
> *:hover {
.dark\:\[\@supports\(hover\:hover\)\]\:hover\:\[\&\>\*\]\:\(\[--potato\:baked\]\,bg-\[\#0088cc\]\)
> :hover {
--tw-bg-opacity: 1;
background-color: rgb(0 136 204 / var(--tw-bg-opacity));
--potato: baked;
@ -85,7 +84,7 @@ it('should be possible to group using constrained and arbitrary variants togethe
it('should be possible to group multiple variants', () => {
let config = {
experimental: 'all',
experimental: { variantGrouping: true, oxideParser: false },
content: [{ raw: html`<div class="md:dark:(underline,italic)"></div>` }],
corePlugins: { preflight: false },
plugins: [],
@ -99,7 +98,7 @@ it('should be possible to group multiple variants', () => {
expect(result.css).toMatchFormattedCss(css`
@media (min-width: 768px) {
@media (prefers-color-scheme: dark) {
.md\:dark\:\(underline\2c italic\) {
.md\:dark\:\(underline\,italic\) {
font-style: italic;
text-decoration-line: underline;
}
@ -111,7 +110,7 @@ it('should be possible to group multiple variants', () => {
it('should be possible to group nested grouped variants', () => {
let config = {
experimental: 'all',
experimental: { variantGrouping: true, oxideParser: false },
content: [{ raw: html`<div class="md:(underline,italic,hover:(uppercase,font-bold))"></div>` }],
corePlugins: { preflight: false },
plugins: [],
@ -124,13 +123,13 @@ it('should be possible to group nested grouped variants', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (min-width: 768px) {
.md\:\(underline\2c italic\2c hover\:\(uppercase\2c font-bold\)\) {
.md\:\(underline\,italic\,hover\:\(uppercase\,font-bold\)\) {
font-style: italic;
text-decoration-line: underline;
}
.md\:\(underline\2c italic\2c hover\:\(uppercase\2c font-bold\)\):hover {
font-weight: 700;
.md\:\(underline\,italic\,hover\:\(uppercase\,font-bold\)\):hover {
text-transform: uppercase;
font-weight: 700;
}
}
`)
@ -139,7 +138,7 @@ it('should be possible to group nested grouped variants', () => {
it('should be possible to use nested multiple grouped variants', () => {
let config = {
experimental: 'all',
experimental: { variantGrouping: true, oxideParser: false },
content: [
{
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', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (min-width: 768px) {
.md\:\(text-black\2c dark\:\(text-white\2c hover\:focus\:text-gray-100\)\) {
.md\:\(text-black\,dark\:\(text-white\,hover\:focus\:text-gray-100\)\) {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
@media (prefers-color-scheme: dark) {
.md\:\(text-black\2c dark\:\(text-white\2c hover\:focus\:text-gray-100\)\) {
.md\:\(text-black\,dark\:\(text-white\,hover\:focus\:text-gray-100\)\) {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.md\:\(text-black\2c dark\:\(text-white\2c hover\:focus\:text-gray-100\)\):focus:hover {
.md\:\(text-black\,dark\:\(text-white\,hover\:focus\:text-gray-100\)\):focus:hover {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity));
}
@ -177,11 +176,11 @@ it('should be possible to use nested multiple grouped variants', () => {
it('should be possible to mix and match nesting and different variant combinations', () => {
let config = {
experimental: 'all',
experimental: { variantGrouping: true, oxideParser: false },
content: [
{
raw: html`<div
class="md:[&>*]:(text-black,dark:(text-white,hover:[@supports(color:green)]:[&:nth-child(2n=1)]:text-gray-100))"
class="md:[&>*]:(text-black,dark:(text-white,hover:[@supports(color:green)]:[&:nth-child(2n+1)]:text-gray-100))"
></div>`,
},
],
@ -196,26 +195,20 @@ it('should be possible to mix and match nesting and different variant combinatio
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (min-width: 768px) {
.md\:\[\&\>\*\]\:\(text-black\2c
dark\:\(text-white\2c
hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\=1\)\]\:text-gray-100\)\)
.md\:\[\&\>\*\]\:\(text-black\,dark\:\(text-white\,hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\+1\)\]\:text-gray-100\)\)
> * {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
@media (prefers-color-scheme: dark) {
.md\:\[\&\>\*\]\:\(text-black\2c
dark\:\(text-white\2c
hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\=1\)\]\:text-gray-100\)\)
.md\:\[\&\>\*\]\:\(text-black\,dark\:\(text-white\,hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\+1\)\]\:text-gray-100\)\)
> * {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
@supports (color: green) {
.md\:\[\&\>\*\]\:\(text-black\2c
dark\:\(text-white\2c
hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\=1\)\]\:text-gray-100\)\):nth-child(
2n=1
.md\:\[\&\>\*\]\:\(text-black\,dark\:\(text-white\,hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\+1\)\]\:text-gray-100\)\):nth-child(
odd
):hover
> * {
--tw-text-opacity: 1;
@ -230,7 +223,7 @@ it('should be possible to mix and match nesting and different variant combinatio
it('should group with variants defined in external plugins', () => {
let config = {
experimental: 'all',
experimental: { variantGrouping: true, oxideParser: false },
content: [
{
raw: html`
@ -253,24 +246,15 @@ it('should group with variants defined in external plugins', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.ui-active\:\(bg-black\2c text-white\)[data-ui-state~='active'] {
.ui-active\:\(bg-black\,text-white\)[data-ui-state~='active'],
[data-ui-state~='active'] .ui-active\:\(bg-black\,text-white\) {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
[data-ui-state~='active'] .ui-active\:\(bg-black\2c text-white\) {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.ui-selected\:\(bg-indigo-500\2c underline\)[data-ui-state~='selected'] {
--tw-bg-opacity: 1;
background-color: rgb(99 102 241 / var(--tw-bg-opacity));
text-decoration-line: underline;
}
[data-ui-state~='selected'] .ui-selected\:\(bg-indigo-500\2c underline\) {
.ui-selected\:\(bg-indigo-500\,underline\)[data-ui-state~='selected'],
[data-ui-state~='selected'] .ui-selected\:\(bg-indigo-500\,underline\) {
--tw-bg-opacity: 1;
background-color: rgb(99 102 241 / var(--tw-bg-opacity));
text-decoration-line: underline;