Syntax validation - class starting with a number returns incorrect error message

[coxrichuk]

If I attempt to validate a class selector that starts with a number I returned with a message of Parse error: Percent sign is expected

My code looks like:

const selector = '.123';

try {
    const ast = cssTree.parse(selector.trim(), {
        context: 'selector',
        positions: true
    });

} catch (err) {
    throw err; // returns Percent sign is expected
}

Is this expected behavior?

[lahmatiy]

Class names in a selector can't start with a number. If you need a class name starting with a number, you need to escape it (for instance, using CSS.escape('123')). The correct selector would be .\\31 23.

You see the error Percent sign is expected because currently, csstree uses the same parser for selectors and keyframe preludes, where a percentage is acceptable. According to CSS parsing rules, the tokenizer produces a number token from .123, which instructs csstree to expect a percentage.

In short, yes, that's expected behavior.

[lahmatiy]

Relevant to #178