wip: translate sourcemaps in PostCSS plugin

postcss

Author: thecrypticace

packages/@tailwindcss-postcss/src/ast.ts

@@ -1,17 +1,50 @@
 import postcss, {
+  Input,
   type ChildNode as PostCssChildNode,
   type Container as PostCssContainerNode,
   type Root as PostCssRoot,
   type Source as PostcssSource,
 } from 'postcss'
 import { atRule, comment, decl, rule, type AstNode } from '../../tailwindcss/src/ast'
+import { createLineTable, type LineTable } from '../../tailwindcss/src/source-maps/line-table'
+import type { Source, SourceLocation } from '../../tailwindcss/src/source-maps/source'
+import { DefaultMap } from '../../tailwindcss/src/utils/default-map'
 
 const EXCLAMATION_MARK = 0x21
 
 export function cssAstToPostCssAst(ast: AstNode[], source: PostcssSource | undefined): PostCssRoot {
+  let inputMap = new DefaultMap<Source, Input>((src) => {
+    return new Input(src.code, {
+      map: source?.input.map,
+      from: src.file ?? undefined,
+    })
+  })
+
+  let lineTables = new DefaultMap<Source, LineTable>((src) => createLineTable(src.code))
+
   let root = postcss.root()
   root.source = source
 
+  function toSource(loc: SourceLocation | undefined): PostcssSource | undefined {
+    // Use the fallback if this node has no location info in the AST
+    if (!loc) return source
+    if (!loc[0]) return source
+
+    let table = lineTables.get(loc[0])
+
+    return {
+      input: inputMap.get(loc[0]),
+      start: {
+        ...table.find(loc[1]),
+        offset: loc[1],
+      },
+      end: {
+        ...table.find(loc[2]),
+        offset: loc[2],
+      },
+    }
+  }
+
   function transform(node: AstNode, parent: PostCssContainerNode) {
     // Declaration
     if (node.kind === 'declaration') {
@@ -20,14 +53,14 @@ export function cssAstToPostCssAst(ast: AstNode[], source: PostcssSource | undef
         value: node.value ?? '',
         important: node.important,
       })
-      astNode.source = source
+      astNode.source = toSource(node.src)
       parent.append(astNode)
     }
 
     // Rule
     else if (node.kind === 'rule') {
       let astNode = postcss.rule({ selector: node.selector })
-      astNode.source = source
+      astNode.source = toSource(node.src)
       astNode.raws.semicolon = true
       parent.append(astNode)
       for (let child of node.nodes) {
@@ -38,7 +71,7 @@ export function cssAstToPostCssAst(ast: AstNode[], source: PostcssSource | undef
     // AtRule
     else if (node.kind === 'at-rule') {
       let astNode = postcss.atRule({ name: node.name.slice(1), params: node.params })
-      astNode.source = source
+      astNode.source = toSource(node.src)
       astNode.raws.semicolon = true
       parent.append(astNode)
       for (let child of node.nodes) {
@@ -53,7 +86,7 @@ export function cssAstToPostCssAst(ast: AstNode[], source: PostcssSource | undef
       // spaces.
       astNode.raws.left = ''
       astNode.raws.right = ''
-      astNode.source = source
+      astNode.source = toSource(node.src)
       parent.append(astNode)
     }
 
@@ -75,33 +108,56 @@ export function cssAstToPostCssAst(ast: AstNode[], source: PostcssSource | undef
 }
 
 export function postCssAstToCssAst(root: PostCssRoot): AstNode[] {
+  let inputMap = new DefaultMap<Input, Source>((input) => ({
+    file: input.file ?? input.id ?? null,
+    code: input.css,
+  }))
+
+  function toSource(node: PostCssChildNode): SourceLocation | undefined {
+    let source = node.source
+    if (!source) return
+
+    let input = source.input
+    if (!input) return
+    if (source.start === undefined) return
+    if (source.end === undefined) return
+
+    return [inputMap.get(input), source.start.offset, source.end.offset]
+  }
+
   function transform(
     node: PostCssChildNode,
     parent: Extract<AstNode, { nodes: AstNode[] }>['nodes'],
   ) {
     // Declaration
     if (node.type === 'decl') {
-      parent.push(decl(node.prop, node.value, node.important))
+      let astNode = decl(node.prop, node.value, node.important)
+      astNode.src = toSource(node)
+      parent.push(astNode)
     }
 
     // Rule
     else if (node.type === 'rule') {
       let astNode = rule(node.selector)
+      astNode.src = toSource(node)
       node.each((child) => transform(child, astNode.nodes))
       parent.push(astNode)
     }
 
     // AtRule
     else if (node.type === 'atrule') {
       let astNode = atRule(`@${node.name}`, node.params)
+      astNode.src = toSource(node)
       node.each((child) => transform(child, astNode.nodes))
       parent.push(astNode)
     }
 
     // Comment
     else if (node.type === 'comment') {
       if (node.text.charCodeAt(0) !== EXCLAMATION_MARK) return
-      parent.push(comment(node.text))
+      let astNode = comment(node.text)
+      astNode.src = toSource(node)
+      parent.push(astNode)
     }
 
     // Unknown

packages/@tailwindcss-postcss/src/index.ts

@@ -283,13 +283,13 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
               DEBUG && I.end('AST -> CSS')
 
               DEBUG && I.start('Lightning CSS')
-              let ast = optimizeCss(css, {
+              let optimized = optimizeCss(css, {
                 minify: typeof optimize === 'object' ? optimize.minify : true,
               })
               DEBUG && I.end('Lightning CSS')
 
               DEBUG && I.start('CSS -> PostCSS AST')
-              context.optimizedPostCssAst = postcss.parse(ast, result.opts)
+              context.optimizedPostCssAst = postcss.parse(optimized.code, result.opts)
               DEBUG && I.end('CSS -> PostCSS AST')
 
               DEBUG && I.end('Optimization')