amruthpillai/reactive-resume · error · Error

Custom class selectors are not supported.

Error message

Custom class selectors are not supported.

What it means

Thrown by compileSimple in the ClassSelector branch. This compiler intentionally does not support custom class selectors (.foo) because the resume styling model is semantic: elements are addressed by kind, id, role, or registered attribute, not by author-defined classes.

Source

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

					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") {
			const name = astName(child) as Combinator;
			if (![" ", ">", "+", "~"].includes(name) || selectors.length === 0) {
				throw new Error("Unsupported or misplaced combinator.");

View on GitHub (pinned to 3a5b12e2a4)

Solutions

1. Replace the class with a semantic kind, role, or registered attribute selector.
2. Use [id='...'] for a specific named element.
3. Use a structural pseudo-class or combinator to express the targeting.

Example fix

// before
.section.featured
// after
section[role~='featured-summary']

const hasClassSelector = /\.[^\s>#:+~[.]+/.test(selector);
const isClassFree = (s) => !hasClassSelector(s);
// reject any selector containing a class token before compiling

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

const result = compileSelector(selector);
if (result.selector === null && result.error === 'Custom class selectors are not supported.') {
  mapClassToSemanticSelector(selector);
}

When it happens

Trigger: Writing .custom, .highlight, section.featured, or any class selector.

Common situations: Porting class-based CSS from a traditional stylesheet; habits from Bootstrap/Tailwind-style authoring; generated CSS that emits class hooks.

Related errors

• Selector uses an unknown role.
• Attribute ${selector.name} is not available on ${type}.
• Unknown semantic element ${name}.
• Unknown semantic attribute ${name}.
• :${name} does not accept arguments.

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