{"record":{"id":"d7e809c8295a8f30","repo":"dianping/cat","slug":"expected-a-hex-color-but-found-color-at-line","errorCode":null,"errorMessage":"Expected a hex color but found '{color}' at line {line}, col {col}.","messagePattern":"Expected a hex color but found '(.+?)' at line (.+?), col (.+?)\\.","errorType":"exception","errorClass":"SyntaxError","httpStatus":null,"severity":"error","filePath":"cat-home/src/main/webapp/assets/js/editor/worker-css.js","lineNumber":3270,"sourceCode":"                    functionText += \")\";\n                    this._readWhitespace();\n                }\n\n                return functionText;\n            },\n\n            _hexcolor: function(){\n\n                var tokenStream = this._tokenStream,\n                    token = null,\n                    color;\n\n                if(tokenStream.match(Tokens.HASH)){\n\n                    token = tokenStream.token();\n                    color = token.value;\n                    if (!/#[a-f0-9]{3,6}/i.test(color)){\n                        throw new SyntaxError(\"Expected a hex color but found '\" + color + \"' at line \" + token.startLine + \", col \" + token.startCol + \".\", token.startLine, token.startCol);\n                    }\n                    this._readWhitespace();\n                }\n\n                return token;\n            },\n\n            _keyframes: function(){\n                var tokenStream = this._tokenStream,\n                    token,\n                    tt,\n                    name,\n                    prefix = \"\";\n\n                tokenStream.mustMatch(Tokens.KEYFRAMES_SYM);\n                token = tokenStream.token();\n                if (/^@\\-([^\\-]+)\\-/.test(token.value)) {\n                    prefix = RegExp.$1;","sourceCodeStart":3252,"sourceCodeEnd":3288,"githubUrl":"https://github.com/dianping/cat/blob/e815e74d4c2dd74edac831241f1253fcc7d25381/cat-home/src/main/webapp/assets/js/editor/worker-css.js#L3252-L3288","documentation":"Thrown by the parser's `_hexcolor()` helper after it matched a HASH token (`#...`) but the token's value fails the loose check `/#[a-f0-9]{3,6}/i`. So the tokenizer accepted a `#`-prefixed identifier, yet the characters after `#` are not 3–6 hexadecimal digits. It fires wherever the grammar demands a color and the value looks like a hex color but is not one.","triggerScenarios":"Values like `#zz`, `#1` (fewer than 3 hex digits), `#ggghhh` (non-hex letters), `#` followed by non-hex characters, or an unclosed interpolation leaving junk after `#`. Typically from `color: #ff;`, `background: #00ff00z;` typos, or template strings interpolating to empty.","commonSituations":"Typing shorthand hex too short (`#f` instead of `#f0f`); extra trailing character pasted after the hex; variable interpolation (`color: #{$brand}` style) that emitted nothing after `#`; find-and-replace that mangled hex digits into letters g–z.","solutions":["Correct the value at the reported line/col to a real hex color: 3, 4, or 6 hex digits (`#f00`, `#0f0a`, `#ff0000`).","If you meant a named color or function, drop the `#`: `color: red;` or `color: rgb(255, 0, 0);`.","Check interpolations/variables that produce the value after `#` and add a fallback so it never renders empty.","Grep the stylesheet for `#[0-9a-fA-Z]{0,2}\\b` and `#[^0-9a-fA-Z]` to find other malformed hex values in one pass."],"exampleFix":"/* before */\n.banner { color: #ff; }        /* Expected a hex color but found '#ff' */\n\n/* after */\n.banner { color: #ff0000; }","handlingStrategy":"validation","validationCode":"function validHexTokens(css) {\n  var bad = css.match(/#[0-9a-fA-F]{0,2}(?![0-9a-fA-F])\\b|#[^0-9a-fA-F\\s;,}]/g);\n  return bad || []; // non-empty -> fix these before parsing","typeGuard":null,"tryCatchPattern":"try {\n  parser.parse(css);\n} catch (ex) {\n  if (/Expected a hex color/.test(ex.message)) { highlight(ex.line, ex.col); return; }\n  throw ex;\n}","preventionTips":["Use editor snippets/validation for hex colors (#rgb, #rgba, #rrggbb only).","Guard templated colors: color: #${hex || '000'} so '#' is never followed by junk.","Review find/replace operations that can inject non-hex digits into colors."],"tags":["css","parser","color","hex","syntax-error"],"backgroundTag":null,"analyzedSha":"e815e74d4c2dd74edac831241f1253fcc7d25381","analyzedAt":"2026-08-14T14:22:34.512Z","schemaVersion":2},"datasetVersion":"2026-08-15T22:17:37.221Z"}