Skip to content

Add matchVariant API #14371

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
philipp-spiess merged 9 commits into from
Sep 11, 2024
Merged

Add matchVariant API #14371

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5569062
Add `matchVariant` API
philipp-spiess Sep 9, 2024
1337fdf
Handle modifiers correctly
philipp-spiess Sep 9, 2024
5778029
Add a comment on why we bail out in the comperator fn
philipp-spiess Sep 9, 2024
bf8bab2
Update stacked variant order tests
philipp-spiess Sep 9, 2024
429cc6f
Support addVariant and matchVariant with at-rules and placeholders
philipp-spiess Sep 9, 2024
5b1ab3d
Add changelog
philipp-spiess Sep 9, 2024
9a60cc1
Remove leftover comment
philipp-spiess Sep 9, 2024
1ba0372
Update packages/tailwindcss/src/plugin-api.ts
philipp-spiess Sep 11, 2024
e2d1753
Update packages/tailwindcss/src/plugin-api.ts
philipp-spiess Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update stacked variant order tests
  • Loading branch information
@philipp-spiess
philipp-spiess committed Sep 11, 2024
commit bf8bab263f1a93fff1ff556090a3a0e44d34e082
167 changes: 53 additions & 114 deletions packages/tailwindcss/src/plugin-api.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1695,8 +1695,7 @@ describe('matchVariant', () => {
// })
})

// TODO: How do we make this test pass?
test.skip('should be possible to sort stacked arbitrary variants correctly', async () => {
test('should be possible to sort stacked arbitrary variants correctly', async () => {
let { build } = await compile(
css`
@plugin "my-plugin";
Expand All @@ -1722,78 +1721,49 @@ describe('matchVariant', () => {
},
},
)
// TODO: the comments here do not match the actual order in the test assertion

let compiled = build([
'testmin-[150px]:testmax-[400px]:italic', // 4
'testmin-[100px]:testmax-[350px]:flex', // 2
'testmin-[100px]:testmax-[300px]:underline', // 1
'testmin-[100px]:testmax-[400px]:font-bold', // 3
'testmin-[150px]:testmax-[400px]:order-2',
'testmin-[100px]:testmax-[350px]:order-3',
'testmin-[100px]:testmax-[300px]:order-4',
'testmin-[100px]:testmax-[400px]:order-1',
])

expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
"@layer utilities {
@media (width >= 100px) {
@media (width <= 400px) {
.testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:font-bold {
font-weight: 700;
.testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 {
order: 1;
}
}
}

@media (width >= 100px) {
@media (width <= 350px) {
.testmin-\\[100px\\]\\:testmax-\\[350px\\]\\:flex {
display: flex;
@media (width >= 150px) {
@media (width <= 400px) {
.testmin-\\[150px\\]\\:testmax-\\[400px\\]\\:order-2 {
order: 2;
}
}
}

@media (width >= 100px) {
@media (width <= 300px) {
.testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:underline {
text-decoration-line: underline;
@media (width <= 350px) {
.testmin-\\[100px\\]\\:testmax-\\[350px\\]\\:order-3 {
order: 3;
}
}
}

@media (width >= 150px) {
@media (width <= 400px) {
.testmin-\\[150px\\]\\:testmax-\\[400px\\]\\:italic {
font-style: italic;
@media (width >= 100px) {
@media (width <= 300px) {
.testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-4 {
order: 4;
}
}
}
}"
`)

// return run(input, config).then((result) => {
// expect(result.css).toMatchFormattedCss(css`
// @media (min-width: 100px) {
// @media (max-width: 400px) {
// .testmin-\[100px\]\:testmax-\[400px\]\:underline {
// text-decoration-line: underline;
// }
// }
// @media (max-width: 350px) {
// .testmin-\[100px\]\:testmax-\[350px\]\:underline {
// text-decoration-line: underline;
// }
// }
// @media (max-width: 300px) {
// .testmin-\[100px\]\:testmax-\[300px\]\:underline {
// text-decoration-line: underline;
// }
// }
// }
// @media (min-width: 150px) {
// @media (max-width: 400px) {
// .testmin-\[150px\]\:testmax-\[400px\]\:underline {
// text-decoration-line: underline;
// }
// }
// }
// `)
// })
})

test('should maintain sort from other variants, if sort functions of arbitrary variants return 0', async () => {
Expand Down Expand Up @@ -1849,8 +1819,7 @@ describe('matchVariant', () => {
`)
})

// TODO: How do we make this test pass?
test.skip('should sort arbitrary variants left to right (1)', async () => {
test('should sort arbitrary variants left to right (1)', async () => {
let { build } = await compile(
css`
@plugin "my-plugin";
Expand All @@ -1876,76 +1845,47 @@ describe('matchVariant', () => {
},
)
let compiled = build([
'testmin-[200px]:testmax-[400px]:underline',
'testmin-[200px]:testmax-[300px]:underline',
'testmin-[100px]:testmax-[400px]:underline',
'testmin-[100px]:testmax-[300px]:underline',
'testmin-[200px]:testmax-[400px]:order-2',
'testmin-[200px]:testmax-[300px]:order-4',
'testmin-[100px]:testmax-[400px]:order-1',
'testmin-[100px]:testmax-[300px]:order-3',
])

expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
"@layer utilities {
@media (width >= 100px) {
@media (width <= 400px) {
.testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:underline {
text-decoration-line: underline;
.testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 {
order: 1;
}
}
}

@media (width >= 100px) {
@media (width <= 300px) {
.testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:underline {
text-decoration-line: underline;
@media (width >= 200px) {
@media (width <= 400px) {
.testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 {
order: 2;
}
}
}

@media (width >= 200px) {
@media (width <= 400px) {
.testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:underline {
text-decoration-line: underline;
@media (width >= 100px) {
@media (width <= 300px) {
.testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 {
order: 3;
}
}
}

@media (width >= 200px) {
@media (width <= 300px) {
.testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:underline {
text-decoration-line: underline;
.testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 {
order: 4;
}
}
}
}"
`)

// return run(input, config).then((result) => {
// expect(result.css).toMatchFormattedCss(css`
// @media (min-width: 100px) {
// @media (max-width: 400px) {
// .testmin-\[100px\]\:testmax-\[400px\]\:underline {
// text-decoration-line: underline;
// }
// }
// @media (max-width: 300px) {
// .testmin-\[100px\]\:testmax-\[300px\]\:underline {
// text-decoration-line: underline;
// }
// }
// }
// @media (min-width: 200px) {
// @media (max-width: 400px) {
// .testmin-\[200px\]\:testmax-\[400px\]\:underline {
// text-decoration-line: underline;
// }
// }
// @media (max-width: 300px) {
// .testmin-\[200px\]\:testmax-\[300px\]\:underline {
// text-decoration-line: underline;
// }
// }
// }
// `)
// })
})

test('should sort arbitrary variants left to right (2)', async () => {
Expand Down Expand Up @@ -2017,8 +1957,7 @@ describe('matchVariant', () => {
`)
})

// TODO: How do we make this test pass?
test.skip('should guarantee that we are not passing values from other variants to the wrong function', async () => {
test('should guarantee that we are not passing values from other variants to the wrong function', async () => {
let { build } = await compile(
css`
@plugin "my-plugin";
Expand Down Expand Up @@ -2052,42 +1991,42 @@ describe('matchVariant', () => {
},
)
let compiled = build([
'testmin-[200px]:testmax-[400px]:underline',
'testmin-[200px]:testmax-[300px]:underline',
'testmin-[100px]:testmax-[400px]:underline',
'testmin-[100px]:testmax-[300px]:underline',
'testmin-[200px]:testmax-[400px]:order-2',
'testmin-[200px]:testmax-[300px]:order-4',
'testmin-[100px]:testmax-[400px]:order-1',
'testmin-[100px]:testmax-[300px]:order-3',
])

expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
"@layer utilities {
@media (width >= 100px) {
@media (width <= 400px) {
.testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:underline {
text-decoration-line: underline;
.testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 {
order: 1;
}
}
}

@media (width >= 100px) {
@media (width <= 300px) {
.testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:underline {
text-decoration-line: underline;
@media (width >= 200px) {
@media (width <= 400px) {
.testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 {
order: 2;
}
}
}

@media (width >= 200px) {
@media (width <= 400px) {
.testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:underline {
text-decoration-line: underline;
@media (width >= 100px) {
@media (width <= 300px) {
.testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 {
order: 3;
}
}
}

@media (width >= 200px) {
@media (width <= 300px) {
.testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:underline {
text-decoration-line: underline;
.testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 {
order: 4;
}
}
}
Expand Down
18 changes: 13 additions & 5 deletions packages/tailwindcss/src/variants.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1220,7 +1220,7 @@ test('sorting stacked min-* and max-* variants', async () => {
}
@tailwind utilities;
`,
['min-sm:max-xl:flex', 'min-md:max-xl:flex', 'min-xs:max-xl:flex'],
['min-sm:max-lg:flex', 'min-sm:max-xl:flex', 'min-md:max-lg:flex', 'min-xs:max-sm:flex'],
),
).toMatchInlineSnapshot(`
":root {
Expand All @@ -1232,8 +1232,8 @@ test('sorting stacked min-* and max-* variants', async () => {
}

@media (width >= 280px) {
@media (width < 1280px) {
.min-xs\\:max-xl\\:flex {
@media (width < 640px) {
.min-xs\\:max-sm\\:flex {
display: flex;
}
}
Expand All @@ -1247,9 +1247,17 @@ test('sorting stacked min-* and max-* variants', async () => {
}
}

@media (width >= 640px) {
@media (width < 1024px) {
.min-sm\\:max-lg\\:flex {
display: flex;
}
}
}

@media (width >= 768px) {
@media (width < 1280px) {
.min-md\\:max-xl\\:flex {
@media (width < 1024px) {
.min-md\\:max-lg\\:flex {
display: flex;
}
}
Expand Down