add rule(…) ast helper

This keeps the codebase in a similar state as before, but this just
creates one of the follow nodes: `AtRule | StyleRule`

Author: RobinMalfait

packages/tailwindcss/src/ast.ts

@@ -1,3 +1,5 @@
+import { parseAtRule } from './css-parser'
+
 export type StyleRule = {
   kind: 'style-rule'
   selector: string
@@ -34,6 +36,7 @@ export type AtRoot = {
   nodes: AstNode[]
 }
 
+export type Rule = StyleRule | AtRule
 export type AstNode = StyleRule | AtRule | Declaration | Comment | Context | AtRoot
 
 export function styleRule(selector: string, nodes: AstNode[] = []): StyleRule {
@@ -53,6 +56,14 @@ export function atRule(name: string, params: string = '', nodes: AstNode[] = [])
   }
 }
 
+export function rule(selector: string, nodes: AstNode[] = []): StyleRule | AtRule {
+  if (selector[0] === '@') {
+    return parseAtRule(selector, nodes)
+  }
+
+  return styleRule(selector, nodes)
+}
+
 export function decl(property: string, value: string | undefined): Declaration {
   return {
     kind: 'declaration',

packages/tailwindcss/src/compat/plugin-api.ts

@@ -1,5 +1,5 @@
 import { substituteAtApply } from '../apply'
-import { atRule, decl, styleRule, type AstNode } from '../ast'
+import { atRule, decl, rule, styleRule, type AstNode } from '../ast'
 import type { Candidate, CandidateModifier, NamedUtilityValue } from '../candidate'
 import { substituteFunctions } from '../css-functions'
 import * as CSS from '../css-parser'
@@ -432,11 +432,7 @@ export function objectToAst(rules: CssInJs | CssInJs[]): AstNode[] {
   for (let [name, value] of entries) {
     if (typeof value !== 'object') {
       if (!name.startsWith('--') && value === '@slot') {
-        if (name[0] === '@') {
-          ast.push(CSS.parseAtRule(name, [atRule('slot')]))
-        } else {
-          ast.push(styleRule(name, [atRule('slot')]))
-        }
+        ast.push(rule(name, [atRule('slot')]))
       } else {
         // Convert camelCase to kebab-case:
         // https://github.com/postcss/postcss-js/blob/b3db658b932b42f6ac14ca0b1d50f50c4569805b/parser.js#L30-L35
@@ -449,19 +445,11 @@ export function objectToAst(rules: CssInJs | CssInJs[]): AstNode[] {
         if (typeof item === 'string') {
           ast.push(decl(name, item))
         } else {
-          if (name[0] === '@') {
-            ast.push(CSS.parseAtRule(name, objectToAst(item)))
-          } else {
-            ast.push(styleRule(name, objectToAst(item)))
-          }
+          ast.push(rule(name, objectToAst(item)))
         }
       }
     } else if (value !== null) {
-      if (name[0] === '@') {
-        ast.push(CSS.parseAtRule(name, objectToAst(value)))
-      } else {
-        ast.push(styleRule(name, objectToAst(value)))
-      }
+      ast.push(rule(name, objectToAst(value)))
     }
   }
 

packages/tailwindcss/src/compile.ts

@@ -1,7 +1,15 @@
-import { atRule, decl, styleRule, walk, WalkAction, type AstNode, type AtRule, type StyleRule } from './ast'
+import {
+  atRule,
+  decl,
+  rule,
+  walk,
+  WalkAction,
+  type AstNode,
+  type Rule,
+  type StyleRule,
+} from './ast'
 import { type Candidate, type Variant } from './candidate'
 import { substituteFunctions } from './css-functions'
-import { parseAtRule } from './css-parser'
 import { type DesignSystem } from './design-system'
 import GLOBAL_PROPERTY_ORDER from './property-order'
 import { asColor, type Utility } from './utilities'
@@ -170,7 +178,7 @@ export function compileAstNodes(candidate: Candidate, designSystem: DesignSystem
 }
 
 export function applyVariant(
-  node: AtRule | StyleRule,
+  node: Rule,
   variant: Variant,
   variants: Variants,
   depth: number = 0,
@@ -182,11 +190,7 @@ export function applyVariant(
     // E.g. `[>img]:flex` is not valid, but `has-[>img]:flex` is
     if (variant.relative && depth === 0) return null
 
-    if (variant.selector[0] === '@') {
-      node.nodes = [parseAtRule(variant.selector, node.nodes)]
-    } else {
-      node.nodes = [styleRule(variant.selector, node.nodes)]
-    }
+    node.nodes = [rule(variant.selector, node.nodes)]
     return
   }
 

packages/tailwindcss/src/css-parser.ts

@@ -1,12 +1,12 @@
 import {
   atRule,
   comment,
-  styleRule,
+  rule,
   type AstNode,
   type AtRule,
   type Comment,
   type Declaration,
-  type StyleRule,
+  type Rule,
 } from './ast'
 
 const BACKSLASH = 0x5c
@@ -35,9 +35,9 @@ export function parse(input: string) {
   let ast: AstNode[] = []
   let licenseComments: Comment[] = []
 
-  let stack: (StyleRule | AtRule | null)[] = []
+  let stack: (Rule | null)[] = []
 
-  let parent = null as (StyleRule | AtRule) | null
+  let parent = null as Rule | null
   let node = null as AstNode | null
 
   let buffer = ''
@@ -347,11 +347,7 @@ export function parse(input: string) {
       closingBracketStack += '}'
 
       // At this point `buffer` should resemble a selector or an at-rule.
-      if (buffer.charCodeAt(0) === AT_SIGN) {
-        node = parseAtRule(buffer)
-      } else {
-        node = styleRule(buffer.trim(), [])
-      }
+      node = rule(buffer.trim())
 
       // Attach the rule to the parent in case it's nested.
       if (parent) {
@@ -502,6 +498,7 @@ export function parse(input: string) {
 export function parseAtRule(buffer: string, nodes: AstNode[] = []): AtRule {
   let splitIdx = buffer.search(/[\s(]/g)
   if (splitIdx === -1) return atRule(buffer.slice(1).trim(), '', nodes)
+
   let name = buffer.slice(1, splitIdx).trim()
   let params = buffer.slice(splitIdx).trim()
   return atRule(name, params, nodes)

packages/tailwindcss/src/variants.ts

@@ -3,21 +3,22 @@ import {
   atRoot,
   atRule,
   decl,
+  rule,
   styleRule,
   walk,
   type AstNode,
   type AtRule,
+  type Rule,
   type StyleRule,
 } from './ast'
 import { type Variant } from './candidate'
-import { parseAtRule } from './css-parser'
 import type { Theme } from './theme'
 import { DefaultMap } from './utils/default-map'
 import { isPositiveInteger } from './utils/infer-data-type'
 import { segment } from './utils/segment'
 
 type VariantFn<T extends Variant['kind']> = (
-  rule: AtRule | StyleRule,
+  rule: Rule,
   variant: Extract<Variant, { kind: T }>,
 ) => null | void
 
@@ -324,13 +325,7 @@ export function createVariants(theme: Theme): Variants {
     variants.static(
       name,
       (r) => {
-        r.nodes = selectors.map((selector) => {
-          if (selector[0] === '@') {
-            return parseAtRule(selector, r.nodes)
-          } else {
-            return styleRule(selector, r.nodes)
-          }
-        })
+        r.nodes = selectors.map((selector) => rule(selector, r.nodes))
       },
       { compounds },
     )
@@ -438,7 +433,7 @@ export function createVariants(theme: Theme): Variants {
       if (atRules.length > 1) return WalkAction.Stop
       if (styleRules.length > 1) return WalkAction.Stop
 
-      let rules: (StyleRule | AtRule)[] = []
+      let rules: Rule[] = []
 
       for (let node of styleRules) {
         let selector = negateSelector(node.selector)