registerScreensConfig() — tailwindcss Function Reference

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

Function typescript CompilerEngine ModuleResolution calls 2 called by 1

Entity Profile

CompilerEngine→ ModuleResolution→ registerScreensConfig() — tailwindcss Function Reference

Dependency Diagram

graph TD
  cae2462d_b48b_78d8_8df1_2534f7aac297["registerScreensConfig()"]
  0f8ac574_990e_8595_a6ed_11422b8a8ec4["upgradeToFullPluginSupport()"]
  0f8ac574_990e_8595_a6ed_11422b8a8ec4 -->|calls| cae2462d_b48b_78d8_8df1_2534f7aac297
  0a4d3b97_024a_0f55_332f_6b7b1fcd9573["buildMediaQuery()"]
  cae2462d_b48b_78d8_8df1_2534f7aac297 -->|calls| 0a4d3b97_024a_0f55_332f_6b7b1fcd9573
  a9af385a_fd12_f1d8_7cf0_ccb9b281ca18["atRule()"]
  cae2462d_b48b_78d8_8df1_2534f7aac297 -->|calls| a9af385a_fd12_f1d8_7cf0_ccb9b281ca18
  style cae2462d_b48b_78d8_8df1_2534f7aac297 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)
  }
}