Home / Function/ applyCompatibilityHooks() — tailwindcss Function Reference

applyCompatibilityHooks() — tailwindcss Function Reference

Architecture documentation for the applyCompatibilityHooks() function in apply-compat-hooks.ts from the tailwindcss codebase.

Entity Profile

Dependency Diagram

graph TD
  fb60e614_817a_db22_d8eb_2bde7cd29719["applyCompatibilityHooks()"]
  daaadd53_16ee_21c6_12d9_8feaac80a91b["apply-compat-hooks.ts"]
  fb60e614_817a_db22_d8eb_2bde7cd29719 -->|defined in| daaadd53_16ee_21c6_12d9_8feaac80a91b
  3970218d_3d6c_e455_87cc_45b4a094f0e9["parseCss()"]
  3970218d_3d6c_e455_87cc_45b4a094f0e9 -->|calls| fb60e614_817a_db22_d8eb_2bde7cd29719
  b50aa380_a654_a283_9fe1_91a9a42ca527["cssContext()"]
  fb60e614_817a_db22_d8eb_2bde7cd29719 -->|calls| b50aa380_a654_a283_9fe1_91a9a42ca527
  2da63033_d079_7b37_5cfb_3877674a70b9["toCss()"]
  fb60e614_817a_db22_d8eb_2bde7cd29719 -->|calls| 2da63033_d079_7b37_5cfb_3877674a70b9
  f712ed47_45d4_4e5a_dd73_fdefa1da71da["segment()"]
  fb60e614_817a_db22_d8eb_2bde7cd29719 -->|calls| f712ed47_45d4_4e5a_dd73_fdefa1da71da
  474da8ab_bb82_dc1d_4a87_5aea9d83e92b["registerLegacyUtilities()"]
  fb60e614_817a_db22_d8eb_2bde7cd29719 -->|calls| 474da8ab_bb82_dc1d_4a87_5aea9d83e92b
  80c6b9c7_f7d5_21ff_a3e4_25ec4a08f640["resolveThemeValue()"]
  fb60e614_817a_db22_d8eb_2bde7cd29719 -->|calls| 80c6b9c7_f7d5_21ff_a3e4_25ec4a08f640
  1a022c10_a26e_d793_740c_267a533619c4["upgradeToFullPluginSupport()"]
  fb60e614_817a_db22_d8eb_2bde7cd29719 -->|calls| 1a022c10_a26e_d793_740c_267a533619c4
  ed78da58_8727_ad98_120c_61f35cea357a["walk()"]
  fb60e614_817a_db22_d8eb_2bde7cd29719 -->|calls| ed78da58_8727_ad98_120c_61f35cea357a
  style fb60e614_817a_db22_d8eb_2bde7cd29719 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/compat/apply-compat-hooks.ts lines 21–215

export async function applyCompatibilityHooks({
  designSystem,
  base,
  ast,
  loadModule,
  sources,
}: {
  designSystem: DesignSystem
  base: string
  ast: AstNode[]
  loadModule: (
    path: string,
    base: string,
    resourceHint: 'plugin' | 'config',
  ) => Promise<{
    path: string
    base: string
    module: any
  }>
  sources: { base: string; pattern: string; negated: boolean }[]
}) {
  let features = Features.None
  let pluginPaths: [
    { id: string; base: string; reference: boolean; src: SourceLocation | undefined },
    CssPluginOptions | null,
  ][] = []
  let configPaths: {
    id: string
    base: string
    reference: boolean
    src: SourceLocation | undefined
  }[] = []

  walk(ast, (node, _ctx) => {
    if (node.kind !== 'at-rule') return
    let ctx = cssContext(_ctx)

    // Collect paths from `@plugin` at-rules
    if (node.name === '@plugin') {
      if (ctx.parent !== null) {
        throw new Error('`@plugin` cannot be nested.')
      }

      let pluginPath = node.params.slice(1, -1)
      if (pluginPath.length === 0) {
        throw new Error('`@plugin` must have a path.')
      }

      let options: CssPluginOptions = {}

      for (let decl of node.nodes ?? []) {
        if (decl.kind !== 'declaration') {
          throw new Error(
            `Unexpected \`@plugin\` option:\n\n${toCss([decl])}\n\n\`@plugin\` options must be a flat list of declarations.`,
          )
        }

        if (decl.value === undefined) continue

        // Parse the declaration value as a primitive type
        // These are the same primitive values supported by JSON
        let value: CssPluginOptions[keyof CssPluginOptions] = decl.value

        let parts = segment(value, ',').map((part) => {
          part = part.trim()

          if (part === 'null') {
            return null
          } else if (part === 'true') {
            return true
          } else if (part === 'false') {
            return false
          } else if (!Number.isNaN(Number(part))) {
            return Number(part)
          } else if (
            (part[0] === '"' && part[part.length - 1] === '"') ||
            (part[0] === "'" && part[part.length - 1] === "'")
          ) {
            return part.slice(1, -1)
          } else if (part[0] === '{' && part[part.length - 1] === '}') {
            throw new Error(

Domain

Subdomains

Called By

Frequently Asked Questions

What does applyCompatibilityHooks() do?
applyCompatibilityHooks() is a function in the tailwindcss codebase, defined in packages/tailwindcss/src/compat/apply-compat-hooks.ts.
Where is applyCompatibilityHooks() defined?
applyCompatibilityHooks() is defined in packages/tailwindcss/src/compat/apply-compat-hooks.ts at line 21.
What does applyCompatibilityHooks() call?
applyCompatibilityHooks() calls 7 function(s): cssContext, registerLegacyUtilities, resolveThemeValue, segment, toCss, upgradeToFullPluginSupport, walk.
What calls applyCompatibilityHooks()?
applyCompatibilityHooks() is called by 1 function(s): parseCss.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free