Repository: tailwindlabs/tailwindcss
File: packages/@tailwindcss-upgrade/src/template/codemods/variant-order.ts (TypeScript)

Code before:
      !node.selector.startsWith('@media') &&
      // Combinators include any of the following characters
      (node.selector.includes(' ') ||
        node.selector.includes('>') ||
        node.selector.includes('+') ||
        node.selector.includes('~')),
  )
}

function isEndOfSelectorPseudoElement(variant: Variant) {
  if (variant.kind !== 'static') {
    return false
  }
  switch (variant.root) {
    case 'after':
    case 'backdrop':
    case 'before':
    case 'first-letter':
    case 'first-line':
    case 'marker':
    case 'placeholder':
    case 'selection':
      return true
    default:
      return false
  }
}

function getAppliedNodeStack(designSystem: DesignSystem, variant: Variant): AstNode[] {
  let stack: AstNode[] = []
  let ast = designSystem
    .compileAstNodes({
      kind: 'arbitrary',
      property: 'color',
      value: 'red',
      modifier: null,
      variants: [variant],
      important: false,
      raw: 'candidate',
    })
    .map((c) => c.node)

  walk(ast, (node) => {
    // Ignore the variant root class
    if (node.kind === 'rule' && node.selector === '.candidate') {
      return
    }
    // Ignore the dummy declaration
    if (node.kind === 'declaration' && node.property === 'color' && node.value === 'red') {
      return
    }

Review comment (refactor):
Instead of hardcoding specific utility names, this could also look at the generated CSS and check for these pseude-element selectors (similar to v3 where we fixed this by operating on the generated CSS)

Code after:
  let stack = getAppliedNodeStack(designSystem, variant)
  return stack.some(
    (node) =>
      node.kind === 'rule' &&
      // Ignore at-rules as they are hoisted
      node.selector[0] !== '@' &&
      // Combinators include any of the following characters
      (node.selector.includes(' ') ||
        node.selector.includes('>') ||
        node.selector.includes('+') ||
        node.selector.includes('~')),
  )
}

function isEndOfSelectorPseudoElement(designSystem: DesignSystem, variant: Variant) {
  let stack = getAppliedNodeStack(designSystem, variant)
  return stack.some(
    (node) =>
      node.kind === 'rule' &&
      (node.selector.includes('::after') ||
        node.selector.includes('::backdrop') ||
        node.selector.includes('::before') ||
        node.selector.includes('::first-letter') ||
        node.selector.includes('::first-line') ||
        node.selector.includes('::marker') ||
        node.selector.includes('::placeholder') ||
        node.selector.includes('::selection')),
  )
}

function getAppliedNodeStack(designSystem: DesignSystem, variant: Variant): AstNode[] {
  let stack: AstNode[] = []
  let ast = designSystem
    .compileAstNodes({
      kind: 'arbitrary',
      property: 'color',
      value: 'red',
      modifier: null,
      variants: [variant],
      important: false,
      raw: 'candidate',
    })
    .map((c) => c.node)

  walk(ast, (node) => {
    // Ignore the variant root class
    if (node.kind === 'rule' && node.selector === '.candidate') {
      return
    }
    // Ignore the dummy declaration
    if (node.kind === 'declaration' && node.property === 'color' && node.value === 'red') {