fix getSelector

Author: siriwatknp

packages/mui-material/src/styles/createGetSelector.ts

@@ -33,7 +33,9 @@ export default <
         if (rule === 'media') {
           return {
             ':root': css,
-            '@media (prefers-color-scheme: dark) { :root': excludedVariables,
+            [`@media (prefers-color-scheme: dark)`]: {
+              ':root': excludedVariables,
+            },
           };
         }
         if (rule) {
@@ -49,7 +51,11 @@ export default <
       }
     } else if (colorScheme) {
       if (rule === 'media') {
-        return `@media (prefers-color-scheme: ${String(colorScheme)}) { :root`;
+        return {
+          [`@media (prefers-color-scheme: ${String(colorScheme)})`]: {
+            ':root': css,
+          },
+        };
       }
       if (rule) {
         return rule.replace('%s', String(colorScheme));

packages/mui-material/src/styles/extendTheme.test.js

@@ -721,10 +721,19 @@ describe('extendTheme', () => {
   describe('light and dark color schemes', () => {
     it('should use prefers-color-scheme (`media`) by default', () => {
       const theme = extendTheme({ colorSchemes: { light: true, dark: true } });
-      expect(theme.generateStyleSheets().flatMap((sheet) => Object.keys(sheet))).to.deep.equal([
-        ':root',
-        ':root',
-        '@media (prefers-color-scheme: dark) { :root',
+      const sheets = theme.generateStyleSheets();
+      sinon.assert.match(sheets, [
+        {
+          ':root': sheets[0][':root'], // non-colors related variables
+        },
+        {
+          ':root': sheets[1][':root'], // light palette
+        },
+        {
+          '@media (prefers-color-scheme: dark)': {
+            ':root': sheets[2]['@media (prefers-color-scheme: dark)'][':root'], // dark palette
+          },
+        },
       ]);
     });
 
@@ -742,11 +751,23 @@ describe('extendTheme', () => {
         colorSchemes: { light: true, dark: true },
         defaultColorScheme: 'dark',
       });
-      expect(theme.generateStyleSheets().flatMap((sheet) => Object.keys(sheet))).to.deep.equal([
-        ':root',
-        ':root',
-        '@media (prefers-color-scheme: dark) { :root', // this key targets excluded variables for dark
-        '@media (prefers-color-scheme: light) { :root',
+      const sheets = theme.generateStyleSheets();
+      sinon.assert.match(sheets, [
+        {
+          ':root': sheets[0][':root'], // non-colors related variables
+        },
+        {
+          ':root': sheets[1][':root'], // dark palette
+          '@media (prefers-color-scheme: dark)': {
+            // dark specific variables
+            ':root': sheets[1]['@media (prefers-color-scheme: dark)'][':root'],
+          },
+        },
+        {
+          '@media (prefers-color-scheme: light)': {
+            ':root': sheets[2]['@media (prefers-color-scheme: light)'][':root'], // light palette
+          },
+        },
       ]);
     });
 

packages/mui-system/src/cssVars/prepareCssVars.ts

@@ -48,7 +48,10 @@ function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<
     colorSchemesMap[defaultColorScheme] = { css, vars };
   }
 
-  function defaultGetSelector(colorScheme: keyof T['colorSchemes'] | undefined) {
+  function defaultGetSelector(
+    colorScheme: keyof T['colorSchemes'] | undefined,
+    cssObject: Record<string, any>,
+  ) {
     let rule = selector;
     if (selector === 'class') {
       rule = '.%s';
@@ -66,7 +69,11 @@ function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<
           return ':root';
         }
         const mode = colorSchemes[colorScheme as string]?.palette?.mode || colorScheme;
-        return `@media (prefers-color-scheme: ${mode}) { :root`;
+        return {
+          [`@media (prefers-color-scheme: ${mode})`]: {
+            ':root': cssObject,
+          },
+        };
       }
       if (rule) {
         if (theme.defaultColorScheme === colorScheme) {