Repository: tailwindlabs/tailwindcss
File: packages/tailwindcss/src/compat/theme-variants.ts (TypeScript)

Code before:
    let coreApplyFn = coreAria?.applyFn
    let coreCompounds = coreAria?.compounds
    designSystem.variants.functional(
      'aria',
      (ruleNode, variant) => {
        let value = variant.value
        if (value && value.kind === 'named' && value.value in ariaVariants) {
          ruleNode.nodes = [rule(`&[aria-${ariaVariants[value.value]}]`, ruleNode.nodes)]
          return
        }
        return coreApplyFn?.(ruleNode, variant)
      },
      { compounds: coreCompounds },
    )
  }

  if (Object.keys(supportsVariants).length > 0) {
    let coreSupports = designSystem.variants.get('supports')
    let coreApplyFn = coreSupports?.applyFn
    let coreCompounds = coreSupports?.compounds
    designSystem.variants.functional(
      'supports',
      (ruleNode, variant) => {
        let value = variant.value
        if (value && value.kind === 'named' && value.value in supportsVariants) {
          ruleNode.nodes = [rule(`@supports (${supportsVariants[value.value]})`, ruleNode.nodes)]
          return
        }
        return coreApplyFn?.(ruleNode, variant)
      },
      { compounds: coreCompounds },
    )
  }

  if (Object.keys(dataVariants).length > 0) {
    let coreData = designSystem.variants.get('data')
    let coreApplyFn = coreData?.applyFn
    let coreCompounds = coreData?.compounds
    designSystem.variants.functional(
      'data',
      (ruleNode, variant) => {
        let value = variant.value
        if (value && value.kind === 'named' && value.value in dataVariants) {
          ruleNode.nodes = [rule(`&[data-${dataVariants[value.value]}]`, ruleNode.nodes)]
          return
        }
        return coreApplyFn?.(ruleNode, variant)
      },
      { compounds: coreCompounds },
    )
  }

Review comment (suggestion):
This logic needs to repeat the if checks from the core supports variant.

For example:
```ts
{ theme: { supports: { foo: 'bar' } } }
```

should mean that `supports-foo:underline` generates:
```css
@supports (bar: var(--tw)) { … }
```

Code after:
    let compounds = coreAria?.compounds
    designSystem.variants.functional(
      'aria',
      (ruleNode, variant) => {
        let value = variant.value
        if (value && value.kind === 'named' && value.value in ariaVariants) {
          return applyFn?.(ruleNode, {
            ...variant,
            value: { kind: 'arbitrary', value: ariaVariants[value.value] as string },
          })
        }
        return applyFn?.(ruleNode, variant)
      },
      { compounds },
    )
  }

  if (Object.keys(supportsVariants).length > 0) {
    let coreSupports = designSystem.variants.get('supports')
    let applyFn = coreSupports?.applyFn
    let compounds = coreSupports?.compounds
    designSystem.variants.functional(
      'supports',
      (ruleNode, variant) => {
        let value = variant.value
        if (value && value.kind === 'named' && value.value in supportsVariants) {
          return applyFn?.(ruleNode, {
            ...variant,
            value: { kind: 'arbitrary', value: supportsVariants[value.value] as string },
          })
        }
        return applyFn?.(ruleNode, variant)
      },
      { compounds },
    )
  }

  if (Object.keys(dataVariants).length > 0) {
    let coreData = designSystem.variants.get('data')
    let applyFn = coreData?.applyFn
    let compounds = coreData?.compounds
    designSystem.variants.functional(
      'data',
      (ruleNode, variant) => {
        let value = variant.value
        if (value && value.kind === 'named' && value.value in dataVariants) {
          return applyFn?.(ruleNode, {
            ...variant,
            value: { kind: 'arbitrary', value: dataVariants[value.value] as string },
          })
        }