container.ts — tailwindcss Source File

Source Code

import { atRule, cloneAstNode, decl, type AstNode, type AtRule } from '../ast'
import type { DesignSystem } from '../design-system'
import { compareBreakpoints } from '../utils/compare-breakpoints'
import type { ResolvedConfig } from './config/types'

export function registerContainerCompat(userConfig: ResolvedConfig, designSystem: DesignSystem) {
  let container = userConfig.theme.container || {}

  if (typeof container !== 'object' || container === null) {
    return
  }

  let rules = buildCustomContainerUtilityRules(container, designSystem)

  if (rules.length === 0) {
    return
  }

  designSystem.utilities.static('container', () => rules.map(cloneAstNode))
}

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]
// ... (61 more lines)