[@mantine/styles] Add cache key in classNames prefix (#2434)

Co-authored-by: Yomyer <yomyer@Mac-Studio-de-Yomyer.local>
mantinedev · Sep 15, 2022 · d089971 · d089971
1 parent 8af6b00
commit d089971
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/mantine-styles/src/tss/create-styles.ts b/src/mantine-styles/src/tss/create-styles.ts
@@ -1,7 +1,11 @@
 import type { MantineTheme } from '../theme';
 import type { CSSObject } from './types';
 import { useCss } from './use-css';
-import { useMantineTheme, useMantineProviderStyles } from '../theme/MantineProvider';
+import {
+  useMantineTheme,
+  useMantineProviderStyles,
+  useMantineEmotionCache,
+} from '../theme/MantineProvider';
 import { mergeClassNames } from './utils/merge-class-names/merge-class-names';
 
 type ContextStyles = ReturnType<typeof useMantineProviderStyles>;
@@ -59,6 +63,7 @@ export function createStyles<Key extends string = string, Params = void>(
   function useStyles(params: Params, options?: UseStylesOptions<Key>) {
     const theme = useMantineTheme();
     const context = useMantineProviderStyles(options?.name);
+    const cache = useMantineEmotionCache();
 
     const { css, cx } = useCss();
     const cssObject = getCssObject(theme, params, createRef);
@@ -84,6 +89,7 @@ export function createStyles<Key extends string = string, Params = void>(
         context,
         classNames: options?.classNames,
         name: options?.name,
+        cache,
       }),
       cx,
       theme,

diff --git a/src/mantine-styles/src/tss/utils/merge-class-names/merge-class-names.ts b/src/mantine-styles/src/tss/utils/merge-class-names/merge-class-names.ts
@@ -1,3 +1,4 @@
+import type { EmotionCache } from '@emotion/cache';
 import { useMantineProviderStyles } from '../../../theme/MantineProvider';
 
 interface Input<T extends Record<string, string>> {
@@ -6,6 +7,7 @@ interface Input<T extends Record<string, string>> {
   context: ReturnType<typeof useMantineProviderStyles>;
   classNames: Partial<T>;
   name: string | string[];
+  cache: EmotionCache;
 }
 
 export function mergeClassNames<T extends Record<string, string>>({
@@ -14,6 +16,7 @@ export function mergeClassNames<T extends Record<string, string>>({
   context,
   classNames,
   name,
+  cache,
 }: Input<T>) {
   const contextClassNames = context.reduce<Record<string, string>>((acc, item) => {
     Object.keys(item.classNames).forEach((key) => {
@@ -35,10 +38,10 @@ export function mergeClassNames<T extends Record<string, string>>({
       Array.isArray(name)
         ? name
             .filter(Boolean)
-            .map((part) => `mantine-${part}-${className}`)
+            .map((part) => `${cache?.key || 'mantine'}-${part}-${className}`)
             .join(' ')
         : name
-        ? `mantine-${name}-${className}`
+        ? `${cache?.key || 'mantine'}-${name}-${className}`
         : null
     );
     return acc;