optimize() — tailwindcss Function Reference

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

Function typescript NodeServer Resolver calls 2 called by 4

Entity Profile

NodeServer→ Resolver→ optimize() — tailwindcss Function Reference

Dependency Diagram

graph TD
  b082614d_1264_c8b0_a1b1_d0c85419e965["optimize()"]
  cc39a724_b44f_cf69_4007_aecaae32d127["optimize.ts"]
  b082614d_1264_c8b0_a1b1_d0c85419e965 -->|defined in| cc39a724_b44f_cf69_4007_aecaae32d127
  b8347223_2c86_b56c_bee4_53f1b5cc1312["compileCss()"]
  b8347223_2c86_b56c_bee4_53f1b5cc1312 -->|calls| b082614d_1264_c8b0_a1b1_d0c85419e965
  92340182_e1dc_9cec_da39_d46674e865cd["run()"]
  92340182_e1dc_9cec_da39_d46674e865cd -->|calls| b082614d_1264_c8b0_a1b1_d0c85419e965
  28c8c12b_7bfb_c956_c83b_681f0ac38ee2["optimizeCss()"]
  28c8c12b_7bfb_c956_c83b_681f0ac38ee2 -->|calls| b082614d_1264_c8b0_a1b1_d0c85419e965
  4c9ec9aa_6fa1_c418_ce6a_63ab7fcf8a66["render()"]
  4c9ec9aa_6fa1_c418_ce6a_63ab7fcf8a66 -->|calls| b082614d_1264_c8b0_a1b1_d0c85419e965
  2dc7ac75_a2dd_2ed8_2de3_18a262e70d3c["dim()"]
  b082614d_1264_c8b0_a1b1_d0c85419e965 -->|calls| 2dc7ac75_a2dd_2ed8_2de3_18a262e70d3c
  64672a5c_25d2_e0f1_554c_a95ac37ce594["yellow()"]
  b082614d_1264_c8b0_a1b1_d0c85419e965 -->|calls| 64672a5c_25d2_e0f1_554c_a95ac37ce594
  style b082614d_1264_c8b0_a1b1_d0c85419e965 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)