amruthpillai/reactive-resume · error · Error

Unsupported :${name} expression.

Error message

Unsupported :${name} expression.

What it means

Thrown by compileNth when the nth expression is an Identifier keyword but is neither 'odd' nor 'even'. Those are the only bare-keyword nth forms accepted by this compiler.

Source

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

	context: CompileContext,
): CompiledSimpleSelector {
	const nth = childrenOf(node);
	if (nth.length !== 1 || nth[0]?.type !== "Nth" || !nth[0].nth) {
		throw new Error(`:${name} requires one An+B expression.`);
	}

	const expression = nth[0].nth;
	let a = 0;
	let b = 0;
	if (expression.type === "Identifier") {
		const keyword = astName(expression).toLowerCase();
		if (keyword === "odd") {
			a = 2;
			b = 1;
		} else if (keyword === "even") {
			a = 2;
		} else {
			throw new Error(`Unsupported :${name} expression.`);
		}
	} else if (expression.type === "AnPlusB") {
		a = expression.a === null || expression.a === undefined ? 0 : Number(expression.a);
		b = expression.b === null || expression.b === undefined ? 0 : Number(expression.b);
		if (!Number.isInteger(a) || !Number.isInteger(b)) throw new Error(`Invalid :${name} expression.`);
	} else {
		throw new Error(`Unsupported :${name} expression.`);
	}

	if (name === "nth-of-type" && nth[0].selector) throw new Error(":nth-of-type does not accept an of selector.");
	const of = nth[0].selector ? compileSelectorList(nth[0].selector, { depth: context.depth + 1 }) : undefined;
	return { type: "pseudo", name, a, b, ...(of ? { of } : {}) };
}

function compileSimple(node: SelectorAst, context: CompileContext): CompiledSimpleSelector | null {
	switch (node.type) {
		case "TypeSelector": {
			const name = astName(node);

View on GitHub (pinned to 3a5b12e2a4)

Solutions

  1. Use odd or even: :nth-child(odd), :nth-child(even).
  2. For a fixed position use an integer: :nth-child(2).
  3. For a formula use An+B: :nth-child(2n+1).

Example fix

// before
item:nth-child(first)
// after
item:first-child
Defensive patterns

Strategy: validation

Validate before calling

const NTH_KEYWORDS = new Set(['odd', 'even']);
const validNthKeyword = (kw) => NTH_KEYWORDS.has(kw.toLowerCase());
// before emitting :nth-child(<kw>) verify validNthKeyword(kw)

Type guard

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

Try / catch

const result = compileSelector(selector);
if (result.selector === null && result.error.includes('Unsupported :')) {
  suggestOddEvenOrAnPlusB(selector);
}

Prevention

When it happens

Trigger: Writing :nth-child(foo), :nth-child(first), or any identifier other than odd/even inside the parentheses.

Common situations: Confusing nth keywords with structural pseudo-class names like first-child; using a CSS keyword from a different spec.

Related errors


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