Home / File/ renderer.ts — tailwindcss Source File

renderer.ts — tailwindcss Source File

Architecture documentation for renderer.ts, a typescript file in the tailwindcss codebase. 8 imports, 2 dependents.

File typescript BuildIntegrations PostCSSPlugin 8 imports 2 dependents 9 functions

Entity Profile

Dependency Diagram

graph LR
  8715b8e3_2ef0_3a5f_beb9_7129d3febc3e["renderer.ts"]
  544e3f68_80b5_e602_1217_0117a1906f1e["resolve.ts"]
  8715b8e3_2ef0_3a5f_beb9_7129d3febc3e --> 544e3f68_80b5_e602_1217_0117a1906f1e
  302e9ab5_7b75_a040_98a8_a22c9125f490["resolve"]
  8715b8e3_2ef0_3a5f_beb9_7129d3febc3e --> 302e9ab5_7b75_a040_98a8_a22c9125f490
  006812b4_db51_3f0a_2f42_88cad1754730["format-ns.ts"]
  8715b8e3_2ef0_3a5f_beb9_7129d3febc3e --> 006812b4_db51_3f0a_2f42_88cad1754730
  d87bed42_7e6b_486b_9a4e_d68e501d161a["formatNanoseconds"]
  8715b8e3_2ef0_3a5f_beb9_7129d3febc3e --> d87bed42_7e6b_486b_9a4e_d68e501d161a
  6390fa3b_300d_6028_9e96_c869157db42d["node:fs"]
  8715b8e3_2ef0_3a5f_beb9_7129d3febc3e --> 6390fa3b_300d_6028_9e96_c869157db42d
  2a7660a5_3e09_bd74_37f0_e4e54bc64ce5["node:path"]
  8715b8e3_2ef0_3a5f_beb9_7129d3febc3e --> 2a7660a5_3e09_bd74_37f0_e4e54bc64ce5
  041a5d56_b2a1_1fbe_eb9b_b605f45324db["node:util"]
  8715b8e3_2ef0_3a5f_beb9_7129d3febc3e --> 041a5d56_b2a1_1fbe_eb9b_b605f45324db
  df14e640_fe39_56d9_0c45_b1a15ec4e9c9["picocolors"]
  8715b8e3_2ef0_3a5f_beb9_7129d3febc3e --> df14e640_fe39_56d9_0c45_b1a15ec4e9c9
  48860a26_2cb5_7783_52eb_1425db7e2b6a["index.ts"]
  48860a26_2cb5_7783_52eb_1425db7e2b6a --> 8715b8e3_2ef0_3a5f_beb9_7129d3febc3e
  e8745fc5_1f30_da23_d59c_a963bd15db47["renderer.test.ts"]
  e8745fc5_1f30_da23_d59c_a963bd15db47 --> 8715b8e3_2ef0_3a5f_beb9_7129d3febc3e
  style 8715b8e3_2ef0_3a5f_beb9_7129d3febc3e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import fs from 'node:fs'
import path from 'node:path'
import { stripVTControlCharacters } from 'node:util'
import pc from 'picocolors'
import { resolve } from '../utils/resolve'
import { formatNanoseconds } from './format-ns'

export const UI = {
  indent: 2,
}
export function header() {
  return `${pc.italic(pc.bold(pc.blue('\u2248')))} tailwindcss ${pc.blue(`v${getVersion()}`)}`
}

export function highlight(file: string) {
  return `${pc.dim(pc.blue('`'))}${pc.blue(file)}${pc.dim(pc.blue('`'))}`
}

/**
 * Convert an `absolute` path to a `relative` path from the current working
 * directory.
 */
export function relative(
  to: string,
  from = process.cwd(),
  { preferAbsoluteIfShorter = true } = {},
) {
  let result = path.relative(from, to)
  if (!result.startsWith('..')) {
    result = `.${path.sep}${result}`
  }

  if (preferAbsoluteIfShorter && result.length > to.length) {
    return to
  }

  return result
}

/**
 * Wrap `text` into multiple lines based on the `width`.
 */
export function wordWrap(text: string, width: number) {
  let words = text.split(' ')
  let lines = []

  let line = ''
  let lineLength = 0
  for (let word of words) {
    let wordLength = stripVTControlCharacters(word).length

    if (lineLength + wordLength + 1 > width) {
      lines.push(line)
      line = ''
      lineLength = 0
    }

    line += (lineLength ? ' ' : '') + word
    lineLength += wordLength + (lineLength ? 1 : 0)
  }

  if (lineLength) {
    lines.push(line)
  }

  return lines
}

/**
 * Format a duration in nanoseconds to a more human readable format.
 */
export function formatDuration(ns: bigint) {
  let formatted = formatNanoseconds(ns)

  if (ns <= 50 * 1e6) return pc.green(formatted)
  if (ns <= 300 * 1e6) return pc.blue(formatted)
  if (ns <= 1000 * 1e6) return pc.yellow(formatted)

  return pc.red(formatted)
}

export function indent(value: string, offset = 0) {
  return `${' '.repeat(offset + UI.indent)}${value}`
}

// Rust inspired functions to print to the console:

export function eprintln(value = '') {
  process.stderr.write(`${value}\n`)
}

export function println(value = '') {
  process.stdout.write(`${value}\n`)
}

function getVersion(): string {
  if (typeof globalThis.__tw_version === 'string') {
    return globalThis.__tw_version
  }
  let { version } = JSON.parse(fs.readFileSync(resolve('tailwindcss/package.json'), 'utf-8'))
  return version
}

Subdomains

Dependencies

Frequently Asked Questions

What does renderer.ts do?
renderer.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the BuildIntegrations domain, PostCSSPlugin subdomain.
What functions are defined in renderer.ts?
renderer.ts defines 9 function(s): eprintln, formatDuration, getVersion, header, highlight, indent, println, relative, wordWrap.
What does renderer.ts depend on?
renderer.ts imports 8 module(s): format-ns.ts, formatNanoseconds, node:fs, node:path, node:util, picocolors, resolve, resolve.ts.
What files import renderer.ts?
renderer.ts is imported by 2 file(s): index.ts, renderer.test.ts.
Where is renderer.ts in the architecture?
renderer.ts is located at packages/@tailwindcss-cli/src/utils/renderer.ts (domain: BuildIntegrations, subdomain: PostCSSPlugin, directory: packages/@tailwindcss-cli/src/utils).

Analyze Your Own Codebase

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

Try Supermodel Free