createSourceMap() — tailwindcss Function Reference

Architecture documentation for the createSourceMap() function in source-map.ts from the tailwindcss codebase.

Function typescript CompilerEngine ModuleResolution calls 3 called by 1

Entity Profile

CompilerEngine→ ModuleResolution→ createSourceMap() — tailwindcss Function Reference

Dependency Diagram

graph TD
  47a467ce_1274_79db_8183_51a8ee266f23["createSourceMap()"]
  214d4226_762c_0b6a_7c0b_f917da98dda0["compile()"]
  214d4226_762c_0b6a_7c0b_f917da98dda0 -->|calls| 47a467ce_1274_79db_8183_51a8ee266f23
  2c7b6e31_c902_cd2d_f5ec_bf42f894f3a3["createLineTable()"]
  47a467ce_1274_79db_8183_51a8ee266f23 -->|calls| 2c7b6e31_c902_cd2d_f5ec_bf42f894f3a3
  e9d556bc_f22d_356c_1bd2_27442c34b5c7["walk()"]
  47a467ce_1274_79db_8183_51a8ee266f23 -->|calls| e9d556bc_f22d_356c_1bd2_27442c34b5c7
  4cd99e59_ac1e_2a1f_0946_33cc1afd2532["get()"]
  47a467ce_1274_79db_8183_51a8ee266f23 -->|calls| 4cd99e59_ac1e_2a1f_0946_33cc1afd2532
  style 47a467ce_1274_79db_8183_51a8ee266f23 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/source-maps/source-map.ts lines 76–163

export function createSourceMap({ ast }: { ast: AstNode[] }) {
  // Compute line tables for both the original and generated source lazily so we
  // don't have to do it during parsing or printing.
  let lineTables = new DefaultMap<Source, LineTable>((src) => createLineTable(src.code))
  let sourceTable = new DefaultMap<Source, DecodedSource>((src) => ({
    url: src.file,
    content: src.code,
    ignore: false,
  }))

  // Convert each mapping to a set of positions
  let map: DecodedSourceMap = {
    file: null,
    sources: [],
    mappings: [],
  }

  // Get all the indexes from the mappings
  walk(ast, (node) => {
    if (!node.src || !node.dst) return

    let originalSource = sourceTable.get(node.src[0])
    if (!originalSource.content) return

    let originalTable = lineTables.get(node.src[0])
    let generatedTable = lineTables.get(node.dst[0])

    let originalSlice = originalSource.content.slice(node.src[1], node.src[2])

    // Source maps only encode single locations — not multi-line ranges
    // So to properly emulate this we'll scan the original text for multiple
    // lines and create mappings for each of those lines that point to the
    // destination node (whether it spans multiple lines or not)
    //
    // This is not 100% accurate if both the source and destination preserve
    // their newlines but this only happens in the case of custom properties
    //
    // This is _good enough_
    let offset = 0
    for (let line of originalSlice.split('\n')) {
      if (line.trim() !== '') {
        let originalStart = originalTable.find(node.src[1] + offset)
        let generatedStart = generatedTable.find(node.dst[1])

        map.mappings.push({
          name: null,
          originalPosition: {
            source: originalSource,
            ...originalStart,
          },
          generatedPosition: generatedStart,
        })
      }

      offset += line.length
      offset += 1
    }

    let originalEnd = originalTable.find(node.src[2])
    let generatedEnd = generatedTable.find(node.dst[2])

    map.mappings.push({
      name: null,
      originalPosition: {
        source: originalSource,
        ...originalEnd,
      },
      generatedPosition: generatedEnd,
    })
  })

  // Populate
  for (let source of lineTables.keys()) {
    map.sources.push(sourceTable.get(source))
  }

  // Sort the mappings in ascending order
  map.mappings.sort((a, b) => {
    return (
      a.generatedPosition.line - b.generatedPosition.line ||
      a.generatedPosition.column - b.generatedPosition.column ||
      (a.originalPosition?.line ?? 0) - (b.originalPosition?.line ?? 0) ||
      (a.originalPosition?.column ?? 0) - (b.originalPosition?.column ?? 0)
    )
  })

  return map
}