swc-project/swc · error · Error

Expected hash, ident (with named color, system color, 'trans

Error message

Expected hash, ident (with named color, system color, 'transparent' or 'currentColor' value) or function (with color function name) token

What it means

Catch-all thrown by Parse<Color> in swc_css_parser after every <color> shape has been tried and failed: the token is not a hash, not an ident holding currentColor/transparent (or a named/system color), not a device-cmyk() function, and the inner AbsoluteColorBase parse also failed. The error span is the current token, captured before the attempts, and the message enumerates the accepted token kinds.

Source

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

        let span = self.input.cur_span();

        match cur!(self) {
            // currentcolor | <system-color>
            Token::Ident { value, .. }
                if value.as_ref().eq_ignore_ascii_case("currentcolor")
                    || is_system_color(value) =>
            {
                Ok(Color::CurrentColorOrSystemColor(self.parse()?))
            }
            // <device-cmyk()>
            Token::Function { value, .. } if value.as_ref().eq_ignore_ascii_case("device-cmyk") => {
                Ok(Color::Function(self.parse()?))
            }
            // <absolute-color-base>
            _ => match self.parse() {
                Ok(absolute_color_base) => Ok(Color::AbsoluteColorBase(absolute_color_base)),
                Err(_) => {
                    return Err(Error::new(
                        span,
                        ErrorKind::Expected(
                            "hash, ident (with named color, system color, 'transparent' or \
                             'currentColor' value) or function (with color function name) token",
                        ),
                    ));
                }
            },
        }
    }
}

impl<I> Parse<AbsoluteColorBase> for Parser<I>
where
    I: ParserInput,
{
    fn parse(&mut self) -> PResult<AbsoluteColorBase> {
        let span = self.input.cur_span();

View on GitHub (pinned to 5176682b65)

Solutions

Use a literal the parser understands: hex (#fff), a named/system color, currentColor, transparent, or a standard color function (rgb(), hsl(), lab(), oklch(), color(), device-cmyk(), ...).
Resolve var() references at build time before handing the value to the parser, or upgrade swc_core/swc_css_parser so modern color syntax is supported.
Fix typos in color names ('brandcolor' -> a real named color).
If the position accepts arbitrary values, parse it as a component value rather than typed Color.

Example fix

/* before */
a { color: brandcolor; }

/* after */
a { color: crimson; }

Defensive patterns

Strategy: try-catch

Validate before calling

const NAMED = /^(transparent)$/i; // in practice: full CSS named-color list
const COLOR_FN = /^(rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|color|device-cmyk)\(/i;
function looksLikeColor(v: string): boolean {
  const s = v.trim();
  return /^#[0-9a-fA-F]{3,8}$/.test(s) || NAMED.test(s) || COLOR_FN.test(s);
}

Type guard

fn is_literal_color(v: &str) -> bool {
    let t = v.trim();
    t.starts_with('#')
        || t.eq_ignore_ascii_case("transparent")
        || t.ends_with(')') && t.contains('(') // function; refine with a color-function whitelist
}

Try / catch

use swc_css_parser::error::ErrorKind;
match parse_input::<Stylesheet>(src, opts) {
    Ok(ast) => ast,
    Err(e) if matches!(e.kind(), ErrorKind::Expected(_)) && e.message().contains("color") => {
        log::warn!("invalid color at {:?}: {}", e.span(), e.message());
        Stylesheet::default()
    }
    Err(e) => return Err(e.into()),
}

Prevention

Resolve var()/design-token indirections to literal colors before parsing.
Pin a recent swc_core / swc_css_parser version if you rely on modern color syntax (color-mix, relative colors, none).
Spell check color keywords against the CSS named-color list in linting.

When it happens

Trigger: Typed color parsing on tokens like a bare number ('color: 5'), a string, an unknown ident ('color: brandcolor'), or a function that is neither a color function nor device-cmyk (e.g. 'var(--brand)' on versions without var() support in typed color positions).

Common situations: User-defined theme variables passed where a literal <color> is required, typo'd color names, and newer syntax (relative colors, color-mix, none components) fed to an older swc_css_parser build.

Related errors

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