From f33d632a164206fc7bdb0c2436664acb46958f60 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Thu, 24 Nov 2022 20:28:55 +0700 Subject: [PATCH] [system] Remove unnecessary parsed theme (#35239) --- .../src/cssVars/createCssVarsProvider.d.ts | 19 +++-- .../src/cssVars/createCssVarsProvider.js | 25 +++---- .../src/cssVars/cssVarsParser.test.ts | 73 ------------------- .../mui-system/src/cssVars/cssVarsParser.ts | 9 +-- 4 files changed, 25 insertions(+), 101 deletions(-) diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts index 808657beebdda9..62eeeb34ee65ec 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts @@ -89,7 +89,7 @@ export default function createCssVarsProvider( /** * Design system default theme * - * The structure inside `theme.colorSchemes[colorScheme]` should be exactly the same in all color schemes because + * - The structure inside `theme.colorSchemes[colorScheme]` should be exactly the same in all color schemes because * those object of the color scheme will be used when the color scheme is active. * * { @@ -99,16 +99,21 @@ export default function createCssVarsProvider( * } * } * - * If colorScheme is 'light', the `lightColorSchemeValues` will be merged to theme as `{ ...theme, ...lightColorSchemeValues }` - * likewise, if colorScheme is 'dark', the `darkColorSchemeValues` will be merged to theme as `{ ...theme, ...darkColorSchemeValues }` + * - If colorScheme is 'light', the `lightColorSchemeValues` will be merged to theme as `{ ...theme, ...lightColorSchemeValues }` + * likewise, if colorScheme is 'dark', the `darkColorSchemeValues` will be merged to theme as `{ ...theme, ...darkColorSchemeValues }` * - * !!! Don't provided the same keys as in colorSchemes to theme because they will be replaced internally when the selected colorScheme is calculated. + * - If the theme contains the same keys as the color scheme, their values will be merged. * Ex. { * colorSchemes: { - * light: { palette: { ... } }, - * dark: { palette: { ... } } + * light: { palette: { primary: { ... } } }, + * dark: { palette: { primary: { ...} } } * }, - * palette: { ... }, // This values will be replaced by the `palette` from the light | dark color scheme at runtime. + * palette: { shared: { ... } } + * } + * + * becomes: { + * colorSchemes: { ... }, + * palette: { shared: { ... }, primary: { ... } } * } */ theme: any; diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js index 076771096c80af..b00b39b644c05d 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js @@ -116,15 +116,14 @@ export default function createCssVarsProvider(options) { })(); // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step) - const { - css: rootCss, - vars: rootVars, - parsedTheme, - } = cssVarsParser(restThemeProp, { prefix: cssVarPrefix, shouldSkipGeneratingVar }); + const { css: rootCss, vars: rootVars } = cssVarsParser(restThemeProp, { + prefix: cssVarPrefix, + shouldSkipGeneratingVar, + }); // 3. Start composing the theme object const theme = { - ...parsedTheme, + ...restThemeProp, components, colorSchemes, cssVarPrefix, @@ -138,26 +137,22 @@ export default function createCssVarsProvider(options) { const defaultColorSchemeStyleSheet = {}; const otherColorSchemesStyleSheet = {}; Object.entries(colorSchemes).forEach(([key, scheme]) => { - const { - css, - vars, - parsedTheme: parsedScheme, - } = cssVarsParser(scheme, { + const { css, vars } = cssVarsParser(scheme, { prefix: cssVarPrefix, shouldSkipGeneratingVar, }); theme.vars = deepmerge(theme.vars, vars); if (key === calculatedColorScheme) { // 4.1 Merge the selected color scheme to the theme - Object.keys(parsedScheme).forEach((schemeKey) => { - if (parsedScheme[schemeKey] && typeof parsedScheme[schemeKey] === 'object') { + Object.keys(scheme).forEach((schemeKey) => { + if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') { // shallow merge the 1st level structure of the theme. theme[schemeKey] = { ...theme[schemeKey], - ...parsedScheme[schemeKey], + ...scheme[schemeKey], }; } else { - theme[schemeKey] = parsedScheme[schemeKey]; + theme[schemeKey] = scheme[schemeKey]; } }); if (theme.palette) { diff --git a/packages/mui-system/src/cssVars/cssVarsParser.test.ts b/packages/mui-system/src/cssVars/cssVarsParser.test.ts index 4a5d9f1ea4c4b6..df124867ac2538 100644 --- a/packages/mui-system/src/cssVars/cssVarsParser.test.ts +++ b/packages/mui-system/src/cssVars/cssVarsParser.test.ts @@ -359,79 +359,6 @@ describe('cssVarsParser', () => { }); }); - describe('parsedObject', () => { - it('creates a new object on every call', () => { - const theme = { - primary: { - 500: '#ffffff', - main: 'var(--palette-500)', - }, - }; - const { parsedTheme } = cssVarsParser(theme, { prefix: 'foo' }); - const { parsedTheme: parsedTheme2 } = cssVarsParser(theme, { prefix: 'bar' }); - expect(theme).not.to.equal(parsedTheme); - expect(parsedTheme).to.deep.equal({ - primary: { - 500: '#ffffff', - main: 'var(--palette-500)', - }, - }); - expect(parsedTheme2).to.deep.equal({ - primary: { - 500: '#ffffff', - main: 'var(--palette-500)', - }, - }); - expect(parsedTheme).not.to.equal(parsedTheme2); - }); - - it('preserve array even if the key is listed in `shouldSkipGeneratingVar`', () => { - const theme = { - breakpoints: { - keys: ['xs', 'sm', 'md', 'lg', 'xl'], - }, - }; - const { parsedTheme } = cssVarsParser(theme, { - shouldSkipGeneratingVar: (keys) => keys[0] === 'breakpoints', - }); - expect(parsedTheme.breakpoints.keys).to.deep.equal(['xs', 'sm', 'md', 'lg', 'xl']); - }); - - it('preserve function value', () => { - const theme = { - palette: { - getContrastText: () => 'foo', - }, - pxToRem: (px: number) => `${px / 16}rem`, - }; - const { parsedTheme } = cssVarsParser(theme); - expect(parsedTheme.palette.getContrastText()).to.equal('foo'); - expect(parsedTheme.pxToRem(16)).to.equal('1rem'); - }); - - it('all key,values remains in parsedTheme even shouldSkipGeneratingVar is provided', () => { - const { parsedTheme } = cssVarsParser( - { - pxToRem: (px: number) => `${px / 16}rem`, - typography: { - body: { - fontSize: 'var(--fontSize-md)', - fontFamily: 'Roboto, var(--fontFamily-fallback)', - }, - }, - }, - { prefix: 'foo', shouldSkipGeneratingVar: (keys) => keys[0] === 'typgoraphy' }, - ); - expect(parsedTheme.pxToRem(14)).to.equal('0.875rem'); - expect(parsedTheme.typography).to.deep.equal({ - body: { - fontSize: 'var(--fontSize-md)', - fontFamily: 'Roboto, var(--fontFamily-fallback)', - }, - }); - }); - }); - it('does nothing if deep value is not string or number', () => { const { css, vars } = cssVarsParser({ fooBar: () => '', diff --git a/packages/mui-system/src/cssVars/cssVarsParser.ts b/packages/mui-system/src/cssVars/cssVarsParser.ts index e7d7e90be4f730..05d53f569a0b5a 100644 --- a/packages/mui-system/src/cssVars/cssVarsParser.ts +++ b/packages/mui-system/src/cssVars/cssVarsParser.ts @@ -107,10 +107,10 @@ const getCssValue = (keys: string[], value: string | number) => { * }} options. * `prefix`: The prefix of the generated CSS variables. This function does not change the value. * - * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme. + * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme). * * @example - * const { css, vars, parsedTheme } = parser({ + * const { css, vars } = parser({ * fontSize: 12, * lineHeight: 1.2, * palette: { primary: { 500: 'var(--color)' } } @@ -118,7 +118,6 @@ const getCssValue = (keys: string[], value: string | number) => { * * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' } * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } } - * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } } */ export default function cssVarsParser>( theme: T, @@ -130,7 +129,6 @@ export default function cssVarsParser>( const { prefix, shouldSkipGeneratingVar } = options || {}; const css = {} as Record; const vars = {} as NestedRecord; - const parsedTheme = {} as T; walkObjectDeep( theme, @@ -144,10 +142,9 @@ export default function cssVarsParser>( assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys); } } - assignNestedKeys(parsedTheme, keys, value, arrayKeys); }, (keys) => keys[0] === 'vars', // skip 'vars/*' paths ); - return { css, vars, parsedTheme }; + return { css, vars }; }