wip

packages/tailwindcss/src/ast.ts

@@ -12,55 +12,55 @@ export type Rule = {
   kind: 'rule'
   selector: string
   nodes: AstNode[]
-  source: Range | null
-  destination: Range | null
+  source: Range[]
+  destination: Range[]
 }
 
 export type Declaration = {
   kind: 'declaration'
   property: string
   value: string
   important: boolean
-  source: Range | null
-  destination: Range | null
+  source: Range[]
+  destination: Range[]
 }
 
 export type Comment = {
   kind: 'comment'
   value: string
-  source: Range | null
-  destination: Range | null
+  source: Range[]
+  destination: Range[]
 }
 
 export type AstNode = Rule | Declaration | Comment
 
-export function rule(selector: string, nodes: AstNode[], source?: Range | null): Rule {
+export function rule(selector: string, nodes: AstNode[], source: Range[] = []): Rule {
   return {
     kind: 'rule',
     selector,
     nodes,
-    source: source ?? null,
-    destination: null,
+    source,
+    destination: [],
   }
 }
 
-export function decl(property: string, value: string, source?: Range | null): Declaration {
+export function decl(property: string, value: string, source: Range[] = []): Declaration {
   return {
     kind: 'declaration',
     property,
     value,
     important: false,
-    source: source ?? null,
-    destination: null,
+    source,
+    destination: [],
   }
 }
 
-export function comment(value: string, source?: Range | null): Comment {
+export function comment(value: string, source: Range[] = []): Comment {
   return {
     kind: 'comment',
     value: value,
-    source: source ?? null,
-    destination: null,
+    source,
+    destination: [],
   }
 }
 
@@ -151,11 +151,13 @@ export function toCss(ast: AstNode[], { trackDestination }: { trackDestination?:
       // ```
       if (node.selector[0] === '@' && node.nodes.length === 0) {
         node.destination = location
-          ? {
-              start: { line: location.line, column: indent.length },
-              end: { line: location.line, column: indent.length },
-            }
-          : null
+          ? [
+              {
+                start: { line: location.line, column: indent.length },
+                end: { line: location.line, column: indent.length },
+              },
+            ]
+          : []
         if (location) location.line += 1
         return `${indent}${node.selector};\n`
       }
@@ -171,10 +173,12 @@ export function toCss(ast: AstNode[], { trackDestination }: { trackDestination?:
 
       let css = `${indent}${node.selector} {\n`
       if (location) {
-        node.destination = {
-          start: { line: location.line, column: indent.length },
-          end: { line: location.line, column: indent.length },
-        }
+        node.destination = [
+          {
+            start: { line: location.line, column: indent.length },
+            end: { line: location.line, column: indent.length },
+          },
+        ]
         location.line += 1
       }
       css += stringifyAll(node.nodes, { depth: depth + 1, location })
@@ -186,10 +190,12 @@ export function toCss(ast: AstNode[], { trackDestination }: { trackDestination?:
     // Comment
     else if (node.kind === 'comment') {
       if (location) {
-        node.destination = {
-          start: { line: location.line, column: indent.length },
-          end: { line: location.line, column: indent.length },
-        }
+        node.destination = [
+          {
+            start: { line: location.line, column: indent.length },
+            end: { line: location.line, column: indent.length },
+          },
+        ]
         location.line += 1 + node.value.split('\n').length - 1
       }
       return `${indent}/*${node.value}*/\n`
@@ -198,10 +204,12 @@ export function toCss(ast: AstNode[], { trackDestination }: { trackDestination?:
     // Declaration
     else if (node.property !== '--tw-sort' && node.value !== undefined && node.value !== null) {
       if (location) {
-        node.destination = {
-          start: { line: location.line, column: indent.length },
-          end: { line: location.line, column: indent.length },
-        }
+        node.destination = [
+          {
+            start: { line: location.line, column: indent.length },
+            end: { line: location.line, column: indent.length },
+          },
+        ]
         location.line += 1 + node.value.split('\n').length - 1
       }
       return `${indent}${node.property}: ${node.value}${node.important ? '!important' : ''};\n`

packages/tailwindcss/src/compile.ts

@@ -140,8 +140,8 @@ export function compileAstNodes(rawCandidate: string, designSystem: DesignSystem
     kind: 'rule',
     selector: `.${escape(rawCandidate)}`,
     nodes,
-    source: null,
-    destination: null,
+    source: [],
+    destination: [],
   }
 
   for (let variant of candidate.variants) {

packages/tailwindcss/src/css-parser.ts

@@ -50,18 +50,20 @@ export function parse(input: string, track?: TrackLocations) {
   let sourceEndColumn = 0
 
   function sourceRange() {
-    if (!track) return null
-
-    return {
-      start: {
-        line: sourceStartLine,
-        column: sourceStartColumn,
-      },
-      end: {
-        line: sourceEndLine,
-        column: sourceEndColumn,
+    if (!track) return []
+
+    return [
+      {
+        start: {
+          line: sourceStartLine,
+          column: sourceStartColumn,
+        },
+        end: {
+          line: sourceEndLine,
+          column: sourceEndColumn,
+        },
       },
-    }
+    ]
   }
 
   for (let i = 0; i < input.length; i++) {
@@ -539,7 +541,7 @@ export function parse(input: string, track?: TrackLocations) {
                 .trim(),
               important: importantIdx !== -1,
               source: sourceRange()!,
-              destination: null,
+              destination: [],
             } satisfies Declaration
             parent.nodes.push(node)
           }
@@ -556,7 +558,7 @@ export function parse(input: string, track?: TrackLocations) {
         ast.push(parent)
 
         // TODO: We want to track the closing `}` as part of the parent node.
-        // parent.source = sourceRange()!
+        // parent.source.push(...sourceRange()!)
       }
 
       // Go up one level in the stack.
@@ -609,7 +611,7 @@ function parseDeclaration(buffer: string, colonIdx: number = buffer.indexOf(':')
     property: buffer.slice(0, colonIdx).trim(),
     value: buffer.slice(colonIdx + 1, importantIdx === -1 ? buffer.length : importantIdx).trim(),
     important: importantIdx !== -1,
-    source: null,
-    destination: null,
+    source: [],
+    destination: [],
   }
 }

packages/tailwindcss/src/index.ts

@@ -223,7 +223,8 @@ export function compile(
         }).astNodes
 
         walk(newNodes, (node) => {
-          node.source ??= tailwindUtilitiesNode!.source
+          if (node.source.length) return
+          node.source = tailwindUtilitiesNode!.source
         })
 
         // If no new ast nodes were generated, then we can return the original

packages/tailwindcss/src/source-map.ts

@@ -22,19 +22,27 @@ export function toSourceMap(source: string, ast: AstNode[]): RawSourceMap {
   walk(ast, (node) => {
     let { source, destination } = node
 
-    if (!source || !destination) return
+    if (!source.length || !destination.length) return
+    if (source.length !== destination.length) {
+      throw new Error('Source and destination ranges must be the same length')
+    }
 
-    map.addMapping({
-      source: 'input.css',
-      original: { line: source.start.line, column: source.start.column },
-      generated: { line: destination.start.line, column: destination.start.column },
-    })
+    for (let i = 0; i < source.length; ++i) {
+      let src = source[i]
+      let dst = destination[i]
 
-    map.addMapping({
-      source: 'input.css',
-      original: { line: source.end.line, column: source.end.column },
-      generated: { line: destination.end.line, column: destination.end.column },
-    })
+      map.addMapping({
+        source: 'input.css',
+        original: { line: src.start.line, column: src.start.column },
+        generated: { line: dst.start.line, column: dst.start.column },
+      })
+
+      map.addMapping({
+        source: 'input.css',
+        original: { line: src.end.line, column: src.end.column },
+        generated: { line: dst.end.line, column: dst.end.column },
+      })
+    }
   })
 
   return JSON.parse(map.toString()) as RawSourceMap

packages/tailwindcss/src/source-maps.test.ts

@@ -57,13 +57,15 @@ test('utilities have source maps pointing to the utilities node', async () => {
 })
 
 test('@apply generates source maps', async () => {
-  let { sources, annotations } = run(`.foo {
+  let { sources, annotations, css } = run(`.foo {
   color: blue;
   @apply text-[#000] hover:text-[#f00];
   @apply underline;
   color: red;
 }`)
 
+  console.log({ css })
+
   // All CSS generated by Tailwind CSS should be annotated with source maps
   // And always be able to point to the original source file
   expect(sources).toEqual(['source.css'])