canonicalizeDimension() — tailwindcss Function Reference

Architecture documentation for the canonicalizeDimension() function in constant-fold-declaration.ts from the tailwindcss codebase.

Function typescript CompilerEngine ModuleResolution calls 1 called by 1

Entity Profile

CompilerEngine→ ModuleResolution→ canonicalizeDimension() — tailwindcss Function Reference

Dependency Diagram

graph TD
  c941f6f8_779c_d328_ce6e_6b8d73133036["canonicalizeDimension()"]
  9df707f7_aef8_37b0_5f90_edacde047f5b["constantFoldDeclaration()"]
  9df707f7_aef8_37b0_5f90_edacde047f5b -->|calls| c941f6f8_779c_d328_ce6e_6b8d73133036
  f09c1b77_2ead_f9c9_7d05_4f8bab47f7ca["isLength()"]
  c941f6f8_779c_d328_ce6e_6b8d73133036 -->|calls| f09c1b77_2ead_f9c9_7d05_4f8bab47f7ca
  style c941f6f8_779c_d328_ce6e_6b8d73133036 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/constant-fold-declaration.ts lines 117–151

function canonicalizeDimension(input: string, rem: number | null = null): string | null {
  let dimension = dimensions.get(input)
  if (dimension === null) return null // This shouldn't happen

  let [value, unit] = dimension
  if (unit === null) return `${value}` // Already unitless, nothing to do

  // Replace `0<length>` units with just `0`
  if (value === 0 && isLength(input)) return '0'

  // prettier-ignore
  switch (unit.toLowerCase()) {
    // <length> to px, https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units#lengths
    case 'in':  return `${value * 96}px`                  // 1in  = 96.000px
    case 'cm':  return `${value * 96 / 2.54}px`           // 1cm  = 37.795px
    case 'mm':  return `${value * 96 / 2.54 / 10}px`      // 1mm  =  3.779px
    case 'q':   return `${value * 96 / 2.54 / 10 / 4}px`  //  1q  =  0.945px
    case 'pc':  return `${value * 96 / 6}px`              // 1pc  = 16.000px
    case 'pt':  return `${value * 96 / 72}px`             // 1pt  =  1.333px
    case 'rem': return rem !== null ? `${value * rem}px` : null    // 1rem = 16.000px (Assuming root font-size is 16px)

    // <angle> to deg, https://developer.mozilla.org/en-US/docs/Web/CSS/angle
    case 'grad': return `${value * 0.9}deg`               // 1grad =   0.900deg
    case 'rad':  return `${value * 180 / Math.PI}deg`     //  1rad =  57.296deg
    case 'turn': return `${value * 360}deg`               // 1turn = 360.000deg

    // <time> to s, https://developer.mozilla.org/en-US/docs/Web/CSS/time
    case 'ms':   return `${value / 1000}s`                // 1ms = 0.001s

    // <frequency> to hz, https://developer.mozilla.org/en-US/docs/Web/CSS/frequency
    case 'khz':  return `${value * 1000}hz`               // 1kHz = 1000Hz

    default: return `${value}${unit}` // No canonicalization possible, return as-is
  }
}