Repository: tailwindlabs/tailwindcss
File: packages/@tailwindcss-upgrade/src/template/codemods/modernize-arbitrary-values.ts (TypeScript)

Code before:
      // Expecting a non-relative arbitrary variant
      if (variant.relative) continue

      let ast = SelectorParser().astSync(variant.selector)

      // Expecting a single selector node
      if (ast.nodes.length !== 1) continue

      // Track whether we need to add a `*:` variant
      let addChildVariant = false

      // Handling a child combinator. E.g.: `[&>[data-visible]]` => `*:data-visible`
      if (
        // Only top-level, so `has-[&>[data-visible]]` is not supported
        parent === null &&
        // [&_>_[data-visible]]:flex
        //  ^ ^ ^^^^^^^^^^^^^^
        ast.nodes[0].length === 3 &&
        ast.nodes[0].nodes[0].type === 'nesting' &&
        ast.nodes[0].nodes[0].value === '&' &&
        ast.nodes[0].nodes[1].type === 'combinator' &&
        ast.nodes[0].nodes[1].value === '>' &&
        ast.nodes[0].nodes[2].type === 'attribute'
      ) {
        ast.nodes[0].nodes = [ast.nodes[0].nodes[2]]
        addChildVariant = true
      }

      // Filter out `&`. E.g.: `&[data-foo]` => `[data-foo]`
      let selectorNodes = ast.nodes[0].filter((node) => node.type !== 'nesting')

      // Expecting a single selector (normal selector or attribute selector)
      if (selectorNodes.length !== 1) continue

      let target = selectorNodes[0]
      if (target.type === 'pseudo' && target.value === ':is') {
        // Expecting a single selector node
        if (target.nodes.length !== 1) continue

        // Expecting a single attribute selector
        if (target.nodes[0].nodes.length !== 1) continue

        // Unwrap the selector from inside `&:is(…)`
        target = target.nodes[0].nodes[0]
      }

      // Expecting an attribute selector
      if (target.type !== 'attribute') continue

      // Attribute selectors
      let attributeKey = target.attribute

Review comment (refactor):
Only thing I can think of is that `*:data-visible:{utility}` is _technically_ something like `:where(& > [data-visible])` but it might be fine to ignore that detail.

If we're cool with that this all looks good.

Code after:

      // Expecting a non-relative arbitrary variant
      if (variant.relative) continue

      let ast = SelectorParser().astSync(variant.selector)

      // Expecting a single selector node
      if (ast.nodes.length !== 1) continue

      let prefixedVariant: Variant | null = null

      // Track whether we need to add a `**:` variant
      let addStarStarVariant = false

      // Handling a child combinator. E.g.: `[&>[data-visible]]` => `*:data-visible`
      if (
        // Only top-level, so `has-[&>[data-visible]]` is not supported
        parent === null &&
        // [&_>_[data-visible]]:flex
        //  ^ ^ ^^^^^^^^^^^^^^
        ast.nodes[0].length === 3 &&
        ast.nodes[0].nodes[0].type === 'nesting' &&
        ast.nodes[0].nodes[0].value === '&' &&
        ast.nodes[0].nodes[1].type === 'combinator' &&
        ast.nodes[0].nodes[1].value === '>' &&
        ast.nodes[0].nodes[2].type === 'attribute'
      ) {
        ast.nodes[0].nodes = [ast.nodes[0].nodes[2]]
        prefixedVariant = designSystem.parseVariant('*')
      }

      // Handling a grand child combinator. E.g.: `[&_[data-visible]]` => `**:data-visible`
      if (
        // Only top-level, so `has-[&_[data-visible]]` is not supported
        parent === null &&
        // [&_[data-visible]]:flex
        //  ^ ^^^^^^^^^^^^^^
        ast.nodes[0].length === 3 &&
        ast.nodes[0].nodes[0].type === 'nesting' &&
        ast.nodes[0].nodes[0].value === '&' &&
        ast.nodes[0].nodes[1].type === 'combinator' &&
        ast.nodes[0].nodes[1].value === ' ' &&
        ast.nodes[0].nodes[2].type === 'attribute'
      ) {
        ast.nodes[0].nodes = [ast.nodes[0].nodes[2]]
        prefixedVariant = designSystem.parseVariant('**')
      }

      // Filter out `&`. E.g.: `&[data-foo]` => `[data-foo]`
      let selectorNodes = ast.nodes[0].filter((node) => node.type !== 'nesting')