What causes "Expected known named color or 'transparent' keyword" in swc-project/swc?

Correct the keyword to a real named color or 'transparent'.

swc-project/swc · error · Error

Expected known named color or 'transparent' keyword

Error message

Expected known named color or 'transparent' keyword

What it means

Thrown by Parse<AbsoluteColorBase> in swc_css_parser when the token IS an ident but it is neither a CSS named color nor the keyword transparent. The impl checks is_named_color(value) || value == 'transparent' (case-insensitive); a typo'd or custom ident such as 'redd', 'primary', or 'grean' fails here with the ident's span.

Source

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

            },
        }
    }
}

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

        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",
                    ),
                ));

View on GitHub (pinned to 5176682b65)

Solutions

Correct the keyword to a real named color or 'transparent'.
Replace token names with their resolved values (#hex or rgb()) before parsing.
If unknown idents must pass through, parse as generic component values instead of typed colors.

Example fix

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

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

Defensive patterns

Strategy: validation

Validate before calling

import namedColors from 'css-named-colors'; // any full list
function isNamedColorOrTransparent(v: string): boolean {
  const s = v.trim().toLowerCase();
  return s === 'transparent' || namedColors.has(s);
}

Type guard

fn is_named_color_or_transparent(v: &str) -> bool {
    v.eq_ignore_ascii_case("transparent") || is_named_color(&v.to_ascii_lowercase().into()) // swc's own list via swc_css_utils
}

Try / catch

use swc_css_parser::error::ErrorKind;
if let Err(e) = parse_input::<Stylesheet>(src, opts) {
    if matches!(e.kind(), ErrorKind::Expected("known named color or 'transparent' keyword")) {
        return Err(format!("unknown color name at {:?}", e.span()).into());
    }
    return Err(e.into());
}

Prevention

Validate color names against the CSS named-color list before emitting CSS.
Treat design-token names as unresolvable by the parser; substitute values at build time.
Lint for common misspellings (redd, grean, bleu) in fixture corpora.

When it happens

Trigger: Typed color parsing of idents like 'color: redd', 'color: primary', 'color: currentColor' is fine but 'color: currentcolor2' fails, and CSS-variable-style names ('--brand' lexes as ident '--brand') in a typed color position.

Common situations: Typos in color keywords, design-token names used verbatim as color values, and assumptions that arbitrary idents fall back gracefully (they do not in typed color parsing).

Related errors

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