swc-project/swc · error · Error

Invalid attribute name

Error message

Invalid attribute name

What it means

Inside an attribute selector '[...]' the first thing after '[' (and optional whitespace) must be the attribute name, parsed as a WqName — an identifier with an optional namespace prefix. That parse failed, so the name slot does not hold a valid identifier: it is a number, string, delimiter, or a malformed namespaced name.

Source

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

    I: ParserInput,
{
    fn parse(&mut self) -> PResult<AttributeSelector> {
        let span = self.input.cur_span();

        expect!(self, "[");

        self.input.skip_ws();

        let mut matcher = None;
        let mut value = None;
        let mut modifier = None;

        let name = if let Ok(wq_name) = self.parse() {
            wq_name
        } else {
            let span = self.input.cur_span();

            return Err(Error::new(
                span!(self, span.lo),
                ErrorKind::InvalidAttrSelectorName,
            ));
        };

        self.input.skip_ws();

        if !is!(self, "]") {
            matcher = Some(self.parse()?);

            self.input.skip_ws();

            value = Some(self.parse()?);

            self.input.skip_ws();

            if is!(self, Ident) {
                modifier = Some(self.parse()?);

View on GitHub (pinned to 5176682b65)

Solutions

  1. Write the name unquoted: '[data-foo="value"]'
  2. If the attribute name is exotic, escape it as an identifier instead of quoting: '[\31 33="x"]'
  3. Check for a missing name between '[' and the matcher

Example fix

/* before */
["data-foo"="bar"] { color: red; }
/* after */
[data-foo="bar"] { color: red; }
Defensive patterns

Strategy: validation

Validate before calling

// Attribute names: unquoted ident with optional ns prefix
const attrNameOk = /^(-?[_A-Za-z][\w-]*|\[0-9a-fA-F]{1,6} ?)(\|(-?[_A-Za-z][\w-]*|\*))?$/;

Try / catch

// JS
try { parseSelector(sel, opts); } catch (e) { if (/attribute name/.test(e.message)) report(`unquote or fix the attribute name in: ${sel}`); else throw e; }

Prevention

When it happens

Trigger: '[=foo]' (name missing), '["data-foo"]' (quoted name), '[123]' (numeric name), or '[ns|"x"]' — any attribute selector whose name token is not ident-shaped.

Common situations: Authors quoting the attribute name out of habit (only the VALUE may be quoted); templating that interpolates numeric attribute names; regex-built selectors where the name slot came out empty ('[="checked"]').

Related errors


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