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

Code before:
  // Replace the `@tailwind utilities` node with a context since it prints
  // children directly.
  if (utilitiesNode) {
    let node = utilitiesNode as AstNode as Context
    node.kind = 'context'
    node.context = {}
  }

  // Replace the `@variant` at-rules with the actual variant rules.
  if (variantNodes.length > 0) {
    for (let variantNode of variantNodes) {
      // Starting with the `&` rule node
      let node = styleRule('&', variantNode.nodes)

      let variant = variantNode.params

      let variantAst = designSystem.parseVariant(variant)
      if (variantAst === null) {
        throw new Error(`Cannot use \`@variant\` with unknown variant: ${variant}`)
      }

      let result = applyVariant(node, variantAst, designSystem.variants)
      if (result === null) {
        throw new Error(`Cannot use \`@variant\` with variant: ${variant}`)
      }

      // Update the variant at-rule node, to be the `&` rule node
      Object.assign(variantNode, node)
    }
    features |= Features.Variants
  }

  features |= substituteFunctions(ast, designSystem)
  features |= substituteAtApply(ast, designSystem)

  // Remove `@utility`, we couldn't replace it before yet because we had to
  // handle the nested `@apply` at-rules first.
  walk(ast, (node, { replaceWith }) => {
    if (node.kind !== 'at-rule') return

    if (node.name === '@utility') {
      replaceWith([])
    }

    // The `@utility` has to be top-level, therefore we don't have to traverse
    // into nested trees.
    return WalkAction.Skip
  })

  return {
    designSystem,

Review comment (suggestion):
Could someone theoretically register a `hover:focus` variant through configs and then try using that with `@variant`?

We might want explicitly to error on uses of `:` if that's possible

Code after:
        nodes.push(atRoot([keyframesRule]))
      }
    }
    firstThemeRule.nodes = nodes
  }

  // Replace the `@tailwind utilities` node with a context since it prints
  // children directly.
  if (utilitiesNode) {
    let node = utilitiesNode as AstNode as Context
    node.kind = 'context'
    node.context = {}
  }

  // Replace the `@variant` at-rules with the actual variant rules.
  if (variantNodes.length > 0) {
    for (let variantNode of variantNodes) {
      // Starting with the `&` rule node
      let node = styleRule('&', variantNode.nodes)

      let variant = variantNode.params

      let variantAst = designSystem.parseVariant(variant)
      if (variantAst === null) {
        throw new Error(`Cannot use \`@variant\` with unknown variant: ${variant}`)
      }

      let result = applyVariant(node, variantAst, designSystem.variants)
      if (result === null) {
        throw new Error(`Cannot use \`@variant\` with variant: ${variant}`)
      }

      // Update the variant at-rule node, to be the `&` rule node
      Object.assign(variantNode, node)
    }
    features |= Features.Variants
  }

  features |= substituteFunctions(ast, designSystem)
  features |= substituteAtApply(ast, designSystem)

  // Remove `@utility`, we couldn't replace it before yet because we had to
  // handle the nested `@apply` at-rules first.
  walk(ast, (node, { replaceWith }) => {
    if (node.kind !== 'at-rule') return

    if (node.name === '@utility') {
      replaceWith([])
    }

    // The `@utility` has to be top-level, therefore we don't have to traverse