amruthpillai/reactive-resume · error · Error

Unsupported pseudo-class :${name}.

Error message

Unsupported pseudo-class :${name}.

What it means

Thrown by compileSimple in the PseudoClassSelector branch when the pseudo-class name is not in the supported set (root, first-child, last-child, only-child, is, where, not, nth-child, nth-of-type). Any other pseudo-class is rejected; this compiler deliberately omits interactive ones like :hover, :focus, and :has.

Source

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

			}
			if (["is", "where", "not"].includes(name)) {
				if (context.depth >= SEMANTIC_CSS_LIMITS_V1.maxFunctionDepth) {
					throw new Error("Selector function nesting is too deep.");
				}
				const nested = childrenOf(node);
				if (nested.length !== 1 || nested[0]?.type !== "SelectorList") {
					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") {

View on GitHub (pinned to 3a5b12e2a4)

Solutions

1. Remove the unsupported pseudo-class.
2. Express the intent structurally: use :is/:where/:not or a combinator instead.
3. Check the supported list before authoring: root, first-child, last-child, only-child, is, where, not, nth-child, nth-of-type.

Example fix

// before
section:hover
// after
section

const SUPPORTED = new Set(['root','first-child','last-child','only-child','is','where','not','nth-child','nth-of-type']);
const pseudoClassIsSupported = (name) => SUPPORTED.has(name.toLowerCase());
// check each pseudo-class name (lowercase) before compiling

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

const result = compileSelector(selector);
if (result.selector === null && result.error.startsWith('Unsupported pseudo-class :')) {
  dropOrReplacePseudoClass(selector);
}

When it happens

Trigger: Writing :hover, :focus, :has(item), :checked, :empty, :disabled, or any pseudo-class outside the supported list.

Common situations: Copying interactive-state CSS from web contexts; using CSS Selectors Level 4 features not yet supported; assuming :has is available.

Related errors

• :${name} does not accept arguments.
• Selector uses an unknown role.
• Attribute ${selector.name} is not available on ${type}.
• :${name} requires one An+B expression.
• Unsupported :${name} expression.

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