parseImportParams() — tailwindcss Function Reference

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

Function typescript Oxide Extractor calls 1 called by 2

Entity Profile

Oxide→ Extractor→ parseImportParams() — tailwindcss Function Reference

Dependency Diagram

graph TD
  6037d149_2cd7_be02_40f7_bc552380ed53["parseImportParams()"]
  061a1d94_150d_9879_9075_9c457da6010d["at-import.ts"]
  6037d149_2cd7_be02_40f7_bc552380ed53 -->|defined in| 061a1d94_150d_9879_9075_9c457da6010d
  3c115506_d301_3ffd_6d4a_a58dbd7aaed5["migrateImport()"]
  3c115506_d301_3ffd_6d4a_a58dbd7aaed5 -->|calls| 6037d149_2cd7_be02_40f7_bc552380ed53
  2d1ddb63_f29d_b245_22dc_8060d98def4c["substituteAtImports()"]
  2d1ddb63_f29d_b245_22dc_8060d98def4c -->|calls| 6037d149_2cd7_be02_40f7_bc552380ed53
  d6cf80a6_8130_7069_e60d_09156f156b67["toCss()"]
  6037d149_2cd7_be02_40f7_bc552380ed53 -->|calls| d6cf80a6_8130_7069_e60d_09156f156b67
  style 6037d149_2cd7_be02_40f7_bc552380ed53 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 }
}