swc-project/swc · error · Error

percentage, functions (math functions) or ident (with 'none'

Error message

percentage, functions (math functions) or ident (with 'none' value) token

What it means

Thrown by swc_css_parser when the SECOND component (whiteness) of hwb() starts with a token that is not a percentage, math function, or ident. The current token falls through to the catch-all arm, which errors with the span of parser.input.cur_span() — the exact offending token. Suppressed only when a var() custom-property reference appeared earlier in this color function (has_variable_before), in which case the component list ends gracefully with Ok(None).

Source

Thrown at crates/swc_css_parser/src/parser/values_and_units/mod.rs:975

                                        Ok(Some(ComponentValue::Function(parser.parse()?)))
                                    }
                                    tok!("ident") => {
                                        let ident: Box<Ident> = parser.parse()?;

                                        if ident.value.eq_ignore_ascii_case("none") {
                                            Ok(Some(ComponentValue::Ident(ident)))
                                        } else {
                                            Err(Error::new(
                                                ident.span,
                                                ErrorKind::Expected(
                                                    "'none' value of an ident token",
                                                ),
                                            ))
                                        }
                                    }
                                    _ => {
                                        if !has_variable_before {
                                            Err(Error::new(
                                                parser.input.cur_span(),
                                                ErrorKind::Expected(
                                                    "percentage, functions (math functions) or \
                                                     ident (with 'none' value) token",
                                                ),
                                            ))
                                        } else {
                                            Ok(None)
                                        }
                                    }
                                },
                                &mut has_variable,
                            )?;

                            if let Some(percentage_or_none) = percentage_or_none {
                                values.push(percentage_or_none);
                            }

View on GitHub (pinned to 5176682b65)

Solutions

Remove the comma and use space-separated modern syntax: hwb(0 50% 30%).
If the token is a string/number-with-unit, convert it to a bare percentage: hwb(0 50% 30%) not hwb(0 "50%" 30%).
For dynamic values, wrap in var(): hwb(0 var(--w) 30%).
Report the error using its span — it marks the offending token precisely.

Example fix

/* before */
color: hwb(0, 50%, 30%);

/* after */
color: hwb(0 50% 30%);

Defensive patterns

Strategy: try-catch

Validate before calling

// Normalize before parsing: reject/rewrite commas inside hwb()
fn normalize_hwb(v: &str) -> String { v.replace(",", " ") }

Type guard

fn hwb_uses_modern_syntax(v: &str) -> bool {
    let inner = v.trim_start_matches("hwb(").trim_end_matches(')');
    !inner.contains(',')
}

Try / catch

if let Err(e) = swc_css_parser::parse_file::<swc_css_ast::Stylesheet>(&fm, None, config, &mut errs) {
    if let swc_css_parser::error::ErrorKind::Expected(m) = e.kind() {
        if m.starts_with("percentage, functions") {
            // unexpected token in hwb() component; recover by skipping the declaration
        }
    }
}

Prevention

Normalize legacy comma-separated color functions to space-separated form before parsing.
Unquote any interpolated numeric tokens.
Add fixture tests for hwb variants your pipeline emits.
Collect recoverable errors via the errors vector instead of failing the whole build.

When it happens

Trigger: `hwb(0, 50%, 30%)` — a comma after the hue reaches the whiteness slot and is a delimiter token; `hwb(0 "50%" 30%)` — a string; `hwb(0 url(x) 30%)`; `hwb(0 #fff 30%)` — a hash token.

Common situations: Copy-pasting legacy comma-separated syntax into the modern space-separated hwb form; string values interpolated by templating languages; CSS minifiers re-serializing colors incorrectly.

Related errors

AI-assisted analysis of swc-project/swc@5176682b65 (2026-08-17). Data as JSON: /api/errors/3dba3c467e4eae0d. Report an issue: GitHub.