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 5701b75f_30db_85c0_f5db_cc19be325e05["applyCompatibilityHooks()"] 2745c5e0_8ea4_a1c7_4f84_369746e3eb63["apply-compat-hooks.ts"] 5701b75f_30db_85c0_f5db_cc19be325e05 -->|defined in| 2745c5e0_8ea4_a1c7_4f84_369746e3eb63 f7f9b3da_5977_1aa6_3bcb_bfc607af4e8f["parseCss()"] f7f9b3da_5977_1aa6_3bcb_bfc607af4e8f -->|calls| 5701b75f_30db_85c0_f5db_cc19be325e05 94749bfc_586d_a227_ed27_a6fae4004c50["cssContext()"] 5701b75f_30db_85c0_f5db_cc19be325e05 -->|calls| 94749bfc_586d_a227_ed27_a6fae4004c50 9b49f3c6_0c8d_5c62_965c_30a1db6499f8["toCss()"] 5701b75f_30db_85c0_f5db_cc19be325e05 -->|calls| 9b49f3c6_0c8d_5c62_965c_30a1db6499f8 c58cbb33_f3cc_0b4f_844a_15bf66a1dc61["segment()"] 5701b75f_30db_85c0_f5db_cc19be325e05 -->|calls| c58cbb33_f3cc_0b4f_844a_15bf66a1dc61 f2b46398_1cac_b0f2_946b_db57178a0090["registerLegacyUtilities()"] 5701b75f_30db_85c0_f5db_cc19be325e05 -->|calls| f2b46398_1cac_b0f2_946b_db57178a0090 61e3cc2e_05f1_77a0_19e8_82b9e0fa97a8["resolveThemeValue()"] 5701b75f_30db_85c0_f5db_cc19be325e05 -->|calls| 61e3cc2e_05f1_77a0_19e8_82b9e0fa97a8 2351a59d_92ba_1342_1dcb_39b34492170e["upgradeToFullPluginSupport()"] 5701b75f_30db_85c0_f5db_cc19be325e05 -->|calls| 2351a59d_92ba_1342_1dcb_39b34492170e 4982d9ce_98d4_85d9_44af_7cc47b93c482["walk()"] 5701b75f_30db_85c0_f5db_cc19be325e05 -->|calls| 4982d9ce_98d4_85d9_44af_7cc47b93c482 style 5701b75f_30db_85c0_f5db_cc19be325e05 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
Calls
Called By
Source
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