archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Discard invalid variants such as data-checked-[selected=1]:* (#15629)

Browse Source
This commit is contained in:
Jordan Pittman 2025-01-15 09:55:39 -05:00 committed by GitHub
parent e62991abf9
commit 528c848575
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 78 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Ensure namespace reset with escaped `*` (e.g.: `--color-\*: initial;`) ([#15603](https://github.com/tailwindlabs/tailwindcss/pull/15603))
- Resolve values in functional utilities based on `@theme` options ([#15623](https://github.com/tailwindlabs/tailwindcss/pull/15623))
- _Upgrade (experimental)_: Pretty print `--spacing(…)` to prevent ambiguity ([#15596](https://github.com/tailwindlabs/tailwindcss/pull/15596))
- Discard invalid variants such as `data-checked-[selected=1]:*` ([#15629](https://github.com/tailwindlabs/tailwindcss/pull/15629))
## [4.0.0-beta.9] - 2025-01-09

69
packages/tailwindcss/src/candidate.test.ts
View File

@ -836,6 +836,63 @@ it('should not parse invalid arbitrary values', () => {
}
})
it('should not parse invalid arbitrary values in variants', () => {
let utilities = new Utilities()
utilities.static('flex', () => [])
let variants = new Variants()
variants.functional('data', () => {})
for (let candidate of [
'data-foo-[#0088cc]:flex',
'data-foo[#0088cc]:flex',
'data-foo-[color:var(--value)]:flex',
'data-foo[color:var(--value)]:flex',
'data-foo-[#0088cc]/50:flex',
'data-foo[#0088cc]/50:flex',
'data-foo-[#0088cc]/[50%]:flex',
'data-foo[#0088cc]/[50%]:flex',
'data-foo-[#0088cc]:flex!',
'data-foo[#0088cc]:flex!',
'data-foo-[var(--value)]:flex',
'data-foo[var(--value)]:flex',
'data-foo-[var(--value)]:flex!',
'data-foo[var(--value)]:flex!',
'data-foo-(color:--value):flex',
'data-foo(color:--value):flex',
'data-foo-(color:--value)/50:flex',
'data-foo(color:--value)/50:flex',
'data-foo-(color:--value)/(--mod):flex',
'data-foo(color:--value)/(--mod):flex',
'data-foo-(color:--value)/(number:--mod):flex',
'data-foo(color:--value)/(number:--mod):flex',
'data-foo-(--value):flex',
'data-foo(--value):flex',
'data-foo-(--value)/50:flex',
'data-foo(--value)/50:flex',
'data-foo-(--value)/(--mod):flex',
'data-foo(--value)/(--mod):flex',
'data-foo-(--value)/(number:--mod):flex',
'data-foo(--value)/(number:--mod):flex',
]) {
expect(run(candidate, { utilities, variants })).toEqual([])
}
})
it('should parse a utility with an implicit variable as the modifier', () => {
let utilities = new Utilities()
utilities.functional('bg', () => [])
@ -966,6 +1023,18 @@ it('should parse a utility with an explicit variable as the modifier that is imp
`)
})
it('should not parse a partial variant', () => {
let utilities = new Utilities()
utilities.static('flex', () => [])
let variants = new Variants()
variants.static('open', () => {})
variants.functional('data', () => {})
expect(run('open-:flex', { utilities, variants })).toMatchInlineSnapshot(`[]`)
expect(run('data-:flex', { utilities, variants })).toMatchInlineSnapshot(`[]`)
})
it('should parse a static variant starting with @', () => {
let utilities = new Utilities()
utilities.static('flex', () => [])

10
packages/tailwindcss/src/candidate.ts
View File

@ -620,7 +620,10 @@ export function parseVariant(variant: string, designSystem: DesignSystem): Varia
}
}
if (value[0] === '[' && value[value.length - 1] === ']') {
if (value[value.length - 1] === ']') {
// Discard values like `foo-[#bar]`
if (value[0] !== '[') continue
let arbitraryValue = decodeArbitraryValue(value.slice(1, -1))
// Empty arbitrary values are invalid. E.g.: `data-[]:`
@ -638,7 +641,10 @@ export function parseVariant(variant: string, designSystem: DesignSystem): Varia
}
}
if (value[0] === '(' && value[value.length - 1] === ')') {
if (value[value.length - 1] === ')') {
// Discard values like `foo-(--bar)`
if (value[0] !== '(') continue
let arbitraryValue = decodeArbitraryValue(value.slice(1, -1))
// Empty arbitrary values are invalid. E.g.: `data-():`