fix(core): escape custom classes for query selectors (fix #674)

Author: Grsmto

packages/examples/stories/SimpleBarReact.stories.tsx

@@ -75,6 +75,15 @@ WithScale.args = {
   style: { transform: 'scale(0.5)' },
 };
 
+export const WithCustomClassNames = Template.bind({});
+WithCustomClassNames.args = {
+  ...SimpleBar.defaultOptions,
+  classNames: {
+    contentEl: 'simplebar-content max-h-[1rem]',
+  },
+  style: { height: 300 },
+};
+
 const WithImageTemplate: StoryFn<{
   className: string;
   style: React.CSSProperties;

packages/simplebar-core/src/helpers.ts

@@ -84,7 +84,11 @@ export function removeClasses(el: HTMLElement | null, classes: string): void {
 }
 
 export function classNamesToQuery(classNames: string): string {
-  return `.${classNames.split(' ').join('.')}`;
+  return `.${classNames.split(' ').map(escapeForQuerySelector).join('.')}`;
+}
+
+export function escapeForQuerySelector(str: string): string {
+  return str.replace(/([!\"#$%&'()*+,.\/:;<=>?@\[\\\]^`{|}~])/g, '\\$1');
 }
 
 export function mergeClassNames(