parseImportParams() — tailwindcss Function Reference

Architecture documentation for the parseImportParams() function in at-import.ts from the tailwindcss codebase.

Function typescript OxideEngine Extractor calls 1 called by 2

Entity Profile

OxideEngine→ Extractor→ parseImportParams() — tailwindcss Function Reference

Dependency Diagram

graph TD
  080c2c82_1391_bd9d_3ee3_8b010c0f87ce["parseImportParams()"]
  bb501946_7944_1015_b5ff_34d10aace799["at-import.ts"]
  080c2c82_1391_bd9d_3ee3_8b010c0f87ce -->|defined in| bb501946_7944_1015_b5ff_34d10aace799
  d0429f7e_c0b8_e2df_15f9_96e807ee2d3a["migrateImport()"]
  d0429f7e_c0b8_e2df_15f9_96e807ee2d3a -->|calls| 080c2c82_1391_bd9d_3ee3_8b010c0f87ce
  5713e78d_1b82_b74a_13d9_da852136ec3c["substituteAtImports()"]
  5713e78d_1b82_b74a_13d9_da852136ec3c -->|calls| 080c2c82_1391_bd9d_3ee3_8b010c0f87ce
  e79308d2_473f_b6d6_3b04_e4e55c2708d3["toCss()"]
  080c2c82_1391_bd9d_3ee3_8b010c0f87ce -->|calls| e79308d2_473f_b6d6_3b04_e4e55c2708d3
  style 080c2c82_1391_bd9d_3ee3_8b010c0f87ce fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/at-import.ts lines 87–148

export function parseImportParams(params: ValueParser.ValueAstNode[]) {
  let uri
  let layer: string | null = null
  let media: string | null = null
  let supports: string | null = null

  for (let i = 0; i < params.length; i++) {
    let node = params[i]

    if (node.kind === 'separator') continue

    if (node.kind === 'word' && !uri) {
      if (!node.value) return null
      if (node.value[0] !== '"' && node.value[0] !== "'") return null

      uri = node.value.slice(1, -1)
      continue
    }

    if (node.kind === 'function' && node.value.toLowerCase() === 'url') {
      // `@import` with `url(…)` functions are not inlined but skipped and kept
      // in the final CSS instead.
      // E.g.: `@import url("https://fonts.google.com")`
      return null
    }

    if (!uri) return null

    if (
      (node.kind === 'word' || node.kind === 'function') &&
      node.value.toLowerCase() === 'layer'
    ) {
      if (layer) return null
      if (supports) {
        throw new Error(
          '`layer(…)` in an `@import` should come before any other functions or conditions',
        )
      }

      if ('nodes' in node) {
        layer = ValueParser.toCss(node.nodes)
      } else {
        layer = ''
      }

      continue
    }

    if (node.kind === 'function' && node.value.toLowerCase() === 'supports') {
      if (supports) return null
      supports = ValueParser.toCss(node.nodes)
      continue
    }

    media = ValueParser.toCss(params.slice(i))
    break
  }

  if (!uri) return null

  return { uri, layer, media, supports }
}