amruthpillai/reactive-resume · error · Error

:${name} requires one An+B expression.

Error message

:${name} requires one An+B expression.

What it means

Thrown by compileNth when a :nth-child or :nth-of-type pseudo-class does not contain exactly one Nth AST node with a parsed nth expression. css-tree normally produces this shape for valid An+B syntax; anything else (empty argument list, wrong node type) is rejected.

Source

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

				throw new Error("Selector uses an unknown role.");
			}
			continue;
		}

		if (type && !(SEMANTIC_REGISTRY_V1[type].attributes as readonly string[]).includes(selector.name)) {
			throw new Error(`Attribute ${selector.name} is not available on ${type}.`);
		}
	}
}

function compileNth(
	node: SelectorAst,
	name: "nth-child" | "nth-of-type",
	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);

View on GitHub (pinned to 3a5b12e2a4)

Solutions

1. Provide exactly one An+B expression: :nth-child(2), :nth-child(2n+1), :nth-child(odd), or :nth-child(even).
2. If the step comes from a variable, guard it is non-empty before interpolating.
3. Run the selector through compileSelector and read result.error to catch malformed nth at authoring time.

Example fix

// before
item:nth-child()
// after
item:nth-child(2)

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

const nthIsValid = (selector) => compileSelector(selector).selector !== null;
// rejects :nth-child() / :nth-of-type() with no valid An+B node

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

const result = compileSelector('item:nth-child()');
if (result.selector === null) {
  // result.error === ':nth-child requires one An+B expression.'
  promptUserForNthExpression();
}

When it happens

Trigger: Writing :nth-child() with empty parentheses, :nth-child(,) with a stray comma, or a malformed argument that css-tree parsed into something other than a single Nth node.

Common situations: Hand-typing nth expressions; dynamically templating selector strings with an empty/undefined step value; copy-pasting partial CSS.

Related errors

• Unsupported :${name} expression.
• Invalid :${name} expression.
• :nth-of-type does not accept an of selector.
• :${name} does not accept arguments.
• Selector function nesting is too deep.

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