css-selector-parser icon indicating copy to clipboard operation
css-selector-parser copied to clipboard

Selectors with hyphen combinators parse successfully

Open ryandabler opened this issue 1 year ago • 0 comments

If I have a selector a - b (using a hyphen character as the combinator), the library's parser will successfully parse this into the following AST:

{
    "type": "Selector",
    "rules": [
        {
            "type": "Rule",
            "items": [
                {
                    "type": "TagName",
                    "name": "a"
                }
            ],
            "nestedRule": {
                "type": "Rule",
                "items": [
                    {
                        "type": "TagName",
                        "name": "-"
                    }
                ],
                "nestedRule": {
                    "type": "Rule",
                    "items": [
                        {
                            "type": "TagName",
                            "name": "b"
                        }
                    ]
                }
            }
        }
    ]
}

This is confusing because if I run that same selector in document.querySelector I get the following error message:

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'a - b' is not a valid selector.

I would expect the library to attempt to parse - as a combinator instead of a tag name (since - isn't a valid CSS identifier). As a user trying to validate CSS selectors to ensure that they are valid before downstream code tries to execute them in the browser I'd expect that the browser's semantics and the library's would be the same (so that I could not parse this selector).

ryandabler avatar Feb 05 '24 22:02 ryandabler