[@mantine/core] Fix :host selector now working correctly in `cssVar…

…iablesSelector` of MantineProvider (#6404)
mantinedev · Jun 27, 2024 · d43d076 · d43d076
1 parent 828d686
commit d43d076
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/...ges/@mantine/core/src/core/MantineProvider/convert-css-variables/convert-css-variables.ts b/...ges/@mantine/core/src/core/MantineProvider/convert-css-variables/convert-css-variables.ts
@@ -15,15 +15,19 @@ export interface ConvertCSSVariablesInput {
 export function convertCssVariables(input: ConvertCSSVariablesInput, selector: string) {
   const sharedVariables = cssVariablesObjectToString(input.variables);
   const shared = sharedVariables ? wrapWithSelector(selector, sharedVariables) : '';
-
   const dark = cssVariablesObjectToString(input.dark);
+  const light = cssVariablesObjectToString(input.light);
+
   const darkForced = dark
-    ? wrapWithSelector(`${selector}[data-mantine-color-scheme="dark"]`, dark)
+    ? selector === ':host'
+      ? wrapWithSelector(`${selector}([data-mantine-color-scheme="dark"])`, dark)
+      : wrapWithSelector(`${selector}[data-mantine-color-scheme="dark"]`, dark)
     : '';
 
-  const light = cssVariablesObjectToString(input.light);
   const lightForced = light
-    ? wrapWithSelector(`${selector}[data-mantine-color-scheme="light"]`, light)
+    ? selector === ':host'
+      ? wrapWithSelector(`${selector}([data-mantine-color-scheme="light"])`, light)
+      : wrapWithSelector(`${selector}[data-mantine-color-scheme="light"]`, light)
     : '';
 
   return `${shared}${darkForced}${lightForced}`;