swc-project/swc · error · swc_css_parser::error::Error

Invalid selector

Error message

Invalid selector

What it means

A compound selector must contain something: a type selector, a nesting selector ('&'), or at least one subclass selector (id/class/attribute/pseudo). This check is skipped only when the parser is inside a :global()/:local() context (CSS modules), where empty compounds are permitted. Here the compound was completely empty outside that context, so the whole selector is invalid.

Source

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

            subclass_selectors.push(pseudo_element);

            loop {
                if !(is!(self, ":") && !peeked_is!(self, ":")) {
                    break;
                }

                let pseudo_element = SubclassSelector::PseudoClass(self.parse()?);

                subclass_selectors.push(pseudo_element);
            }
        }

        if !self.ctx.in_global_or_local_selector
            && nesting_selector.is_none()
            && type_selector.is_none()
            && subclass_selectors.is_empty()
        {
            return Err(Error::new(start_span, ErrorKind::InvalidSelector));
        }

        let span = span!(self, start_pos);

        Ok(CompoundSelector {
            span,
            nesting_selector,
            type_selector,
            subclass_selectors,
        })
    }
}

impl<I> Parse<TypeSelector> for Parser<I>
where
    I: ParserInput,
{
    fn parse(&mut self) -> PResult<TypeSelector> {

View on GitHub (pinned to 5176682b65)

Solutions

1. Remove dangling/leading combinators or complete the missing compound: '.a > .b {}'
2. Remove empty selectors between commas
3. If you need leading-combinator nesting syntax, enable the nesting-capable parse options or wrap the rule for a nesting-aware toolchain first
4. Validate selector strings with a CSS selector library before handing them to swc

Example fix

/* before */
.a > { color: red; }
/* after */
.a > .b { color: red; }

// Reject empty/dangling selector strings before parse
function selectorLooksNonEmpty(sel) {
  const s = sel.trim();
  return s !== '' && !/^[>+~]|[,>~+\s]\s*$|,\s*,/.test(s);
}

// JS
try { parseSelector(sel, opts); } catch (e) { if (/Invalid selector/.test(e.message)) dropRuleWithWarning(sel); else throw e; }

When it happens

Trigger: A dangling combinator with nothing after it ('.a > { color: red; }'), a leading combinator ('> .b {}') in non-nesting mode, an empty selector between commas ('a, , b {}'), or a rule whose selector is just '{...}' — all outside :local/:global.

Common situations: User-authored CSS from CMS/DB fields; CSS written for postcss-nesting where leading combinators were legal and then fed to a parser context that does not allow them; conditional templating that renders an empty selector string.

Related errors

• Expected ident, '*' or '|' delim tokens
• Expected id, class, attribute or pseudo-class selector
• Invalid attribute name
• failed to parse `{}` using lexical: {:?}
• Expected function or '('

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