tailwindcss Architecture Docs
Home / File/ translation-map.test.ts — tailwindcss Source File

translation-map.test.ts — tailwindcss Source File

Architecture documentation for translation-map.test.ts, a typescript file in the tailwindcss codebase. 7 imports, 0 dependents.

File typescript Oxide Extractor 7 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  d163c53b_f756_bcd7_0cfb_254471aee1d2["translation-map.test.ts"]
  b9cbffa4_c352_cf3c_268f_cbb174fb3a47["ast.ts"]
  d163c53b_f756_bcd7_0cfb_254471aee1d2 --> b9cbffa4_c352_cf3c_268f_cbb174fb3a47
  9b49f3c6_0c8d_5c62_965c_30a1db6499f8["toCss"]
  d163c53b_f756_bcd7_0cfb_254471aee1d2 --> 9b49f3c6_0c8d_5c62_965c_30a1db6499f8
  8be42ab2_7e92_957a_da93_ffe4c7d161fe["css-parser.ts"]
  d163c53b_f756_bcd7_0cfb_254471aee1d2 --> 8be42ab2_7e92_957a_da93_ffe4c7d161fe
  2638fb39_6a36_5dfe_4705_961a0b5ff737["source-map.ts"]
  d163c53b_f756_bcd7_0cfb_254471aee1d2 --> 2638fb39_6a36_5dfe_4705_961a0b5ff737
  0799cdd2_4b0e_a38a_f2e3_313f628e1d75["createTranslationMap"]
  d163c53b_f756_bcd7_0cfb_254471aee1d2 --> 0799cdd2_4b0e_a38a_f2e3_313f628e1d75
  8ff4bb92_b963_efb6_cca2_1da4b3ea849b["dedent"]
  d163c53b_f756_bcd7_0cfb_254471aee1d2 --> 8ff4bb92_b963_efb6_cca2_1da4b3ea849b
  f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3["vitest"]
  d163c53b_f756_bcd7_0cfb_254471aee1d2 --> f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3
  style d163c53b_f756_bcd7_0cfb_254471aee1d2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import dedent from 'dedent'
import { assert, expect, test } from 'vitest'
import { toCss, type AstNode } from '../ast'
import * as CSS from '../css-parser'
import { createTranslationMap } from './source-map'

async function analyze(input: string) {
  let ast = CSS.parse(input, { from: 'input.css' })
  let css = toCss(ast, true)
  let translate = createTranslationMap({
    original: input,
    generated: css,
  })

  function format(node: AstNode) {
    let lines: string[] = []

    for (let [oStart, oEnd, gStart, gEnd] of translate(node)) {
      let src = `${oStart.line}:${oStart.column}-${oEnd.line}:${oEnd.column}`

      let dst = '(none)'

      if (gStart && gEnd) {
        dst = `${gStart.line}:${gStart.column}-${gEnd.line}:${gEnd.column}`
      }

      lines.push(`${dst} <- ${src}`)
    }

    return lines
  }

  return { ast, css, format }
}

test('comment, single line', async () => {
  let { ast, css, format } = await analyze(`/*! foo */`)

  assert(ast[0].kind === 'comment')
  expect(format(ast[0])).toMatchInlineSnapshot(`
    [
      "1:0-1:10 <- 1:0-1:10",
    ]
  `)

  expect(css).toMatchInlineSnapshot(`
    "/*! foo */
    "
  `)
})

test('comment, multi line', async () => {
  let { ast, css, format } = await analyze(`/*! foo \n bar */`)

  assert(ast[0].kind === 'comment')
  expect(format(ast[0])).toMatchInlineSnapshot(`
    [
      "1:0-2:7 <- 1:0-2:7",
    ]
  `)
// ... (220 more lines)

Domain

Subdomains

Functions

Dependencies

Source

Frequently Asked Questions

What does translation-map.test.ts do?
translation-map.test.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the Oxide domain, Extractor subdomain.
What functions are defined in translation-map.test.ts?
translation-map.test.ts defines 1 function(s): analyze.
What does translation-map.test.ts depend on?
translation-map.test.ts imports 7 module(s): ast.ts, createTranslationMap, css-parser.ts, dedent, source-map.ts, toCss, vitest.
Where is translation-map.test.ts in the architecture?
translation-map.test.ts is located at packages/tailwindcss/src/source-maps/translation-map.test.ts (domain: Oxide, subdomain: Extractor, directory: packages/tailwindcss/src/source-maps).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free