What causes "Expected percentage or number token" in swc-project/swc?

Use a number (0-1) or percentage for alpha: 'rgb(255 0 0 / 50%)'.

swc-project/swc · error · Error

Expected percentage or number token

Error message

Expected percentage or number token

What it means

Thrown by Parse<AlphaValue> in swc_css_parser when an <alpha-value> is expected but the current token is neither a percentage nor a number. AlphaValue only accepts '50%' or '0.5' shapes (is_one_of!(self, "percentage", "number")); an ident like 'none' (on versions without none support), a keyword 'auto', a dimension ('50px'), or EOF in the alpha slot after '/' in modern color syntax fails here.

Source

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

                    raw: Some(raw),
                })
            }
            _ => {
                unreachable!()
            }
        }
    }
}

impl<I> Parse<AlphaValue> for Parser<I>
where
    I: ParserInput,
{
    fn parse(&mut self) -> PResult<AlphaValue> {
        if !is_one_of!(self, "percentage", "number") {
            let span = self.input.cur_span();

            return Err(Error::new(
                span,
                ErrorKind::Expected("percentage or number token"),
            ));
        }

        match cur!(self) {
            tok!("percentage") => Ok(AlphaValue::Percentage(self.parse()?)),
            tok!("number") => Ok(AlphaValue::Number(self.parse()?)),
            _ => {
                unreachable!()
            }
        }
    }
}

impl<I> Parse<Hue> for Parser<I>
where
    I: ParserInput,

View on GitHub (pinned to 5176682b65)

Solutions

Use a number (0-1) or percentage for alpha: 'rgb(255 0 0 / 50%)'.
Remove alpha entirely if it should be opaque ('rgb(255 0 0)').
Upgrade swc_css_parser/swc_core if you need 'none' alpha support; otherwise resolve var() before parsing.

Example fix

/* before */
a { color: rgb(255 0 0 / auto); }

/* after */
a { color: rgb(255 0 0 / 100%); }

Defensive patterns

Strategy: validation

Validate before calling

const ALPHA = /^-?(\d+\.?\d*|\.\d+)%?$/;
function isValidAlphaValue(v: string): boolean {
  return ALPHA.test(v.trim());
}

Type guard

fn is_alpha_literal(v: &str) -> bool {
    let t = v.strip_suffix('%').unwrap_or(v);
    t.parse::<f64>().is_ok()
}

Try / catch

use swc_css_parser::error::ErrorKind;
if let Err(e) = parse_input::<Stylesheet>(src, opts) {
    if matches!(e.kind(), ErrorKind::Expected("percentage or number token")) {
        return Err(format!("bad alpha value at {:?}", e.span()).into());
    }
    return Err(e.into());
}

Prevention

Serialize alpha as 0..1 number or percentage; never keywords.
If you need 'none' alpha or var(), upgrade swc_css_parser and verify support first.
Guard against EOF after '/' when concatenating color strings.

When it happens

Trigger: 'rgb(255 0 0 / auto)', 'hsl(120 50% 50% / none)' on an older parser, 'rgb(255 0 0 / 50px)', or a truncated 'rgb(255 0 0 /' at EOF where the alpha component is missing.

Common situations: Newer CSS 'none' alpha or variable alpha (var()) fed to an older swc_css_parser, and generated colors appending a non-numeric opacity unit.

Related errors

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