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

Code before:
        () => Array.from(widths.keys()).filter((key) => key !== null) as string[],
      )
    }
  }

  staticVariant('portrait', ['@media (orientation: portrait)'], { compounds: false })
  staticVariant('landscape', ['@media (orientation: landscape)'], { compounds: false })

  staticVariant('ltr', ['&:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *)'])
  staticVariant('rtl', ['&:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)'])

  staticVariant('dark', ['@media (prefers-color-scheme: dark)'], { compounds: false })

  staticVariant('starting', ['@starting-style'], { compounds: false })

  staticVariant('print', ['@media print'], { compounds: false })

  staticVariant('forced-colors', ['@media (forced-colors: active)'], { compounds: false })

  return variants
}

function quoteAttributeValue(value: string) {
  if (value.includes('=')) {
    // Do not allow invalid operators in attribute values
    if (/[*$^|~]\s+=/.test(value)) {
      return null
    }

    value = value.replace(/(=.*)/g, (_fullMatch, match) => {
      let value = match.slice(1).trim()

      // If the value is already quoted, skip.
      if (value[0] === "'" || value[0] === '"') {
        return match
      }

      // Handle regex flags on unescaped values
      if (match.length > 2) {
        let trailingCharacter = match[match.length - 1]
        if (
          match[match.length - 2] === ' ' &&
          (trailingCharacter === 'i' ||
            trailingCharacter === 'I' ||
            trailingCharacter === 's' ||
            trailingCharacter === 'S')
        ) {
          return `="${match.slice(1, -2)}" ${match[match.length - 1]}`
        }
      }


Review comment (suggestion):
I think this condition would break this variant:

```
data-[potato="^_="]
```

Feeling like the better overall solution to this problem should rely on `segment` — do we just need to segment the value on `=` and quote the last chunk if it isn't already quoted? Maybe we don't need to protect people from writing `data-[potato_^_=_foo]` and just let that be user error that generates junk.

Code after:
  staticVariant('landscape', ['@media (orientation: landscape)'], { compounds: false })

  staticVariant('ltr', ['&:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *)'])
  staticVariant('rtl', ['&:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)'])

  staticVariant('dark', ['@media (prefers-color-scheme: dark)'], { compounds: false })

  staticVariant('starting', ['@starting-style'], { compounds: false })

  staticVariant('print', ['@media print'], { compounds: false })

  staticVariant('forced-colors', ['@media (forced-colors: active)'], { compounds: false })

  return variants
}

function quoteAttributeValue(input: string) {
  if (input.includes('=')) {
    let [attribute, ...after] = segment(input, '=')
    let value = after.join('=').trim()

    // If the value is already quoted, skip.
    if (value[0] === "'" || value[0] === '"') {
      return input
    }

    // Handle case sensitivity flags on unescaped values
    if (value.length > 1) {
      let trailingCharacter = value[value.length - 1]
      if (
        value[value.length - 2] === ' ' &&
        (trailingCharacter === 'i' ||
          trailingCharacter === 'I' ||
          trailingCharacter === 's' ||
          trailingCharacter === 'S')
      ) {
        return `${attribute}="${value.slice(0, -2)}" ${trailingCharacter}`
      }
    }

    return `${attribute}="${value}"`
  }

  return input
}

export function substituteAtSlot(ast: AstNode[], nodes: AstNode[]) {
  walk(ast, (node, { replaceWith }) => {
    // Replace `@slot` with rule nodes
    if (node.kind === 'rule' && node.selector === '@slot') {
      replaceWith(nodes)