buildCustomContainerUtilityRules() — tailwindcss Function Reference

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

Function typescript OxideCore PreProcessors calls 3 called by 2

Entity Profile

OxideCore→ PreProcessors→ buildCustomContainerUtilityRules() — tailwindcss Function Reference

Dependency Diagram

graph TD
  6e906b7f_b503_9163_425a_c68220491669["buildCustomContainerUtilityRules()"]
  77d1d37f_6021_dc8c_6d04_0c3b07e3ad19["migrateTheme()"]
  77d1d37f_6021_dc8c_6d04_0c3b07e3ad19 -->|calls| 6e906b7f_b503_9163_425a_c68220491669
  e730a60e_a8ab_64b1_3594_f7bec2a8ae1a["registerContainerCompat()"]
  e730a60e_a8ab_64b1_3594_f7bec2a8ae1a -->|calls| 6e906b7f_b503_9163_425a_c68220491669
  47ef7bd7_b959_59c4_dbd1_328f35d7cd89["decl()"]
  6e906b7f_b503_9163_425a_c68220491669 -->|calls| 47ef7bd7_b959_59c4_dbd1_328f35d7cd89
  98e47569_cf5b_5891_1dd8_78a334078563["compareBreakpoints()"]
  6e906b7f_b503_9163_425a_c68220491669 -->|calls| 98e47569_cf5b_5891_1dd8_78a334078563
  c35acfc6_964d_737e_6ecc_275e6f10293a["atRule()"]
  6e906b7f_b503_9163_425a_c68220491669 -->|calls| c35acfc6_964d_737e_6ecc_275e6f10293a
  style 6e906b7f_b503_9163_425a_c68220491669 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
}