canonicalizeDimension() — tailwindcss Function Reference

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

Function typescript Oxide Scanner calls 1 called by 1

Entity Profile

Oxide→ Scanner→ canonicalizeDimension() — tailwindcss Function Reference

Dependency Diagram

graph TD
  7e4f2893_9c53_d837_29a4_e4e87eb8f6e4["canonicalizeDimension()"]
  28f23724_d31a_a8d3_3dd6_07e505ec5b7b["constant-fold-declaration.ts"]
  7e4f2893_9c53_d837_29a4_e4e87eb8f6e4 -->|defined in| 28f23724_d31a_a8d3_3dd6_07e505ec5b7b
  f875e425_9644_1071_3601_45e7c7f789d3["constantFoldDeclaration()"]
  f875e425_9644_1071_3601_45e7c7f789d3 -->|calls| 7e4f2893_9c53_d837_29a4_e4e87eb8f6e4
  1892fde4_0ab4_2e7a_38c4_cf431005a033["isLength()"]
  7e4f2893_9c53_d837_29a4_e4e87eb8f6e4 -->|calls| 1892fde4_0ab4_2e7a_38c4_cf431005a033
  style 7e4f2893_9c53_d837_29a4_e4e87eb8f6e4 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
  }
}