"Failed to execute 'querySelectorAll'" when selector contains special characters

[johndwells]

Bug description

We use Tailwind for our projects, and we also leverage it's JIT feature for composing some dynamic classes on the fly, e.g. text-[1.2rem], !font-bold, etc. Note that this introduces some special characters in the mix such as brackets, exclamation points, periods (which aren't a class selector) etc.

After upgrading from Unpoly 2.7.2 to 3.1.1 (with no other changes to markup), we are getting JS errors when clicking on a link that Unpoly handles, when that link contains classes with at least one of these special characters. For example given this markup:

<a href="path/to/page" class="font-medium text-[.8125rem]">Link</a>

We see this error:

Uncaught (in promise) DOMException: Failed to execute 'querySelectorAll' on 'Document': '.font-medium.text-[.8125rem]' is not a valid selector.

With the following stack trace:

    at https://client.ddev.site:3000/node_modules/.vite/deps/unpoly_unpoly.js?v=0eb2711e:6502:72
    at map (https://client.ddev.site:3000/node_modules/.vite/deps/unpoly_unpoly.js?v=0eb2711e:116:25)
    at Object.flatMap (https://client.ddev.site:3000/node_modules/.vite/deps/unpoly_unpoly.js?v=0eb2711e:485:26)
    at Selector.descendants (https://client.ddev.site:3000/node_modules/.vite/deps/unpoly_unpoly.js?v=0eb2711e:6502:29)
    at getAll (https://client.ddev.site:3000/node_modules/.vite/deps/unpoly_unpoly.js?v=0eb2711e:7556:27)
    at Object.getDumb (https://client.ddev.site:3000/node_modules/.vite/deps/unpoly_unpoly.js?v=0eb2711e:7542:18)
    at FragmentFinder.findInLayer (https://client.ddev.site:3000/node_modules/.vite/deps/unpoly_unpoly.js?v=0eb2711e:3669:32)
    at FragmentFinder.find (https://client.ddev.site:3000/node_modules/.vite/deps/unpoly_unpoly.js?v=0eb2711e:3646:50)
    at Object.getSmart [as get] (https://client.ddev.site:3000/node_modules/.vite/deps/unpoly_unpoly.js?v=0eb2711e:7539:14)
    at isGoodTarget (https://client.ddev.site:3000/node_modules/.vite/deps/unpoly_unpoly.js?v=0eb2711e:7713:85)

That top trace points to line 6783 of the unminified version, .e.g https://www.npmjs.com/package/unpoly:

const results = u.flatMap(this.selectors, selector => root.querySelectorAll(selector));

As you can see, the selector string value is a concatenated list of classes on the link element, but none of the classes themselves are escaped.

As in, I can get the querySelectorAll to work if I escape each of the classes like so:

document.querySelectorAll('.font-medium.text-\\[\\.8125rem\\]');

Reproduction project

Unfortunately I have not been able to replicate this in isolation. I have tried: https://able-icy-sunday.glitch.me/

But if you wanted to reach out to me privately I can invite you to a staging environment for our client project where this can be demonstrated.

The only other difference that may be worth mentioning is that we are integrating Unpoly via npm, we are importing and bundling Unpoly with our app JS, rather than linking to an external version as with Glitch.

[thiagomajesk]

Hi @triskweline! I'm having the same problem with Tailwind CSS. Is a new patch release coming soon by any chance?

[triskweline]

The fix has been released as part of version 3.2.1.

[johndwells]

@triskweline I've stumbled upon this bug again, for Unpoly 3.7.3. In this case, it isn't Tailwind's JIT syntax, but just this variant class:

<a href="path/to/page" up-follow class="3xl:text-34">Page link</a>

It appears the problem is that it starts with a number - if for example it is just xl:text-34 then Unpoly follows the link fine.

[adam12]

I've stumbled upon this bug again

Would you mind opening up a new issue with a repo? That way we don't lose track of it.

[johndwells]

I've been unable to reproduce it in an isolated environment, so I suspect we might have a markup issue that is interfering with the query selector. If I'm able to reproduce consistently, I'll open up a new ticket