{"record":{"id":"6764a0e1d8c71086","repo":"swc-project/swc","slug":"expected-number-or-dimension-token","errorCode":null,"errorMessage":"Expected number or dimension token","messagePattern":"Expected number or dimension token","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"crates/swc_css_parser/src/parser/values_and_units/mod.rs","lineNumber":2485,"sourceCode":"        match cur!(self) {\n            tok!(\"percentage\") => Ok(AlphaValue::Percentage(self.parse()?)),\n            tok!(\"number\") => Ok(AlphaValue::Number(self.parse()?)),\n            _ => {\n                unreachable!()\n            }\n        }\n    }\n}\n\nimpl<I> Parse<Hue> for Parser<I>\nwhere\n    I: ParserInput,\n{\n    fn parse(&mut self) -> PResult<Hue> {\n        if !is_one_of!(self, \"number\", \"dimension\") {\n            let span = self.input.cur_span();\n\n            return Err(Error::new(\n                span,\n                ErrorKind::Expected(\"number or dimension token\"),\n            ));\n        }\n\n        match cur!(self) {\n            tok!(\"number\") => Ok(Hue::Number(self.parse()?)),\n            tok!(\"dimension\") => Ok(Hue::Angle(self.parse()?)),\n            _ => {\n                unreachable!()\n            }\n        }\n    }\n}\n\nimpl<I> Parse<CmykComponent> for Parser<I>\nwhere\n    I: ParserInput,","sourceCodeStart":2467,"sourceCodeEnd":2503,"githubUrl":"https://github.com/swc-project/swc/blob/5176682b65416c6b5de6b47379ae1588ea3ecb3f/crates/swc_css_parser/src/parser/values_and_units/mod.rs#L2467-L2503","documentation":"Thrown by Parse<Hue> in swc_css_parser when a <hue> is expected but the current token is neither a number nor a dimension. Hue accepts a bare number ('hsl(120 50% 50%)') or an angle dimension that is then delegated to Parse<Angle> ('hsl(120deg 50% 50%)'); an ident ('red'), percentage, function, or EOF fails is_one_of!(self, \"number\", \"dimension\") with this error.","triggerScenarios":"'hsl(red, 50%, 50%)' (legacy code using a color keyword in the hue slot), 'hsl(50% 50% 50%)' (percentage hue), or 'hsl(... ' truncated at EOF before the hue token.","commonSituations":"Converting legacy comma-syntax hsl() where the first argument was sometimes a named color, and templates inserting a percentage where degrees are required.","solutions":["Put a number or angle in the hue slot: 'hsl(120 50% 50%)' or 'hsl(120deg 50% 50%)'.","If the source is a named color, convert it to its hue/percent triplets or use the color directly as 'hsl(0 100% 50%)'-equivalent value.","Validate hue strings with ^-?(\\d+\\.?\\d*|\\.\\d+)(deg|grad|rad|turn)?$ before parsing."],"exampleFix":"/* before */\na { color: hsl(red, 50%, 50%); }\n\n/* after */\na { color: hsl(0 100% 50%); }","handlingStrategy":"validation","validationCode":"const HUE = /^-?(\\d+\\.?\\d*|\\.\\d+)(deg|grad|rad|turn)?$/i;\nfunction isValidHue(v: string): boolean {\n  return HUE.test(v.trim());\n}","typeGuard":"fn is_hue_literal(v: &str) -> bool {\n    match v.find(|c: char| c.is_ascii_alphabetic()) {\n        Some(i) => v[..i].parse::<f64>().is_ok()\n            && matches!(v[i..].to_ascii_lowercase().as_str(), \"deg\" | \"grad\" | \"rad\" | \"turn\"),\n        None => v.parse::<f64>().is_ok(),\n    }\n}","tryCatchPattern":"use swc_css_parser::error::ErrorKind;\nif let Err(e) = parse_input::<Stylesheet>(src, opts) {\n    if matches!(e.kind(), ErrorKind::Expected(\"number or dimension token\")) {\n        return Err(format!(\"bad hue at {:?}\", e.span()).into());\n    }\n    return Err(e.into());\n}","preventionTips":["Convert legacy hsl(named-color, ...) inputs to hue numbers before emitting.","Disallow percentages in the hue slot of generated hsl/oklch values.","Prefer modern space-separated hsl() syntax with numeric hue."],"tags":["css","swc","parser","color","hue"],"backgroundTag":"css-invalid-hue-value","analyzedSha":"5176682b65416c6b5de6b47379ae1588ea3ecb3f","analyzedAt":"2026-08-17T16:16:52.067Z","contentChangedAt":"2026-08-17T16:16:52.067Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}