Repository: tailwindlabs/tailwindcss
File: packages/tailwindcss/src/candidate.ts (TypeScript)

Code before:
              root,
              modifier: parsedModifier,
              value: {
                kind: 'arbitrary',
                value: `var(${arbitraryValue})`,
              },
            }
          }

          return {
            kind: 'functional',
            root,
            modifier: parsedModifier,
            value: { kind: 'named', value },
          }
        }

        case 'compound': {
          if (value === null) return null

          // Forward the modifier of the `not` and `has` variants to its
          // subVariant. This allows for `not-group-hover/name:flex` to work.
          if (modifier && (root === 'not' || root === 'has')) {
            value = `${value}/${modifier}`
            modifier = null
          }

          let subVariant = designSystem.parseVariant(value)
          if (subVariant === null) return null

          // These two variants must be compatible when compounded
          if (!designSystem.variants.compoundsWith(root, subVariant)) return null

          let parsedModifier = modifier === null ? null : parseModifier(modifier)
          // Empty arbitrary values are invalid. E.g.: `group-focus/[]:` or `group-focus/():`
          //                                                        ^^                   ^^
          if (modifier !== null && parsedModifier === null) return null

          return {
            kind: 'compound',
            root,
            modifier: parsedModifier,
            variant: subVariant,
          }
        }
      }
    }
  }

  return null
}

Review comment (suggestion):
Ideally this was located in the handling of `not` and `has` variants, but since it's depth first the sub variant would've already been handled.

I'm kind of okay with special casing `not` and `has` because right now you can't create compound variants outside of core anyway so we do have control over all of it.

If you were to override the `not` or `has` variant via `@variant not (…)` then it wouldn't be a `compound` variant anymore so we wouldn't hit this branch.

Code after:
              root,
              modifier: parsedModifier,
              value: {
                kind: 'arbitrary',
                value: `var(${arbitraryValue})`,
              },
            }
          }

          return {
            kind: 'functional',
            root,
            modifier: parsedModifier,
            value: { kind: 'named', value },
          }
        }

        case 'compound': {
          if (value === null) return null

          // Forward the modifier of the compound variants to its subVariant.
          // This allows for `not-group-hover/name:flex` to work.
          if (modifier && (root === 'not' || root === 'has' || root === 'in')) {
            value = `${value}/${modifier}`
            modifier = null
          }

          let subVariant = designSystem.parseVariant(value)
          if (subVariant === null) return null

          // These two variants must be compatible when compounded
          if (!designSystem.variants.compoundsWith(root, subVariant)) return null

          let parsedModifier = modifier === null ? null : parseModifier(modifier)
          // Empty arbitrary values are invalid. E.g.: `group-focus/[]:` or `group-focus/():`
          //                                                        ^^                   ^^
          if (modifier !== null && parsedModifier === null) return null

          return {
            kind: 'compound',
            root,
            modifier: parsedModifier,
            variant: subVariant,
          }
        }
      }
    }
  }

  return null
}