registerScreensConfig() — tailwindcss Function Reference

Architecture documentation for the registerScreensConfig() function in screens-config.ts from the tailwindcss codebase.

Function typescript Oxide PreProcessors calls 2 called by 1

Entity Profile

Oxide→ PreProcessors→ registerScreensConfig() — tailwindcss Function Reference

Dependency Diagram

graph TD
  8e37e8fb_aaf5_bdbd_0697_86c8bbe3e162["registerScreensConfig()"]
  4911d260_2582_cf22_b77d_7882022f79a4["screens-config.ts"]
  8e37e8fb_aaf5_bdbd_0697_86c8bbe3e162 -->|defined in| 4911d260_2582_cf22_b77d_7882022f79a4
  2351a59d_92ba_1342_1dcb_39b34492170e["upgradeToFullPluginSupport()"]
  2351a59d_92ba_1342_1dcb_39b34492170e -->|calls| 8e37e8fb_aaf5_bdbd_0697_86c8bbe3e162
  640cb206_2935_70ce_1d58_e048d8f26773["buildMediaQuery()"]
  8e37e8fb_aaf5_bdbd_0697_86c8bbe3e162 -->|calls| 640cb206_2935_70ce_1d58_e048d8f26773
  2f6881be_62d9_4b96_7331_a962ced095f7["atRule()"]
  8e37e8fb_aaf5_bdbd_0697_86c8bbe3e162 -->|calls| 2f6881be_62d9_4b96_7331_a962ced095f7
  style 8e37e8fb_aaf5_bdbd_0697_86c8bbe3e162 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/compat/screens-config.ts lines 5–78

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

  // We want to insert the breakpoints in the right order as best we can. In the
  // core utility, all static breakpoint variants and the `min-*` functional
  // variant are registered inside a group. Since all the variants within a
  // group share the same order, we can use the always-defined `min-*` variant
  // as the order.
  let coreOrder = designSystem.variants.get('min')?.order ?? 0

  let additionalVariants: ((order: number) => void)[] = []

  // Register static breakpoint variants for everything that comes from the user
  // theme config.
  for (let [name, value] of Object.entries(screens)) {
    let coreVariant = designSystem.variants.get(name)

    // Ignore it if there's a CSS value that takes precedence over the JS config
    // and the static utilities are already registered.
    //
    // This happens when a `@theme { }` block is used that overwrites all JS
    // config options. We rely on the resolution order of the Theme for
    // resolving this. If Theme has a different value, we know that this is not
    // coming from the JS plugin and thus we don't need to handle it explicitly.
    let cssValue = designSystem.theme.resolveValue(name, ['--breakpoint'])
    if (coreVariant && cssValue && !designSystem.theme.hasDefault(`--breakpoint-${name}`)) {
      continue
    }

    let deferInsert = true

    if (typeof value === 'string') {
      deferInsert = false
    }

    let query = buildMediaQuery(value)

    function insert(order: number) {
      // `min-*` and `max-*` rules do not need to be reconfigured, as they are
      // reading the latest values from the theme.
      designSystem.variants.static(
        name,
        (ruleNode) => {
          ruleNode.nodes = [atRule('@media', query, ruleNode.nodes)]
        },
        { order },
      )
    }

    if (deferInsert) {
      additionalVariants.push(insert)
    } else {
      insert(coreOrder)
    }
  }

  // Reserve and insert slots for the additional variants
  if (additionalVariants.length === 0) return

  for (let [, variant] of designSystem.variants.variants) {
    if (variant.order > coreOrder) variant.order += additionalVariants.length
  }

  designSystem.variants.compareFns = new Map(
    Array.from(designSystem.variants.compareFns).map(([key, value]) => {
      if (key > coreOrder) key += additionalVariants.length
      return [key, value]
    }),
  )

  for (let [index, callback] of additionalVariants.entries()) {
    callback(coreOrder + index + 1)
  }
}