amruthpillai/reactive-resume · error · Error

Unsupported selector node ${node.type}.

Error message

Unsupported selector node ${node.type}.

What it means

Thrown by compileSimple in the default switch branch when the AST node type is none of TypeSelector, IdSelector, AttributeSelector, PseudoClassSelector, ClassSelector, or PseudoElementSelector. It is the defensive catch-all for unexpected css-tree node shapes inside a compound selector.

Source

Thrown at packages/resume/src/stylesheet/selector.ts:233

					throw new Error(`:${name} requires a selector list.`);
				}
				const selectors = compileSelectorList(nested[0], { depth: context.depth + 1 });
				return { type: "pseudo", name: name as "is" | "where" | "not", selectors };
			}
			if (name === "nth-child" || name === "nth-of-type") {
				if (context.depth >= SEMANTIC_CSS_LIMITS_V1.maxFunctionDepth) {
					throw new Error("Selector function nesting is too deep.");
				}
				return compileNth(node, name, context);
			}
			throw new Error(`Unsupported pseudo-class :${name}.`);
		}
		case "ClassSelector":
			throw new Error("Custom class selectors are not supported.");
		case "PseudoElementSelector":
			throw new Error("Pseudo-elements are not supported.");
		default:
			throw new Error(`Unsupported selector node ${node.type}.`);
	}
}

function compileComplex(node: SelectorAst, context: CompileContext): CompiledComplexSelector {
	if (node.type !== "Selector") throw new Error("Expected a Selector AST.");

	const compounds: CompiledCompoundSelector[] = [];
	const combinators: Combinator[] = [];
	let selectors: CompiledSimpleSelector[] = [];
	for (const child of childrenOf(node)) {
		if (child.type === "Combinator") {
			const name = astName(child) as Combinator;
			if (![" ", ">", "+", "~"].includes(name) || selectors.length === 0) {
				throw new Error("Unsupported or misplaced combinator.");
			}
			validateCompound(selectors);
			compounds.push({ selectors });
			selectors = [];

View on GitHub (pinned to 3a5b12e2a4)

Solutions

1. Pass a plain selector string so css-tree emits only the supported node types.
2. Remove namespace or other exotic selector syntax (e.g. svg|section).
3. Pin and test against the css-tree version declared by @reactive-resume/resume.

Example fix

// before
svg|section
// after
section

import { compileSelector } from '@reactive-resume/resume';

const isSupportedShape = (source) => compileSelector(source).selector !== null;
// prefer passing a string so css-tree emits only the node types compileSimple handles

const isRejected = (r) => r.selector === null && typeof r.error === 'string';

const result = compileSelector(astOrString);
if (result.selector === null && result.error.startsWith('Unsupported selector node ')) {
  removeNamespaceOrExoticSyntax();
}

When it happens

Trigger: A css-tree version emitting a new selector node type, or a hand-constructed/transformed AST containing an unexpected node as a child of a Selector.

Common situations: Upgrading css-tree without re-testing; passing programmatically built CssNode objects; namespace selectors like svg|section that css-tree parses into a node type this compiler does not handle.

Related errors

• Unsupported attribute matcher ${matcher}.
• Attribute selector matcher and value must be used together.
• :${name} requires a selector list.
• Selector uses an unknown role.
• Attribute ${selector.name} is not available on ${type}.

AI-assisted analysis of amruthpillai/reactive-resume@3a5b12e2a4 (2026-08-12). Data as JSON: /api/errors/3eabee9c16ab2849. Report an issue: GitHub.