Skip to content

Selectors with hyphen combinators parse successfully #38

Closed
@ryandabler

Description

@ryandabler

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).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions