Failure to execute 'querySelector' when custom class contains square brackets

[thalesagapito]

Describe the bug I'm trying to override the default styles using Tailwind CSS's arbitrary value classes, which look like this w-full h-[2rem]. This should simply make an element have width: 100% and height: 2rem, but it actually breaks simplebar when applying it to contentEl.

To Reproduce Steps to reproduce the behavior:

1. Supply a class containing square brackets, like this: new SimpleBar(element, { classNames: { contentEl: 'h-[1rem]' }})
2. Check the console for an error:

Expected behavior The class should be applied normally and simplebar shouldn't break.

Reproducible example https://jsfiddle.net/usfneg90/4/

Additional context Seems like the classNamesToQuery function should be updated to add backslashes before any square brackets to make sure the query selector call works.

Your environment

Software	Version(s)
SimpleBar Vue	^2.3.3
Browser	Chrome Version 116.0.5845.187 (Official Build) (arm64)
npm/Yarn	pnpm 8.5.1
Operating System	Mac OS X Ventura 13.6