CherryHQ/cherry-studio · error · Error

[theme-contract] shadcn.css cannot own runtime input ${decla

Error message

[theme-contract] shadcn.css cannot own runtime input ${declaration.name}

What it means

Thrown by assertLayerDependencies when shadcn.css declares a variable whose name starts with the runtime-input prefix --cs-theme-. Runtime inputs are owned exclusively by theme-input.css; shadcn.css must consume them via var(--cs-theme-*), never (re)declare them.

Source

Thrown at packages/ui/scripts/validate-theme-contract.ts:274

  }

  for (const declaration of extractDeclarations(sources.themeInput, 'theme-input.css')) {
    if (!runtimeVariables.has(declaration.name)) {
      throw new Error(`[theme-contract] theme-input.css declares unregistered runtime input ${declaration.name}`)
    }
    for (const reference of extractReferences(declaration.value, declaration.source)) {
      if (officialVariables.has(reference) || productVariables.has(reference) || reference.startsWith('--color-')) {
        throw new Error(`[theme-contract] runtime input ${declaration.name} cannot depend on upper-layer ${reference}`)
      }
      if (reference.startsWith('--app-')) {
        throw new Error(`[theme-contract] runtime input ${declaration.name} cannot depend on host-local ${reference}`)
      }
    }
  }

  for (const declaration of extractDeclarations(sources.shadcn, 'shadcn.css')) {
    if (declaration.name.startsWith(runtimeVariablePrefix)) {
      throw new Error(`[theme-contract] shadcn.css cannot own runtime input ${declaration.name}`)
    }
    for (const reference of extractReferences(declaration.value, declaration.source)) {
      if (productVariables.has(reference) || reference.startsWith('--color-') || reference.startsWith('--app-')) {
        throw new Error(`[theme-contract] Shadcn ${declaration.name} cannot depend on product/adapter ${reference}`)
      }
    }
  }

  for (const declaration of extractDeclarations(sources.product, 'product.css')) {
    for (const reference of extractReferences(declaration.value, declaration.source)) {
      const validNamespace =
        reference.startsWith('--cs-') || officialVariables.has(reference) || productVariables.has(reference)
      if (!validNamespace) {
        throw new Error(`[theme-contract] product ${declaration.name} has invalid dependency ${reference}`)
      }
    }
  }
}

View on GitHub (pinned to 726446b54c)

Solutions

  1. Remove the --cs-theme-* declaration from shadcn.css.
  2. If the intent was to expose a Shadcn role driven by a runtime input, declare the official Shadcn variable referencing it, e.g. `--primary: var(--cs-theme-primary);`.
  3. If the intent was to define a new runtime input, move it to theme-input.css and register the token.

Example fix

// before (shadcn.css)
:root { --cs-theme-primary: hotpink; }
// after — shadcn consumes the runtime input, does not own it
:root { --primary: var(--cs-theme-primary); }
Defensive patterns

Strategy: validation

Validate before calling

// shadcn.css must not declare any --cs-theme-* variable.
const owned = [...sources.shadcn.matchAll(/(--cs-theme-[a-z0-9-]+)\s*:/g)].map((m) => m[1])
if (owned.length) throw new Error(`shadcn.css owns runtime inputs: ${owned.join(', ')}`)

Try / catch

try {
  validateThemeContractSources(sources)
} catch (error) {
  if (error instanceof Error && /shadcn\.css cannot own runtime input/.test(error.message)) {
    console.error(error.message)
    process.exitCode = 1
    return
  }
  throw error
}

Prevention

When it happens

Trigger: Adding `:root { --cs-theme-primary: hotpink; }` to shadcn.css; pasting a runtime input into shadcn.css while editing.

Common situations: Confusing the consumer role (shadcn reads --cs-theme-*) with the owner role; copy-paste from theme-input.css.

Related errors


AI-assisted analysis of CherryHQ/cherry-studio@726446b54c (2026-08-12). Data as JSON: /api/errors/00349c5270b36485. Report an issue: GitHub.