Discard invalid variants such as data-foo-[bar=1]

Author: thecrypticace

packages/tailwindcss/src/candidate.test.ts

@@ -836,6 +836,39 @@ 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!',
+  ]) {
+    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 +999,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', () => [])

packages/tailwindcss/src/candidate.ts

@@ -413,7 +413,7 @@ export function* parseCandidate(input: string, designSystem: DesignSystem): Iter
   // Not an arbitrary value
   else {
     roots = findRoots(baseWithoutModifier, (root: string) => {
-      return designSystem.utilities.has(root, 'functional')
+      return designSystem.utilities.has(root, 'functional') ? 'functional' : null
     })
   }
 
@@ -587,7 +587,7 @@ export function parseVariant(variant: string, designSystem: DesignSystem): Varia
     if (additionalModifier) return null
 
     let roots = findRoots(variantWithoutModifier, (root) => {
-      return designSystem.variants.has(root)
+      return designSystem.variants.has(root) ? designSystem.variants.kind(root) : null
     })
 
     for (let [root, value] of roots) {
@@ -702,9 +702,12 @@ type Root = [
   value: string | null,
 ]
 
-function* findRoots(input: string, exists: (input: string) => boolean): Iterable<Root> {
+function* findRoots(
+  input: string,
+  kind: (input: string) => 'static' | 'functional' | 'compound' | 'arbitrary' | null,
+): Iterable<Root> {
   // If there is an exact match, then that's the root.
-  if (exists(input)) {
+  if (kind(input)) {
     yield [input, null]
   }
 
@@ -714,7 +717,7 @@ function* findRoots(input: string, exists: (input: string) => boolean): Iterable
   if (idx === -1) {
     // Variants starting with `@` are special because they don't need a `-`
     // after the `@` (E.g.: `@-lg` should be written as `@lg`).
-    if (input[0] === '@' && exists('@')) {
+    if (input[0] === '@' && kind('@')) {
       yield ['@', input.slice(1)]
     }
     return
@@ -729,9 +732,28 @@ function* findRoots(input: string, exists: (input: string) => boolean): Iterable
   // `bg`         -> Match
   do {
     let maybeRoot = input.slice(0, idx)
+    let rootKind = kind(maybeRoot)
+
+    if (rootKind) {
+      let value = input.slice(idx + 1)
+
+      // Compound variants e.g. not-in-[#foo] are ultimately split like so:
+      // - root: not
+      // - value: in-[#foo]
+      //  - root: in
+      //  - value: [#foo]
+      //
+      // However, other variants don't have this behavior, so we can skip
+      // over this possible variant if the root is not a compound variant
+      // and it contains an arbitrary value _after_ some other value
+      // e.g. `supports-display-[color:red]` is invalid
+      if (rootKind !== 'compound') {
+        if (value[value.length - 1] === ']' && value[0] !== '[') {
+          break
+        }
+      }
 
-    if (exists(maybeRoot)) {
-      let root: Root = [maybeRoot, input.slice(idx + 1)]
+      let root: Root = [maybeRoot, value]
 
       // If the leftover value is an empty string, it means that the value is an
       // invalid named value, e.g.: `bg-`. This makes the candidate invalid and we