Function createVariants

packages/tailwindcss/src/variants.ts:349–1212

(theme: Theme)

}

export function createVariants(theme: Theme): Variants {
  // In the future we may want to support returning a rule here if some complex
  // variant requires it. For now pure mutation is sufficient and will be the
  // most performant.
  let variants = new Variants()

  /**
   * Register a static variant like `hover`.
   */
  function staticVariant(
    name: string,
    selectors: string[],
    { compounds }: { compounds?: Compounds } = {},
  ) {
    compounds = compounds ?? compoundsForSelectors(selectors)

    variants.static(
      name,
      (r) => {
        r.nodes = selectors.map((selector) => rule(selector, r.nodes))
      },
      { compounds },
    )
  }

  staticVariant('*', [':is(& > *)'], { compounds: Compounds.Never })
  staticVariant('**', [':is(& *)'], { compounds: Compounds.Never })

  function negateConditions(ruleName: string, conditions: string[]) {
    return conditions.map((condition) => {
      switch (ruleName) {
        case '@container': {
          let ast = ValueParser.parse(condition.trim())

          // @container {query}
          //            ^^^^^^^
          // ast        0
          if (ast.length >= 1 && ast[0].kind === 'function') {
            return `not ${condition}`
          }

          // @container not   {query}
          //            ^^^ ^ ^^^^^^^
          // ast        0   1 2
          else if (
            ast.length >= 3 &&
            ast[0].kind === 'word' &&
            ast[0].value === 'not' &&
            ast[2].kind === 'function'
          ) {
            // Drop the leading `not` (ast[0]) and separator (ast[1])
            ast.splice(0, 2)

            return ValueParser.toCss(ast)
          }

          // @container {name}   not   {query}
          //            ^^^^^^ ^ ^^^ ^ ^^^^^^^