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

Add nth-* variants (#13661)

Browse source 
* Add `nth-*` variants

* Update changelog

* Update snapshots

* Update

* update older `toMatchInlineSnapshot` to `toEqual`

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
This commit is contained in:
Jordan Pittman 2024-06-03 11:41:01 -04:00 • committed by GitHub
parent 2428f8f48c
commit 1124d1d3c7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 142 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

4
CHANGELOG.md
View file

@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Use `length` data type for `background-size` instead of `background-position` ([#13771](https://github.com/tailwindlabs/tailwindcss/pull/13771))
- Support negative values for `{col,row}-{start,end}` utilities ([#13780](https://github.com/tailwindlabs/tailwindcss/pull/13780))
### Added
- Add `nth-*` variants ([#13661](https://github.com/tailwindlabs/tailwindcss/pull/13661))
## [4.0.0-alpha.15] - 2024-05-08
### Fixed

40
packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
View file

@ -1933,6 +1933,10 @@ exports[`getVariants 1`] = `
"has",
"aria",
"data",
"nth",
"nth-last",
"nth-of-type",
"nth-last-of-type",
"ltr",
"rtl",
],
@ -1980,6 +1984,10 @@ exports[`getVariants 1`] = `
"has",
"aria",
"data",
"nth",
"nth-last",
"nth-of-type",
"nth-last-of-type",
"ltr",
"rtl",
],
@ -2307,6 +2315,10 @@ exports[`getVariants 1`] = `
"has",
"aria",
"data",
"nth",
"nth-last",
"nth-of-type",
"nth-last-of-type",
"ltr",
"rtl",
],
@ -2335,6 +2347,34 @@ exports[`getVariants 1`] = `
"selectors": [Function],
"values": [],
},
{
"hasDash": true,
"isArbitrary": true,
"name": "nth",
"selectors": [Function],
"values": [],
},
{
"hasDash": true,
"isArbitrary": true,
"name": "nth-last",
"selectors": [Function],
"values": [],
},
{
"hasDash": true,
"isArbitrary": true,
"name": "nth-of-type",
"selectors": [Function],
"values": [],
},
{
"hasDash": true,
"isArbitrary": true,
"name": "nth-last-of-type",
"selectors": [Function],
"values": [],
},
{
"hasDash": true,
"isArbitrary": true,

2
packages/tailwindcss/src/utilities.test.ts
View file

@ -6253,7 +6253,7 @@ test('divide-color', () => {
'-divide-[#0088cc]/[0.5]',
'-divide-[#0088cc]/[50%]',
]),
).toMatchInlineSnapshot(`""`)
).toEqual('')
})
test('place-self', () => {

61
packages/tailwindcss/src/variants.test.ts
View file

@ -1594,6 +1594,67 @@ test('forced-colors', () => {
`)
})
test('nth', () => {
expect(
run([
'nth-3:flex',
'nth-[2n+1]:flex',
'nth-[2n+1_of_.foo]:flex',
'nth-last-3:flex',
'nth-last-[2n+1]:flex',
'nth-last-[2n+1_of_.foo]:flex',
'nth-of-type-3:flex',
'nth-of-type-[2n+1]:flex',
'nth-last-of-type-3:flex',
'nth-last-of-type-[2n+1]:flex',
]),
).toMatchInlineSnapshot(`
".nth-3\\:flex:nth-child(3) {
display: flex;
}
.nth-\\[2n\\+1\\]\\:flex:nth-child(odd) {
display: flex;
}
.nth-\\[2n\\+1_of_\\.foo\\]\\:flex:nth-child(odd of .foo) {
display: flex;
}
.nth-last-3\\:flex:nth-last-child(3) {
display: flex;
}
.nth-last-\\[2n\\+1\\]\\:flex:nth-last-child(odd) {
display: flex;
}
.nth-last-\\[2n\\+1_of_\\.foo\\]\\:flex:nth-last-child(odd of .foo) {
display: flex;
}
.nth-of-type-3\\:flex:nth-of-type(3) {
display: flex;
}
.nth-of-type-\\[2n\\+1\\]\\:flex:nth-of-type(odd) {
display: flex;
}
.nth-last-of-type-3\\:flex:nth-last-of-type(3) {
display: flex;
}
.nth-last-of-type-\\[2n\\+1\\]\\:flex:nth-last-of-type(odd) {
display: flex;
}"
`)
expect(
run(['nth-foo:flex', 'nth-of-type-foo:flex', 'nth-last-foo:flex', 'nth-last-of-type-foo:flex']),
).toEqual('')
})
test('container queries', () => {
expect(
compileCss(

36
packages/tailwindcss/src/variants.ts
View file

@ -373,6 +373,42 @@ export function createVariants(theme: Theme): Variants {
ruleNode.nodes = [rule(`&[data-${variant.value.value}]`, ruleNode.nodes)]
})
variants.functional('nth', (ruleNode, variant) => {
if (variant.value === null) return null
// Only numeric bare values are allowed
if (variant.value.kind === 'named' && Number.isNaN(Number(variant.value.value))) return null
ruleNode.nodes = [rule(`&:nth-child(${variant.value.value})`, ruleNode.nodes)]
})
variants.functional('nth-last', (ruleNode, variant) => {
if (variant.value === null) return null
// Only numeric bare values are allowed
if (variant.value.kind === 'named' && Number.isNaN(Number(variant.value.value))) return null
ruleNode.nodes = [rule(`&:nth-last-child(${variant.value.value})`, ruleNode.nodes)]
})
variants.functional('nth-of-type', (ruleNode, variant) => {
if (variant.value === null) return null
// Only numeric bare values are allowed
if (variant.value.kind === 'named' && Number.isNaN(Number(variant.value.value))) return null
ruleNode.nodes = [rule(`&:nth-of-type(${variant.value.value})`, ruleNode.nodes)]
})
variants.functional('nth-last-of-type', (ruleNode, variant) => {
if (variant.value === null) return null
// Only numeric bare values are allowed
if (variant.value.kind === 'named' && Number.isNaN(Number(variant.value.value))) return null
ruleNode.nodes = [rule(`&:nth-last-of-type(${variant.value.value})`, ruleNode.nodes)]
})
variants.functional(
'supports',
(ruleNode, variant) => {