swc-project/swc · error · swc_css_parser::error::Error

Expected number, ident, dimension or function token

Error message

Expected number, ident, dimension or function token

What it means

Defines what a <media-feature-value> may be: a number, an identifier, a dimension, or a math function recognized by is_math_function (calc, min, max, clamp and friends). Any other token in the value slot of a feature raises ErrorKind::Expected("number, ident, dimension or function token") at the feature's span.

Source

Thrown at crates/swc_css_parser/src/parser/at_rules/mod.rs:1917

                        left,
                        right,
                    }));
                }

                Ok(MediaFeatureValue::Number(left))
            }
            tok!("ident") => {
                let name: Ident = self.parse()?;

                Ok(MediaFeatureValue::Ident(name))
            }
            tok!("dimension") => Ok(MediaFeatureValue::Dimension(self.parse()?)),
            Token::Function { value, .. } if is_math_function(value) => {
                let function = self.parse()?;

                Ok(MediaFeatureValue::Function(function))
            }
            _ => Err(Error::new(
                span,
                ErrorKind::Expected("number, ident, dimension or function token"),
            )),
        }
    }
}

impl<I> Parse<PageSelectorList> for Parser<I>
where
    I: ParserInput,
{
    fn parse(&mut self) -> PResult<PageSelectorList> {
        let selector: PageSelector = self.parse()?;
        let mut selectors = vec![selector];

        loop {
            self.input.skip_ws();

View on GitHub (pinned to 5176682b65)

Solutions

1. Emit plain numbers/dimensions: @media (min-width: 600px)
2. Wrap arithmetic in a math function: @media (min-width: calc(100% - 2rem)) — percentages only inside math contexts
3. Keep colors and other typed values out of media features; use style queries or custom properties instead
4. When interpolating from JS, serialize numbers without quotes

Example fix

/* before */
@media (min-width: "600px") { }

/* after */
@media (min-width: 600px) { }

fn feature_value_kind_ok(v: &str) -> bool {
    let t = v.trim();
    if t.starts_with('"') || t.starts_with('#') || t.contains(',') {
        return false;
    }
    if let Some(open) = t.find('(') {
        let head = &t[..open];
        return ["calc", "min", "max", "clamp"].iter().any(|f| head.eq_ignore_ascii_case(f));
    }
    t.parse::<f64>().is_ok() || t.chars().next().map_or(false, |c| c.is_ascii_alphabetic() || c == '-')
}

fn is_feature_value_error(e: &swc_css_parser::error::Error) -> bool {
    matches!(e.kind(), swc_css_parser::error::ErrorKind::Expected(m) if *m == "number, ident, dimension or function token")
}

match parse_file::<Stylesheet>(&fm, None, config, &mut errors) {
    Ok(sheet) => handle(sheet),
    Err(err) if is_feature_value_error(&err) => {
        let (span, _) = *err.into_inner();
        hint_at_span(css, span, "media feature values accept number, ident, dimension, or calc/min/max/clamp — remove strings, colors, and commas");
    }
    Err(err) => return Err(err.into()),
}

When it happens

Trigger: '@media (min-width: "600px")' (string), '@media (color: #fff)' (hash/color token), '@media (width: 10px, 5px)' (comma), '@media (prefers-color-scheme: rgb(0 0 0))' (non-math function).

Common situations: Values interpolated from JS without type conversion (sizes arriving as strings), attempts to use colors or var() references in media features, and copy-paste of declaration values into feature slots.

Related errors

• Expected identifier value
• Expected '>' or '<' operators
• Expected ident (exclude the keywords 'only', 'not', 'and', '
• Expected left comparison operator should be equal right comp
• Expected function or '('

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