Allow at-rules to have empty bodies

Author: thecrypticace

packages/tailwindcss-language-service/src/css/ast.ts

@@ -16,7 +16,7 @@ export type AtRule = {
   kind: 'at-rule'
   name: string
   params: string
-  nodes: AstNode[]
+  nodes: AstNode[] | null
 
   src?: SourceLocation
   dst?: SourceLocation
@@ -69,7 +69,7 @@ export function styleRule(selector: string, nodes: AstNode[] = []): StyleRule {
   }
 }
 
-export function atRule(name: string, params: string = '', nodes: AstNode[] = []): AtRule {
+export function atRule(name: string, params: string = '', nodes: AstNode[] | null = []): AtRule {
   return {
     kind: 'at-rule',
     name,
@@ -78,12 +78,12 @@ export function atRule(name: string, params: string = '', nodes: AstNode[] = [])
   }
 }
 
-export function rule(selector: string, nodes: AstNode[] = []): StyleRule | AtRule {
+export function rule(selector: string, nodes: AstNode[] | null = []): StyleRule | AtRule {
   if (selector.charCodeAt(0) === AT_SIGN) {
     return parseAtRule(selector, nodes)
   }
 
-  return styleRule(selector, nodes)
+  return styleRule(selector, nodes ?? [])
 }
 
 export function decl(property: string, value: string | undefined, important = false): Declaration {

packages/tailwindcss-language-service/src/css/clone-ast-node.ts

@@ -16,7 +16,7 @@ export function cloneAstNode<T extends AstNode>(node: T): T {
         kind: node.kind,
         name: node.name,
         params: node.params,
-        nodes: node.nodes.map(cloneAstNode),
+        nodes: node.nodes?.map(cloneAstNode) ?? null,
         src: node.src,
         dst: node.dst,
       } satisfies AtRule as T

packages/tailwindcss-language-service/src/css/from-postcss-ast.ts

@@ -44,9 +44,9 @@ export function fromPostCSSAst(root: postcss.Root): AstNode[] {
 
     // AtRule
     else if (node.type === 'atrule') {
-      let astNode = atRule(`@${node.name}`, node.params)
+      let astNode = atRule(`@${node.name}`, node.params, node.nodes ? [] : null)
       astNode.src = toSource(node)
-      node.each((child) => transform(child, astNode.nodes))
+      node.each((child) => transform(child, astNode.nodes!))
       parent.push(astNode)
     }
 

packages/tailwindcss-language-service/src/css/parse.ts

@@ -277,6 +277,7 @@ export function parse(input: string, opts?: ParseOptions): AstNode[] {
       }
 
       if (parent) {
+        parent.nodes ??= []
         parent.nodes.push(declaration)
       } else {
         ast.push(declaration)
@@ -303,6 +304,7 @@ export function parse(input: string, opts?: ParseOptions): AstNode[] {
 
       // At-rule is nested inside of a rule, attach it to the parent.
       if (parent) {
+        parent.nodes ??= []
         parent.nodes.push(node)
       }
 
@@ -343,6 +345,7 @@ export function parse(input: string, opts?: ParseOptions): AstNode[] {
       }
 
       if (parent) {
+        parent.nodes ??= []
         parent.nodes.push(declaration)
       } else {
         ast.push(declaration)
@@ -369,6 +372,7 @@ export function parse(input: string, opts?: ParseOptions): AstNode[] {
 
       // Attach the rule to the parent in case it's nested.
       if (parent) {
+        parent.nodes ??= []
         parent.nodes.push(node)
       }
 
@@ -421,6 +425,7 @@ export function parse(input: string, opts?: ParseOptions): AstNode[] {
 
           // At-rule is nested inside of a rule, attach it to the parent.
           if (parent) {
+            parent.nodes ??= []
             parent.nodes.push(node)
           }
 
@@ -460,6 +465,7 @@ export function parse(input: string, opts?: ParseOptions): AstNode[] {
               node.dst = [source, bufferStart, i]
             }
 
+            parent.nodes ??= []
             parent.nodes.push(node)
           }
         }
@@ -548,7 +554,7 @@ export function parse(input: string, opts?: ParseOptions): AstNode[] {
   return ast
 }
 
-export function parseAtRule(buffer: string, nodes: AstNode[] = []): AtRule {
+export function parseAtRule(buffer: string, nodes: AstNode[] | null = []): AtRule {
   let name = buffer
   let params = ''
 

packages/tailwindcss-language-service/src/css/to-css.ts

@@ -91,7 +91,7 @@ export function toCss(ast: AstNode[], track?: boolean): string {
       // ```css
       // @layer base, components, utilities;
       // ```
-      if (node.nodes.length === 0) {
+      if (!node.nodes) {
         let css = `${indent}${node.name} ${node.params};\n`
 
         if (track) {

packages/tailwindcss-language-service/src/css/to-postcss-ast.ts

@@ -85,11 +85,15 @@ export function toPostCSSAst(ast: AstNode[], source?: postcss.Source): postcss.R
 
     // AtRule
     else if (node.kind === 'at-rule') {
-      let astNode = postcss.atRule({ name: node.name.slice(1), params: node.params })
+      let astNode = postcss.atRule({
+        name: node.name.slice(1),
+        params: node.params,
+        nodes: node.nodes ? [] : undefined,
+      })
       updateSource(astNode, node.src)
       astNode.raws.semicolon = true
       parent.append(astNode)
-      for (let child of node.nodes) {
+      for (let child of node.nodes ?? []) {
         transform(child, astNode)
       }
     }