swc-project/swc · error · Error

percentage, number, functions (math functions) or ident (wit

Error message

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

What it means

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.

Source

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

                            }
                            Token::Function { value, .. } if is_math_function(value) => {
                                Ok(Some(ComponentValue::Function(parser.parse()?)))
                            }
                            tok!("ident") if !matches!(&*lower_fname, "device-cmyk") => {
                                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, number, functions (math functions) or \
                                             ident (with 'none' value) token",
                                        ),
                                    ))
                                } else {
                                    Ok(None)
                                }
                            }
                        },
                        &mut has_variable,
                    )?;

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

View on GitHub (pinned to 5176682b65)

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.

Example fix

/* before */
color: rgb(0 0 0 / #808080);

/* after */
color: rgb(0 0 0 / 50%);

Defensive patterns

Strategy: try-catch

Validate before calling

fn alpha_token_ok(tok: &str) -> bool {
    let t = tok.trim();
    t.eq_ignore_ascii_case("none")
        || t.parse::<f64>().is_ok()
        || (t.ends_with('%') && t[..t.len() - 1].parse::<f64>().is_ok())
        || is_math_fn(t)
        || t.to_ascii_lowercase().starts_with("var(")
}

Type guard

fn alpha_not_hex_or_env(tok: &str) -> bool {
    let t = tok.trim();
    !t.starts_with('#') && !t.to_ascii_lowercase().starts_with("env(")
}

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, number, functions") {
            // invalid alpha token after '/'; report span, keep other declarations
        }
    }
}

Prevention

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.

When it happens

Trigger: `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%")`.

Common situations: Mixing 8-digit hex habits into functional rgb; using env() where var() is required; interpolated strings; minifier bugs.

Related errors

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