attribute containing ; breaks getCSSSelector()

[danschalow]

Finding a selector for this element causes errors:

<a id="calendlyButton" class="button-primary cc--button-frostbite" width="auto" ;="" href="" onclick="Calendly.initPopupWidget({url: 'REDACTED'});return false;">Kostenlose Erstberatung anfragen</a>

Error

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '[;]' is not a valid selector.

If you look closely, although odd, the attribute ;="" is in the html.

Suggestion
Use CSS.escape to escape the value: https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape_static

[danschalow]

Suggestion: #651

[fczbkk]

Hey @danschalow, thanks for the bug report. I have published v3.6.7, which contains a fix for this issue.

I did not use your pull request, because I used a more generic fix that uses an existing escaping function. You can see my changes in this commit:
52d159e

The CSS Selector Generator should now work properly even on this abomination:

<div aaa:bbb="ccc" ddd;eee="fff" :="ggg" ;="hhh" : ; />

[danschalow]

Good stuff! Thanks for the quick feedback