canonicalizeDimension() — tailwindcss Function Reference

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

Function typescript OxideEngine PreProcessors calls 1 called by 1

Entity Profile

OxideEngine→ PreProcessors→ canonicalizeDimension() — tailwindcss Function Reference

Dependency Diagram

graph TD
  8da43da0_6459_abf1_120f_6b4af193f3cf["canonicalizeDimension()"]
  b567fa55_8905_40fc_b0c8_f7b1041653f6["constant-fold-declaration.ts"]
  8da43da0_6459_abf1_120f_6b4af193f3cf -->|defined in| b567fa55_8905_40fc_b0c8_f7b1041653f6
  9ab273b1_6701_5494_7f88_e2e72f74ddf7["constantFoldDeclaration()"]
  9ab273b1_6701_5494_7f88_e2e72f74ddf7 -->|calls| 8da43da0_6459_abf1_120f_6b4af193f3cf
  978cd83c_b489_4dd0_bddf_ab7b6f0970c6["isLength()"]
  8da43da0_6459_abf1_120f_6b4af193f3cf -->|calls| 978cd83c_b489_4dd0_bddf_ab7b6f0970c6
  style 8da43da0_6459_abf1_120f_6b4af193f3cf 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
  }
}