createSourceMap() — tailwindcss Function Reference

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

Function typescript Oxide Extractor calls 3 called by 1

Entity Profile

Oxide→ Extractor→ createSourceMap() — tailwindcss Function Reference

Dependency Diagram

graph TD
  e55a3745_8aee_a25b_5e76_52ab134693bc["createSourceMap()"]
  2638fb39_6a36_5dfe_4705_961a0b5ff737["source-map.ts"]
  e55a3745_8aee_a25b_5e76_52ab134693bc -->|defined in| 2638fb39_6a36_5dfe_4705_961a0b5ff737
  c59be670_b950_e897_c2ef_f6a86119dcc3["compile()"]
  c59be670_b950_e897_c2ef_f6a86119dcc3 -->|calls| e55a3745_8aee_a25b_5e76_52ab134693bc
  1c8e1044_08e4_f6ad_7550_c4fa3667fbf3["createLineTable()"]
  e55a3745_8aee_a25b_5e76_52ab134693bc -->|calls| 1c8e1044_08e4_f6ad_7550_c4fa3667fbf3
  4982d9ce_98d4_85d9_44af_7cc47b93c482["walk()"]
  e55a3745_8aee_a25b_5e76_52ab134693bc -->|calls| 4982d9ce_98d4_85d9_44af_7cc47b93c482
  2820372c_b982_9e06_fc23_f8f4ac308d00["get()"]
  e55a3745_8aee_a25b_5e76_52ab134693bc -->|calls| 2820372c_b982_9e06_fc23_f8f4ac308d00
  style e55a3745_8aee_a25b_5e76_52ab134693bc 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 ||