swc-project/swc · error · Error

Invalid attribute matcher value

Error message

Invalid attribute matcher value

What it means

An attribute selector value, when a value is required, must be either an identifier or a quoted string. The token at the value position is neither — most commonly an unquoted number ('[data-count=5]'), because CSS tokenizes digits as Number, which is not accepted here; dimensions and percentages are likewise rejected.

Source

Thrown at crates/swc_css_parser/src/parser/selectors/mod.rs:814

where
    I: ParserInput,
{
    fn parse(&mut self) -> PResult<AttributeSelectorValue> {
        match cur!(self) {
            tok!("ident") => {
                let ident = self.parse()?;

                Ok(AttributeSelectorValue::Ident(ident))
            }
            tok!("string") => {
                let string = self.parse()?;

                Ok(AttributeSelectorValue::Str(string))
            }
            _ => {
                let span = self.input.cur_span();

                return Err(Error::new(span, ErrorKind::InvalidAttrSelectorMatcherValue));
            }
        }
    }
}

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

        match cur!(self) {
            tok!("ident") => {
                let value: Ident = self.parse()?;

                Ok(AttributeSelectorModifier {
                    span: span!(self, span.lo),

View on GitHub (pinned to 5176682b65)

Solutions

1. Quote the value: '[data-count="5"]'
2. Or make it ident-shaped when semantics allow: '[data-count="v5"]' or a leading letter/underscore
3. When building selectors programmatically, always JSON-quote interpolated values

Example fix

/* before */
[data-count=5] { color: red; }
/* after */
[data-count="5"] { color: red; }

// Attribute values must be ident or quoted string
const attrValueOk = /^("[^"]*"|'[^']*'|-?[_A-Za-z][\w-]*)$/;
function checkAttrValue(v) { return attrValueOk.test(v.trim()); }

null-ish: use a builder instead

// JS builder: quote anything not ident-shaped
const valuePart = checkAttrValue(v) ? v : JSON.stringify(v);
const sel = `[${name}${op}${valuePart}]`;

When it happens

Trigger: '[data-count=5]', '[max=100px]', '[tabindex=1]' — unquoted numeric or dimension values in attribute selectors.

Common situations: Numeric HTML attributes (tabindex, aria levels, data-* counters) targeted by hand-written or template-generated CSS; regex-constructed selectors that splice raw numbers without quoting; porting XPath/jQuery habits where unquoted numbers are fine.

Related errors

• Invalid attribute name
• Invalid attribute matcher
• failed to parse `{}` using lexical: {:?}
• Invalid selector
• Expected ident, '*' or '|' delim tokens

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