createSourceMap() — tailwindcss Function Reference

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

Function typescript OxideCore Scanner calls 3 called by 1

Entity Profile

OxideCore→ Scanner→ createSourceMap() — tailwindcss Function Reference

Dependency Diagram

graph TD
  5ab956da_909b_1c7e_21c8_9cf5b074e2ba["createSourceMap()"]
  38bfe51e_e2b6_fcde_5ec2_9e78b758e748["compile()"]
  38bfe51e_e2b6_fcde_5ec2_9e78b758e748 -->|calls| 5ab956da_909b_1c7e_21c8_9cf5b074e2ba
  85813fc9_ab7d_8f75_33b7_a217e8daf5ee["createLineTable()"]
  5ab956da_909b_1c7e_21c8_9cf5b074e2ba -->|calls| 85813fc9_ab7d_8f75_33b7_a217e8daf5ee
  a32bba76_f60d_883f_1ff1_276a0bb9db9f["walk()"]
  5ab956da_909b_1c7e_21c8_9cf5b074e2ba -->|calls| a32bba76_f60d_883f_1ff1_276a0bb9db9f
  0aa64a1c_efd8_a69d_48ed_649b7a86c854["get()"]
  5ab956da_909b_1c7e_21c8_9cf5b074e2ba -->|calls| 0aa64a1c_efd8_a69d_48ed_649b7a86c854
  style 5ab956da_909b_1c7e_21c8_9cf5b074e2ba 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
}