buildCustomContainerUtilityRules() — tailwindcss Function Reference

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

Function typescript CompilerEngine ModuleResolution calls 3 called by 2

Entity Profile

CompilerEngine→ ModuleResolution→ buildCustomContainerUtilityRules() — tailwindcss Function Reference

Dependency Diagram

graph TD
  f9776eb1_2e39_1c04_0c09_5a1f1eec4204["buildCustomContainerUtilityRules()"]
  0e91912d_5423_6991_60b0_8afbca30e459["migrateTheme()"]
  0e91912d_5423_6991_60b0_8afbca30e459 -->|calls| f9776eb1_2e39_1c04_0c09_5a1f1eec4204
  b5baf1fc_1222_c1c9_8f71_6bf5775586b4["registerContainerCompat()"]
  b5baf1fc_1222_c1c9_8f71_6bf5775586b4 -->|calls| f9776eb1_2e39_1c04_0c09_5a1f1eec4204
  85b46de2_edfa_9371_e2c6_e60f3f5346a2["decl()"]
  f9776eb1_2e39_1c04_0c09_5a1f1eec4204 -->|calls| 85b46de2_edfa_9371_e2c6_e60f3f5346a2
  f3e1eba5_3ac5_6422_9f8f_ceda1ec5ffc7["compareBreakpoints()"]
  f9776eb1_2e39_1c04_0c09_5a1f1eec4204 -->|calls| f3e1eba5_3ac5_6422_9f8f_ceda1ec5ffc7
  a9af385a_fd12_f1d8_7cf0_ccb9b281ca18["atRule()"]
  f9776eb1_2e39_1c04_0c09_5a1f1eec4204 -->|calls| a9af385a_fd12_f1d8_7cf0_ccb9b281ca18
  style f9776eb1_2e39_1c04_0c09_5a1f1eec4204 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/compat/container.ts lines 22–120

export function buildCustomContainerUtilityRules(
  {
    center,
    padding,
    screens,
  }: {
    center?: boolean
    padding?: string | {}
    screens?: {}
  },
  designSystem: DesignSystem,
): AstNode[] {
  let rules = []
  let breakpointOverwrites: null | Map<string, AtRule> = null

  if (center) {
    rules.push(decl('margin-inline', 'auto'))
  }

  if (
    typeof padding === 'string' ||
    (typeof padding === 'object' && padding !== null && 'DEFAULT' in padding)
  ) {
    rules.push(
      decl('padding-inline', typeof padding === 'string' ? padding : (padding.DEFAULT as string)),
    )
  }

  if (typeof screens === 'object' && screens !== null) {
    breakpointOverwrites = new Map()

    // When setting the `screens` in v3, you were overwriting the default
    // screens config. To do this in v4, you have to manually unset all core
    // screens.

    let breakpoints = Array.from(designSystem.theme.namespace('--breakpoint').entries())
    breakpoints.sort((a, z) => compareBreakpoints(a[1], z[1], 'asc'))
    if (breakpoints.length > 0) {
      let [key] = breakpoints[0]
      // Unset all default breakpoints
      rules.push(
        atRule('@media', `(width >= --theme(--breakpoint-${key}))`, [decl('max-width', 'none')]),
      )
    }

    for (let [key, value] of Object.entries(screens)) {
      if (typeof value === 'object') {
        if ('min' in value) {
          value = value.min
        } else {
          continue
        }
      }

      // We're inlining the breakpoint values because the screens configured in
      // the `container` option do not have to match the ones defined in the
      // root `screen` setting.
      breakpointOverwrites.set(
        key,
        atRule('@media', `(width >= ${value})`, [decl('max-width', value)]),
      )
    }
  }

  if (typeof padding === 'object' && padding !== null) {
    let breakpoints = Object.entries(padding)
      .filter(([key]) => key !== 'DEFAULT')
      .map(([key, value]) => {
        return [key, designSystem.theme.resolveValue(key, ['--breakpoint']), value]
      })
      .filter(Boolean) as [string, string, string][]
    breakpoints.sort((a, z) => compareBreakpoints(a[1], z[1], 'asc'))

    for (let [key, , value] of breakpoints) {
      if (breakpointOverwrites && breakpointOverwrites.has(key)) {
        let overwrite = breakpointOverwrites.get(key)!
        overwrite.nodes.push(decl('padding-inline', value))
      } else if (breakpointOverwrites) {
        // The breakpoint does not exist in the overwritten breakpoints list, so
        // we skip rendering it.
        continue
      } else {
        rules.push(
          atRule('@media', `(width >= theme(--breakpoint-${key}))`, [
            decl('padding-inline', value),
          ]),
        )
      }
    }
  }

  if (breakpointOverwrites) {
    for (let [, rule] of breakpointOverwrites) {
      rules.push(rule)
    }
  }

  return rules
}