{"record":{"id":"297b8c8a8264f46b","repo":"swc-project/swc","slug":"percentage-number-functions-math-functions-or","errorCode":null,"errorMessage":"percentage, number, functions (math functions) or ident (with 'none' value) token","messagePattern":"percentage, number, functions \\(math functions\\) or ident \\(with 'none' value\\) token","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"crates/swc_css_parser/src/parser/values_and_units/mod.rs","lineNumber":1268,"sourceCode":"                            }\n                            Token::Function { value, .. } if is_math_function(value) => {\n                                Ok(Some(ComponentValue::Function(parser.parse()?)))\n                            }\n                            tok!(\"ident\") if !matches!(&*lower_fname, \"device-cmyk\") => {\n                                let ident: Box<Ident> = parser.parse()?;\n\n                                if ident.value.eq_ignore_ascii_case(\"none\") {\n                                    Ok(Some(ComponentValue::Ident(ident)))\n                                } else {\n                                    Err(Error::new(\n                                        ident.span,\n                                        ErrorKind::Expected(\"'none' value of an ident token\"),\n                                    ))\n                                }\n                            }\n                            _ => {\n                                if !has_variable_before {\n                                    Err(Error::new(\n                                        parser.input.cur_span(),\n                                        ErrorKind::Expected(\n                                            \"percentage, number, functions (math functions) or \\\n                                             ident (with 'none' value) token\",\n                                        ),\n                                    ))\n                                } else {\n                                    Ok(None)\n                                }\n                            }\n                        },\n                        &mut has_variable,\n                    )?;\n\n                    if let Some(alpha_value) = alpha_value {\n                        values.push(alpha_value);\n                    }\n","sourceCodeStart":1250,"sourceCodeEnd":1286,"githubUrl":"https://github.com/swc-project/swc/blob/5176682b65416c6b5de6b47379ae1588ea3ecb3f/crates/swc_css_parser/src/parser/values_and_units/mod.rs#L1250-L1286","documentation":"Thrown by swc_css_parser when the token after '/' in a modern color function's alpha position is not a number, percentage, math function, or (allowed) ident. The catch-all arm (mod.rs:1266-1278) fires with the current token's span, and only when no var() was parsed earlier in the same function. Note env()/constant() are NOT accepted here — only var() (handled by try_parse_variable_function) and math functions.","triggerScenarios":"`rgb(0 0 0 / #808080)` — hex after the slash; `rgb(0 0 0 / env(ALPHA))` — env is not a math function and not var; `rgb(0 0 0 / url(a))`; `rgb(0 0 0 / \"50%\")`.","commonSituations":"Mixing 8-digit hex habits into functional rgb; using env() where var() is required; interpolated strings; minifier bugs.","solutions":["Give alpha as number or percentage: rgb(0 0 0 / 50%).","Use var(), not env(), for custom-property indirection inside color functions.","Convert hex alpha to a percentage (e.g. #80 -> 50%).","Check the error span — it marks the token right after the slash."],"exampleFix":"/* before */\ncolor: rgb(0 0 0 / #808080);\n\n/* after */\ncolor: rgb(0 0 0 / 50%);","handlingStrategy":"try-catch","validationCode":"fn alpha_token_ok(tok: &str) -> bool {\n    let t = tok.trim();\n    t.eq_ignore_ascii_case(\"none\")\n        || t.parse::<f64>().is_ok()\n        || (t.ends_with('%') && t[..t.len() - 1].parse::<f64>().is_ok())\n        || is_math_fn(t)\n        || t.to_ascii_lowercase().starts_with(\"var(\")\n}","typeGuard":"fn alpha_not_hex_or_env(tok: &str) -> bool {\n    let t = tok.trim();\n    !t.starts_with('#') && !t.to_ascii_lowercase().starts_with(\"env(\")\n}","tryCatchPattern":"if let Err(e) = swc_css_parser::parse_file::<swc_css_ast::Stylesheet>(&fm, None, config, &mut errs) {\n    if let swc_css_parser::error::ErrorKind::Expected(m) = e.kind() {\n        if m.starts_with(\"percentage, number, functions\") {\n            // invalid alpha token after '/'; report span, keep other declarations\n        }\n    }\n}","preventionTips":["Do not put hex colors or env() in the alpha slot — only number, %, math fn, var(), or none.","Use var(--a), not env(--a), inside color functions.","Lint for tokens directly after '/' in color values.","Add regression fixtures for alpha syntax variants."],"tags":["css","swc","parser","color","alpha","hex-color","syntax"],"backgroundTag":"css-unexpected-token","analyzedSha":"5176682b65416c6b5de6b47379ae1588ea3ecb3f","analyzedAt":"2026-08-17T16:16:52.067Z","contentChangedAt":"2026-08-17T16:16:52.067Z","schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}