swc-project/swc · error · Error

Expected hash, ident (with named color or 'transparent' valu

Error message

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

What it means

Thrown by Parse<AbsoluteColorBase> in swc_css_parser when the current token is neither a hash, an ident, nor a color function. The match arms cover tok!('#'), Token::Ident, and Token::Function gated by is_absolute_color_base_function; anything else - a number ('10'), a string, a comma, an at-keyword, or EOF - falls to the final arm and reports this error with the pre-captured span.

Source

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

        match cur!(self) {
            tok!("#") => Ok(AbsoluteColorBase::HexColor(self.parse()?)),
            Token::Ident { value, .. } => {
                if !(is_named_color(value) || value.as_ref().eq_ignore_ascii_case("transparent")) {
                    let span = self.input.cur_span();

                    return Err(Error::new(
                        span,
                        ErrorKind::Expected("known named color or 'transparent' keyword"),
                    ));
                }

                Ok(AbsoluteColorBase::NamedColorOrTransparent(self.parse()?))
            }
            Token::Function { value, .. } if is_absolute_color_base_function(value) => {
                Ok(AbsoluteColorBase::Function(self.parse()?))
            }
            _ => {
                return Err(Error::new(
                    span,
                    ErrorKind::Expected(
                        "hash, ident (with named color or 'transparent' value) or function (with \
                         color function name) token",
                    ),
                ));
            }
        }
    }
}

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

View on GitHub (pinned to 5176682b65)

Solutions

Put an actual color token (hex, named color ident, or color function) in the position.
Repair the surrounding syntax first (e.g. 'rgb(255 0 0 / 0.5)' not 'rgb(255 0 0 /)').
Validate that each color slot in generated CSS starts with '#', a letter, or a known function name.

Example fix

/* before */
a { color: "red"; }

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

Defensive patterns

Strategy: try-catch

Validate before calling

function colorSlotLooksValid(v: string): boolean {
  const s = v.trim();
  return s.length > 0 && (/^#/.test(s) || /^[a-zA-Z]/.test(s)); // hex, ident, or function
}

Type guard

function isColorTokenStart(v: string): boolean {
  const s = v.trim();
  return s.startsWith('#') || /^[a-zA-Z][a-zA-Z0-9-]*\(?/.test(s);
}

Try / catch

use swc_css_parser::error::ErrorKind;
match parse_input::<Stylesheet>(src, opts) {
    Ok(ast) => ast,
    Err(e) if e.message().contains("hash, ident") => {
        log::warn!("bad color token at {:?}", e.span());
        Stylesheet::default()
    }
    Err(e) => return Err(e.into()),
}

Prevention

Never wrap color values in quotes; strings are not color tokens.
Check for truncation when minifying/consuming streamed CSS (EOF mid-value lands here).
Build color function arguments with a helper that guarantees token order.

When it happens

Trigger: Typed absolute-color parsing on 'color: 5', 'color: "red"' (string token), 'rgb(255 0 0 /' followed by EOF, or an operator token where a color is expected (e.g. a malformed function argument list).

Common situations: Malformed function calls produced by string concatenation (missing hex/ident after a slash or comma), minified CSS truncated mid-value, and feed data where numbers appear in color slots.

Related errors

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