Pagination classes with special characters aren't escaped. Throws a DOMException

[JoshMoreno]

• Swiper Version: 6.5.3.
• Platform/Target and Browser Versions: Chrome, but likely occurs in all browsers.

What You Did

Use tailwind classes in bullet pagination config that contain nonstandard/special characters:

• . when followed by a number. E.g. w-2.5
• :, E.g. sm:w-2
• / E.g. w-1/2

Reproduction + implemented all possible solutions mentioned below.
https://stackblitz.com/edit/swiper-demo-1-default-ndmkbc?devtoolsheight=33&file=index.js

Expected Behavior

It shouldn't error out and work just like you'd expect.

Actual Behavior

It's erroring out with an Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Element': ... is not a valid selector.

Additional Info

I think this might be better if it was in dom7. Since it ultimately goes through dom7's find method, it makes sense to escape there which makes it easier for devs since they don't have to deal with escaping. The only special character that's slightly tricky is ..

Using w-2.5 sm:w-1/2 as an example, swiper js is going to pass .w-2.5.sm:w-1/2 to dom7. Dom7 would then escape:

• . (only if it's immediately followed by a digit)
• :
• /

This should handle most cases and 100% of tailwind.

Dom7 Solution

selector.replace(/(\.(?=\d)|:|\/)/g, "\\$1"); 

Regex demo/test - https://regex101.com/r/DhAilO/1/
Aside from the find method in dom7, I'm not sure if other methods will need refactoring.

Or, Swiper Solution

Solution #1
Escape the known problematic characters. Other than that, it's the same thing that's already in place.

'.' + selector
    .replace(/([\.:\/])/g, "\\$1")
    .replace(/ /g, ".");
}

Solution #2
Less regex. Easier to read. Probably covers more characters than solution 1.
Less browser support and experimental but it meets the requirements listed in swiper's package.json.
https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape

'.' + selector
    .split(' ')
    .map(CSS.escape)
    .join('.');

Other helpful things

Docs about escaping special characters
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#escaping_special_characters

Relevant Lines I Found
https://github.com/nolimits4web/swiper/blob/v6.5.3/src/components/pagination/pagination.js#L221
https://github.com/nolimits4web/swiper/blob/v6.5.3/src/components/pagination/pagination.js#L276
https://github.com/nolimits4web/swiper/blob/v6.5.3/src/components/pagination/pagination.js#L305
https://github.com/nolimits4web/swiper/blob/v6.5.3/src/components/a11y/a11y.js#L76
https://github.com/nolimits4web/swiper/blob/v6.5.3/src/components/a11y/a11y.js#L214
https://github.com/nolimits4web/swiper/blob/v6.5.3/src/components/a11y/a11y.js#L248

[nolimits4web]

Hi! Thanks for your investigation and solutions, appreciate it. I have decided to go with solution 1 for now, at least it looks safest for now :)

[hyvyys]

again an issue in 11.1.4

[gomorizsolt]

yes, i can confirm, we're also experiencing errors when using multiple tailwindcss utilities in pagination classes

# horizontalClass

InvalidCharacterError: Failed to execute 'add' on 'DOMTokenList': The token provided ('foo bar') contains HTML space characters, which are not valid in tokens.

# bulletClass

SyntaxError: Failed to execute 'querySelectorAll' on 'Element': '.h-[6px].w-[6px]' is not a valid selector.

[letoast]

@nolimits4web
Experiencing the same issue on
"swiper": "^11.1.14"

An error occurred: hero-slider, SyntaxError: Failed to execute 'querySelectorAll' on 'Element': '.swiper-pagination-bullet.relative.w-2.h-2.md\:w-3.md\:h-3.rounded-full.bg-white\/20.block.[&\:after]\:w-3.[&\.is-active\:after]\:w-[calc(3rem_*_var(--rate))].[&\.is-active\:after]\:h-full.[&\.is-active\:after]\:bg-white.[&\.is-active]\:h-2.md\:[&\.is-active]\:h-3.[&\.is-active]\:w-12.after\:content-[""].after\:block.after\:absolute.after\:inset-0.after\:h-full.after\:w-full.after\:rounded-lg.after\:top-0.after\:z-[-1].overflow-hidden' is not a valid selector.