registerScreensConfig() — tailwindcss Function Reference

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

Function typescript OxideEngine Scanner calls 2 called by 1

Entity Profile

OxideEngine→ Scanner→ registerScreensConfig() — tailwindcss Function Reference

Dependency Diagram

graph TD
  0b047051_1aac_6f5b_66f3_9f154a4cba84["registerScreensConfig()"]
  09dea224_4143_d043_b336_121f3fdb8f12["screens-config.ts"]
  0b047051_1aac_6f5b_66f3_9f154a4cba84 -->|defined in| 09dea224_4143_d043_b336_121f3fdb8f12
  1a022c10_a26e_d793_740c_267a533619c4["upgradeToFullPluginSupport()"]
  1a022c10_a26e_d793_740c_267a533619c4 -->|calls| 0b047051_1aac_6f5b_66f3_9f154a4cba84
  f0ae2c26_da7d_2117_70b3_216a8890f916["buildMediaQuery()"]
  0b047051_1aac_6f5b_66f3_9f154a4cba84 -->|calls| f0ae2c26_da7d_2117_70b3_216a8890f916
  f9b19679_c1f0_28d6_4d1a_31a10c52e42d["atRule()"]
  0b047051_1aac_6f5b_66f3_9f154a4cba84 -->|calls| f9b19679_c1f0_28d6_4d1a_31a10c52e42d
  style 0b047051_1aac_6f5b_66f3_9f154a4cba84 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)
  }
}