[system] Move stylesheet generator to extendTheme (mui#41446)

pluvio72 · Mar 28, 2024 · bedf79a · bedf79a
1 parent 8f5efee
commit bedf79a
Show file tree

Hide file tree

Showing 24 changed files with 571 additions and 226 deletions.
diff --git a/apps/pigment-css-next-app/next.config.js b/apps/pigment-css-next-app/next.config.js
@@ -81,32 +81,20 @@ const theme = extendTheme({
       },
     },
   },
+  getSelector: function getSelector(colorScheme, css) {
+    if (colorScheme) {
+      return {
+        [`@media (prefers-color-scheme: ${colorScheme})`]: {
+          ':root': css,
+        },
+      };
+    }
+    return ':root';
+  },
 });
-
-// TODO: Fix this from the Material UI side in a separate PR
-theme.palette = theme.colorSchemes.light.palette;
 theme.getColorSchemeSelector = (colorScheme) => {
   return `@media (prefers-color-scheme: ${colorScheme})`;
 };
-const { css: rootCss } = theme.generateCssVars();
-const { css: lightCss } = theme.generateCssVars('light');
-const { css: darkCss } = theme.generateCssVars('dark');
-theme.generateCssVars = (colorScheme) => {
-  if (colorScheme === 'dark') {
-    return {
-      css: darkCss,
-      selector: {
-        '@media (prefers-color-scheme: dark)': {
-          ':root': darkCss,
-        },
-      },
-    };
-  }
-  if (colorScheme === 'light') {
-    return { css: lightCss, selector: ':root' };
-  }
-  return { css: rootCss, selector: ':root' };
-};
 
 /**
  * @type {PigmentOptions}

diff --git a/apps/pigment-css-vite-app/vite.config.ts b/apps/pigment-css-vite-app/vite.config.ts
@@ -4,32 +4,21 @@ import Pages from 'vite-plugin-pages';
 import { pigment } from '@pigment-css/vite-plugin';
 import { experimental_extendTheme as extendTheme } from '@mui/material/styles';
 
-const theme = extendTheme();
-
-// TODO: Fix this from the Material UI side in a separate PR
-theme.palette = theme.colorSchemes.light.palette;
+const theme = extendTheme({
+  getSelector: function getSelector(colorScheme, css) {
+    if (colorScheme) {
+      return {
+        [`@media (prefers-color-scheme: ${colorScheme})`]: {
+          ':root': css,
+        },
+      };
+    }
+    return ':root';
+  },
+});
 theme.getColorSchemeSelector = (colorScheme) => {
   return `@media (prefers-color-scheme: ${colorScheme})`;
 };
-const { css: rootCss } = theme.generateCssVars();
-const { css: lightCss } = theme.generateCssVars('light');
-const { css: darkCss } = theme.generateCssVars('dark');
-theme.generateCssVars = (colorScheme) => {
-  if (colorScheme === 'dark') {
-    return {
-      css: darkCss,
-      selector: {
-        '@media (prefers-color-scheme: dark)': {
-          ':root': darkCss,
-        },
-      },
-    };
-  }
-  if (colorScheme === 'light') {
-    return { css: lightCss, selector: ':root' };
-  }
-  return { css: rootCss, selector: ':root' };
-};
 
 export default defineConfig({
   plugins: [

diff --git a/docs/data/system/experimental-api/css-theme-variables/CreateCssVarsProvider.js b/docs/data/system/experimental-api/css-theme-variables/CreateCssVarsProvider.js
@@ -35,7 +35,7 @@ const darkColorScheme = {
 };
 
 function extendTheme({ cssVarPrefix = 'system-demo' } = {}) {
-  const { vars: themeVars, generateCssVars } = prepareCssVars(
+  const { vars: themeVars, ...params } = prepareCssVars(
     {
       colorSchemes: {
         light: lightColorScheme,
@@ -54,11 +54,11 @@ function extendTheme({ cssVarPrefix = 'system-demo' } = {}) {
     // ... any other objects independent of color-scheme,
     // like fontSizes, spacing etc
     vars: themeVars,
-    generateCssVars,
     palette: {
       ...lightColorScheme.palette,
       colorScheme: 'light',
     },
+    ...params,
   };
 
   return theme;

diff --git a/docs/data/system/experimental-api/css-theme-variables/CreateCssVarsProvider.tsx b/docs/data/system/experimental-api/css-theme-variables/CreateCssVarsProvider.tsx
@@ -13,9 +13,7 @@ type Theme = {
   palette: {
     colorScheme: 'light' | 'dark';
   } & (typeof lightColorScheme)['palette'];
-  vars: ReturnType<typeof prepareCssVars>['vars'];
-  generateCssVars: ReturnType<typeof prepareCssVars>['generateCssVars'];
-};
+} & ReturnType<typeof prepareCssVars>;
 
 const lightColorScheme = {
   palette: {
@@ -47,7 +45,7 @@ const darkColorScheme = {
 };
 
 function extendTheme({ cssVarPrefix = 'system-demo' } = {}) {
-  const { vars: themeVars, generateCssVars } = prepareCssVars(
+  const { vars: themeVars, ...params } = prepareCssVars(
     {
       colorSchemes: {
         light: lightColorScheme,
@@ -66,11 +64,11 @@ function extendTheme({ cssVarPrefix = 'system-demo' } = {}) {
     // ... any other objects independent of color-scheme,
     // like fontSizes, spacing etc
     vars: themeVars,
-    generateCssVars,
     palette: {
       ...lightColorScheme.palette,
       colorScheme: 'light',
     },
+    ...params,
   };
 
   return theme;

diff --git a/packages/mui-joy/src/styles/defaultTheme.test.js b/packages/mui-joy/src/styles/defaultTheme.test.js
@@ -5,6 +5,9 @@ describe('defaultTheme', () => {
   it('the output contains required fields', () => {
     Object.keys(defaultTheme).forEach((field) => {
       expect([
+        'attribute',
+        'colorSchemeSelector',
+        'defaultColorScheme',
         'breakpoints',
         'components',
         'colorSchemes',
@@ -17,6 +20,7 @@ describe('defaultTheme', () => {
         'palette',
         'shadowRing',
         'shadowChannel',
+        'shadowOpacity',
         'getCssVar',
         'spacing',
         'radius',
@@ -30,7 +34,8 @@ describe('defaultTheme', () => {
         'unstable_sxConfig',
         'unstable_sx',
         'shouldSkipGeneratingVar',
-        'generateCssVars',
+        'generateStyleSheets',
+        'generateThemeVars',
         'applyStyles',
       ]).to.includes(field);
     });

diff --git a/packages/mui-joy/src/styles/extendTheme.test.js b/packages/mui-joy/src/styles/extendTheme.test.js
@@ -8,9 +8,12 @@ describe('extendTheme', () => {
     const result = extendTheme();
     Object.keys(result).forEach((field) => {
       expect([
+        'attribute',
         'breakpoints',
+        'colorSchemeSelector',
         'components',
         'colorSchemes',
+        'defaultColorScheme',
         'focus',
         'fontSize',
         'fontFamily',
@@ -20,6 +23,9 @@ describe('extendTheme', () => {
         'spacing',
         'radius',
         'shadow',
+        'shadowRing',
+        'shadowChannel',
+        'shadowOpacity',
         'zIndex',
         'typography',
         'variants',
@@ -30,7 +36,8 @@ describe('extendTheme', () => {
         'unstable_sxConfig',
         'unstable_sx',
         'shouldSkipGeneratingVar',
-        'generateCssVars',
+        'generateStyleSheets',
+        'generateThemeVars',
         'applyStyles',
       ]).to.includes(field);
     });

diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts
@@ -81,6 +81,26 @@ export interface CssVarsThemeOptions extends Partial2Level<ThemeScalesOptions> {
    *        value = 'var(--test)'
    */
   shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
+  /**
+   * If provided, it will be used to create a selector for the color scheme.
+   * This is useful if you want to use class or data-* attributes to apply the color scheme.
+   *
+   * The callback receives the colorScheme with the possible values of:
+   * - undefined: the selector for tokens that are not color scheme dependent
+   * - string: the selector for the color scheme
+   *
+   * @example
+   * // class selector
+   * (colorScheme) => colorScheme !== 'light' ? `.theme-${colorScheme}` : ":root"
+   *
+   * @example
+   * // data-* attribute selector
+   * (colorScheme) => colorScheme !== 'light' ? `[data-theme="${colorScheme}"`] : ":root"
+   */
+  getSelector?: (
+    colorScheme: SupportedColorScheme | undefined,
+    css: Record<string, any>,
+  ) => string | Record<string, any>;
 }
 
 export const createGetCssVar = (cssVarPrefix = 'joy') =>
@@ -94,6 +114,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
     components: componentsInput,
     variants: variantsInput,
     shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar,
+    getSelector,
     ...scalesInput
   } = themeOptions || {};
   const getCssVar = createGetCssVar(cssVarPrefix);
@@ -523,6 +544,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
 
   const theme = {
     colorSchemes,
+    defaultColorScheme: 'light',
     ...mergedScales,
     breakpoints: createBreakpoints(breakpoints ?? {}),
     components: deepmerge(
@@ -565,7 +587,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
     cssVarPrefix,
     getCssVar,
     spacing: createSpacing(spacing),
-  } as unknown as Theme; // Need type casting due to module augmentation inside the repo
+  } as unknown as Theme & { attribute: string; colorSchemeSelector: string }; // Need type casting due to module augmentation inside the repo
 
   /**
    Color channels generation
@@ -610,15 +632,29 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
   const parserConfig = {
     prefix: cssVarPrefix,
     shouldSkipGeneratingVar,
+    getSelector:
+      getSelector ||
+      ((colorScheme) => {
+        if (theme.defaultColorScheme === colorScheme) {
+          return `${theme.colorSchemeSelector}, [${theme.attribute}="${colorScheme}"]`;
+        }
+        if (colorScheme) {
+          return `[${theme.attribute}="${colorScheme}"]`;
+        }
+        return theme.colorSchemeSelector;
+      }),
   };
 
-  const { vars: themeVars, generateCssVars } = prepareCssVars<Theme, ThemeVars>(
+  const { vars, generateThemeVars, generateStyleSheets } = prepareCssVars<Theme, ThemeVars>(
     // @ts-ignore property truDark is missing from colorSchemes
     { colorSchemes, ...mergedScales },
     parserConfig,
   );
-  theme.vars = themeVars;
-  theme.generateCssVars = generateCssVars;
+  theme.attribute = 'data-joy-color-scheme';
+  theme.colorSchemeSelector = ':root';
+  theme.vars = vars;
+  theme.generateThemeVars = generateThemeVars;
+  theme.generateStyleSheets = generateStyleSheets;
   theme.unstable_sxConfig = {
     ...defaultSxConfig,
     ...themeOptions?.unstable_sxConfig,
@@ -630,9 +666,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
     });
   };
   theme.getColorSchemeSelector = (colorScheme: SupportedColorScheme) =>
-    colorScheme === 'light'
-      ? '&'
-      : `&[data-joy-color-scheme="${colorScheme}"], [data-joy-color-scheme="${colorScheme}"] &`;
+    `[${theme.attribute}="${colorScheme}"] &`;
 
   const createVariantInput = { getCssVar, palette: theme.colorSchemes.light.palette };
   theme.variants = deepmerge(
@@ -657,6 +691,10 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
     variantsInput,
   );
 
+  Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(([key, value]) => {
+    // @ts-ignore
+    theme[key] = value;
+  });
   theme.palette = {
     ...theme.colorSchemes.light.palette,
     colorScheme: 'light',

diff --git a/packages/mui-joy/src/styles/types/theme.ts b/packages/mui-joy/src/styles/types/theme.ts
@@ -97,6 +97,7 @@ export type ThemeCssVar = OverridableStringUnion<NormalizeVars<ThemeVars>, Theme
 
 export interface Theme extends ThemeScales, RuntimeColorSystem {
   colorSchemes: Record<DefaultColorScheme | ExtendedColorScheme, ColorSystem>;
+  defaultColorScheme: DefaultColorScheme | ExtendedColorScheme;
   focus: Focus;
   typography: TypographySystem;
   variants: Variants;
@@ -106,10 +107,8 @@ export interface Theme extends ThemeScales, RuntimeColorSystem {
   vars: ThemeVars;
   getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string;
   getColorSchemeSelector: (colorScheme: DefaultColorScheme | ExtendedColorScheme) => string;
-  generateCssVars: (colorScheme?: DefaultColorScheme | ExtendedColorScheme) => {
-    css: Record<string, string | number>;
-    vars: ThemeVars;
-  };
+  generateThemeVars: () => ThemeVars;
+  generateStyleSheets: () => Record<string, any>[];
   /**
    * A function to determine if the key, value should be attached as CSS Variable
    * `keys` is an array that represents the object path keys.

diff --git a/packages/mui-material/src/styles/CssVarsProvider.test.js b/packages/mui-material/src/styles/CssVarsProvider.test.js
@@ -140,9 +140,9 @@ describe('[Material UI] CssVarsProvider', () => {
           primary: 'var(--mui-palette-text-primary)',
           secondary: 'var(--mui-palette-text-secondary)',
           disabled: 'var(--mui-palette-text-disabled)',
+          icon: 'var(--mui-palette-text-icon)',
           primaryChannel: 'var(--mui-palette-text-primaryChannel)',
           secondaryChannel: 'var(--mui-palette-text-secondaryChannel)',
-          icon: 'var(--mui-palette-text-icon)',
         }),
       );
       expect(screen.getByTestId('palette-divider').textContent).to.equal(

diff --git a/packages/mui-material/src/styles/CssVarsProvider.tsx b/packages/mui-material/src/styles/CssVarsProvider.tsx
@@ -10,7 +10,6 @@ import experimental_extendTheme, {
   CssVarsTheme,
 } from './experimental_extendTheme';
 import createTypography from './createTypography';
-import excludeVariablesFromRoot from './excludeVariablesFromRoot';
 import THEME_ID from './identifier';
 
 const defaultTheme = experimental_extendTheme();
@@ -40,7 +39,6 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssV
 
     return newTheme;
   },
-  excludeVariablesFromRoot,
 });
 
 export {

diff --git a/packages/mui-material/src/styles/createGetSelector.ts b/packages/mui-material/src/styles/createGetSelector.ts
@@ -0,0 +1,33 @@
+import excludeVariablesFromRoot from './excludeVariablesFromRoot';
+
+export default <
+    T extends {
+      attribute: string;
+      colorSchemeSelector: string;
+      colorSchemes?: Record<string, any>;
+      defaultColorScheme?: string;
+      cssVarPrefix?: string;
+    },
+  >(
+    theme: T,
+  ) =>
+  (colorScheme: keyof T['colorSchemes'] | undefined, css: Record<string, any>) => {
+    if (theme.defaultColorScheme === colorScheme) {
+      if (colorScheme === 'dark') {
+        const excludedVariables: typeof css = {};
+        excludeVariablesFromRoot(theme.cssVarPrefix).forEach((cssVar) => {
+          excludedVariables[cssVar] = css[cssVar];
+          delete css[cssVar];
+        });
+        return {
+          [`[${theme.attribute}="${String(colorScheme)}"]`]: excludedVariables,
+          [theme.colorSchemeSelector!]: css,
+        };
+      }
+      return `${theme.colorSchemeSelector}, [${theme.attribute}="${String(colorScheme)}"]`;
+    }
+    if (colorScheme) {
+      return `[${theme.attribute}="${String(colorScheme)}"]`;
+    }
+    return theme.colorSchemeSelector;
+  };