{"record":{"id":"14be97f46b3c79d7","repo":"wavetermdev/waveterm","slug":"invalid-css-color-string-color","errorCode":null,"errorMessage":"Invalid CSS color: ${String(color)}","messagePattern":"Invalid CSS color: (.+?)","errorType":"validation","errorClass":null,"httpStatus":null,"severity":"error","filePath":"frontend/util/color-validator.ts","lineNumber":47,"sourceCode":"    if (normalizedColor === \"transparent\") {\n        return \"transparent\";\n    }\n    if (normalizedColor === \"currentcolor\") {\n        return \"currentcolor\";\n    }\n    const functionMatch = normalizedColor.match(FunctionalColorRegex);\n    if (functionMatch) {\n        return functionMatch[1];\n    }\n    if (NamedColorRegex.test(normalizedColor)) {\n        return \"keyword\";\n    }\n    return \"color\";\n}\n\nexport function validateCssColor(color: string): string {\n    if (typeof color != \"string\") {\n        throw new Error(`Invalid CSS color: ${String(color)}`);\n    }\n    const normalizedColor = color.trim();\n    if (normalizedColor === \"\" || !isValidCssColor(normalizedColor)) {\n        throw new Error(`Invalid CSS color: ${color}`);\n    }\n    return getCssColorType(normalizedColor);\n}\n","sourceCodeStart":29,"sourceCodeEnd":55,"githubUrl":"https://github.com/wavetermdev/waveterm/blob/a4447c1563b2df285ab89e76c82f91e1a1a49c1e/frontend/util/color-validator.ts#L29-L55","documentation":"validateCssColor first asserts the input is a string; a non-string value (number, object, undefined) passed where a CSS color is expected throws this variant. The layout tab components call it on user/theme-supplied color props.","triggerScenarios":"TabInner/VTab/VTabWrapper receive a `class`/color prop computed as non-string (e.g. undefined from a missing theme field) and pass it to validateCssColor.","commonSituations":"Theme/config JSON missing a color key so the value is undefined; code passing a ColorTypeName object instead of a raw string; API regression returning numeric color values.","solutions":["Coerce the value to a string or default it before validating: color ?? \"\" or String(color)","Fix the theme/config source so the color key is always a string","Use the safe accessor (getCssColorType or isValidCssColor) if non-string inputs are expected"],"exampleFix":"// before\nvalidateCssColor(theme.background);\n\n// after\nvalidateCssColor(theme.background ?? \"\");","handlingStrategy":"type-guard","validationCode":"if (typeof color !== \"string\") {\n    color = String(color ?? \"\");\n}","typeGuard":"function isColorString(v: unknown): v is string {\n    return typeof v === \"string\";\n}","tryCatchPattern":"let type: string;\ntry {\n    type = validateCssColor(color);\n} catch {\n    type = validateCssColor(\"\"); // fall back or use default color\n}","preventionTips":["Default theme/config color fields to empty string, never undefined","Only pass string color props into Tab/VTab components","Coerce any computed color value with ?? \"\" at the call site"],"tags":["css","type-error","validation"],"backgroundTag":"invalid-css-color","analyzedSha":"a4447c1563b2df285ab89e76c82f91e1a1a49c1e","analyzedAt":"2026-09-01T15:26:23.972Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-08T10:18:20.063Z"}