optimize() — tailwindcss Function Reference

Architecture documentation for the optimize() function in optimize.ts from the tailwindcss codebase.

Function typescript NodeBridge Compiler calls 2 called by 4

Entity Profile

NodeBridge→ Compiler→ optimize() — tailwindcss Function Reference

Dependency Diagram

graph TD
  572b83a3_4e86_cb3e_cfb7_47fcd883c766["optimize()"]
  e09ef3f3_5e41_ad68_014b_afd42dbefec1["optimize.ts"]
  572b83a3_4e86_cb3e_cfb7_47fcd883c766 -->|defined in| e09ef3f3_5e41_ad68_014b_afd42dbefec1
  4c014585_4ec9_378c_bc1a_9d4ad5c2708c["compileCss()"]
  4c014585_4ec9_378c_bc1a_9d4ad5c2708c -->|calls| 572b83a3_4e86_cb3e_cfb7_47fcd883c766
  613aea88_7231_059c_f480_39c6f1487e16["run()"]
  613aea88_7231_059c_f480_39c6f1487e16 -->|calls| 572b83a3_4e86_cb3e_cfb7_47fcd883c766
  85b013b1_163d_9594_1737_4dd7f391d8ce["optimizeCss()"]
  85b013b1_163d_9594_1737_4dd7f391d8ce -->|calls| 572b83a3_4e86_cb3e_cfb7_47fcd883c766
  9145d6d8_3bea_1987_00eb_b9dbd7e9cb8d["render()"]
  9145d6d8_3bea_1987_00eb_b9dbd7e9cb8d -->|calls| 572b83a3_4e86_cb3e_cfb7_47fcd883c766
  51bee787_aa01_f1b4_3235_070e58b126b8["dim()"]
  572b83a3_4e86_cb3e_cfb7_47fcd883c766 -->|calls| 51bee787_aa01_f1b4_3235_070e58b126b8
  a631ef6f_ba55_995d_9dea_f774202107ad["yellow()"]
  572b83a3_4e86_cb3e_cfb7_47fcd883c766 -->|calls| a631ef6f_ba55_995d_9dea_f774202107ad
  style 572b83a3_4e86_cb3e_cfb7_47fcd883c766 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-node/src/optimize.ts lines 29–143

export function optimize(
  input: string,
  { file = 'input.css', minify = false, map }: OptimizeOptions = {},
): TransformResult {
  function optimize(code: Buffer | Uint8Array, map: string | undefined) {
    return transform({
      filename: file,
      code,
      minify,
      sourceMap: typeof map !== 'undefined',
      inputSourceMap: map,
      drafts: {
        customMedia: true,
      },
      nonStandard: {
        deepSelectorCombinator: true,
      },
      include: Features.Nesting | Features.MediaQueries,
      exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark,
      targets: {
        safari: (16 << 16) | (4 << 8),
        ios_saf: (16 << 16) | (4 << 8),
        firefox: 128 << 16,
        chrome: 111 << 16,
      },
      errorRecovery: true,
    })
  }

  // Running Lightning CSS twice to ensure that adjacent rules are merged after
  // nesting is applied. This creates a more optimized output.
  let result = optimize(Buffer.from(input), map)
  map = result.map?.toString()

  result.warnings = result.warnings.filter((warning) => {
    // Ignore warnings about unknown pseudo-classes as they are likely caused
    // by the use of `:deep()`, `:slotted()`, and `:global()` which are not
    // standard CSS but are commonly used in frameworks like Vue.
    if (/'(deep|slotted|global)' is not recognized as a valid pseudo-/.test(warning.message)) {
      return false
    }

    return true
  })

  // Because of `errorRecovery: true`, there could be warnings, so let's let the
  // user know about them.
  if (process.env.NODE_ENV !== 'test' && result.warnings.length > 0) {
    let lines = input.split('\n')

    let output = [
      `Found ${result.warnings.length} ${result.warnings.length === 1 ? 'warning' : 'warnings'} while optimizing generated CSS:`,
    ]

    for (let [idx, warning] of result.warnings.entries()) {
      output.push('')
      if (result.warnings.length > 1) {
        output.push(`Issue #${idx + 1}:`)
      }

      let context = 2

      let start = Math.max(0, warning.loc.line - context - 1)
      let end = Math.min(lines.length, warning.loc.line + context)

      let snippet = lines.slice(start, end).map((line, idx) => {
        if (start + idx + 1 === warning.loc.line) {
          return `${dim(`\u2502`)} ${line}`
        } else {
          return dim(`\u2502 ${line}`)
        }
      })

      snippet.splice(
        warning.loc.line - start,
        0,
        `${dim('\u2506')}${' '.repeat(warning.loc.column - 1)} ${yellow(`${dim('^--')} ${warning.message}`)}`,
        `${dim('\u2506')}`,
      )

      output.push(...snippet)