Allow at-rules to have empty bodies

Author: thecrypticace

packages/tailwindcss-language-server/src/util/v4/design-system.ts

@@ -10,6 +10,7 @@ import type { Jiti } from 'jiti/lib/types'
 import { assets } from './assets'
 import { plugins } from './plugins'
 import { AstNode, cloneAstNode, parse } from '@tailwindcss/language-service/src/css'
+import { walk, WalkAction } from '@tailwindcss/language-service/src/util/walk'
 
 const HAS_V4_IMPORT = /@import\s*(?:'tailwindcss'|"tailwindcss")/
 const HAS_V4_THEME = /@theme\s*\{/
@@ -240,7 +241,27 @@ export async function loadDesignSystem(
         let str = css[idx]
 
         if (Array.isArray(str)) {
-          cache[cls] = str
+          let ast = str.map(cloneAstNode)
+
+          // Rewrite at-rules with zero nodes to act as if they have no body
+          //
+          // At a future time we'll only do this conditionally for earlier
+          // Tailwind CSS v4 versions. We have to clone the AST *first*
+          // because if the AST was shared with Tailwind CSS internals
+          // and we mutated it we could break things.
+          walk(ast, (node) => {
+            if (node.kind !== 'at-rule') return WalkAction.Continue
+            if (node.nodes === null) return WalkAction.Continue
+            if (node.nodes.length !== 0) return WalkAction.Continue
+
+            // Treat
+            node.nodes = null
+
+            return WalkAction.Continue
+          })
+
+          cache[cls] = ast
+
           continue
         }
 

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

@@ -1,5 +1,5 @@
 import * as postcss from 'postcss'
-import { atRule, comment, decl, styleRule, type AstNode } from './ast'
+import type { AstNode } from './ast'
 import type { Source, SourceLocation } from './source'
 import { DefaultMap } from '../util/default-map'
 import { createLineTable, LineTable } from '../util/line-table'
@@ -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,
+        ...(node.nodes ? { nodes: [] } : {}),
+      })
       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)
       }
     }