@mui/system 5.0.4 → 5.1.1

package/esm/styleFunctionSx/styleFunctionSx.js

@@ -14,53 +14,63 @@ function callIfFn(maybeFn, arg) {
 
 function styleFunctionSx(props) {
   const {
-    sx: styles,
+    sx,
     theme = {}
   } = props || {};
 
-  if (!styles) {
-    return null;
+  if (!sx) {
+    return null; // emotion & styled-components will neglect null
   }
+  /*
+   * Receive `sxInput` as object or callback
+   * and then recursively check keys & values to create media query object styles.
+   * (the result will be used in `styled`)
+   */
 
-  if (typeof styles === 'function') {
-    return styles(theme);
-  }
 
-  if (typeof styles !== 'object') {
-    // value
-    return styles;
-  }
+  function traverse(sxInput) {
+    let sxObject = sxInput;
 
-  const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
-  const breakpointsKeys = Object.keys(emptyBreakpoints);
-  let css = emptyBreakpoints;
-  Object.keys(styles).forEach(styleKey => {
-    const value = callIfFn(styles[styleKey], theme);
+    if (typeof sxInput === 'function') {
+      sxObject = sxInput(theme);
+    } else if (typeof sxInput !== 'object') {
+      // value
+      return sxInput;
+    }
 
-    if (typeof value === 'object') {
-      if (propToStyleFunction[styleKey]) {
-        css = merge(css, getThemeValue(styleKey, value, theme));
-      } else {
-        const breakpointsValues = handleBreakpoints({
-          theme
-        }, value, x => ({
-          [styleKey]: x
-        }));
+    const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
+    const breakpointsKeys = Object.keys(emptyBreakpoints);
+    let css = emptyBreakpoints;
+    Object.keys(sxObject).forEach(styleKey => {
+      const value = callIfFn(sxObject[styleKey], theme);
 
-        if (objectsHaveSameKeys(breakpointsValues, value)) {
-          css[styleKey] = styleFunctionSx({
-            sx: value,
-            theme
-          });
+      if (typeof value === 'object') {
+        if (propToStyleFunction[styleKey]) {
+          css = merge(css, getThemeValue(styleKey, value, theme));
         } else {
-          css = merge(css, breakpointsValues);
+          const breakpointsValues = handleBreakpoints({
+            theme
+          }, value, x => ({
+            [styleKey]: x
+          }));
+
+          if (objectsHaveSameKeys(breakpointsValues, value)) {
+            css[styleKey] = styleFunctionSx({
+              sx: value,
+              theme
+            });
+          } else {
+            css = merge(css, breakpointsValues);
+          }
         }
+      } else {
+        css = merge(css, getThemeValue(styleKey, value, theme));
       }
-    } else {
-      css = merge(css, getThemeValue(styleKey, value, theme));
-    }
-  });
-  return removeUnusedBreakpoints(breakpointsKeys, css);
+    });
+    return removeUnusedBreakpoints(breakpointsKeys, css);
+  }
+
+  return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
 }
 
 styleFunctionSx.filterProps = ['sx'];

package/index.d.ts

@@ -107,6 +107,9 @@ export {
   GlobalStyles,
   GlobalStylesProps,
   StyledEngineProvider,
+  Interpolation,
+  CSSInterpolation,
+  CSSObject,
 } from '@mui/styled-engine';
 
 export * from './style';
@@ -154,3 +157,6 @@ export * from './colorManipulator';
 
 export { default as ThemeProvider } from './ThemeProvider';
 export * from './ThemeProvider';
+
+export { default as unstable_createCssVarsProvider } from './cssVars';
+export * from './cssVars';

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.4
+/** @license MUI v5.1.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -47,7 +47,8 @@ var _exportNames = {
   getThemeProps: true,
   useTheme: true,
   useThemeWithoutDefault: true,
-  ThemeProvider: true
+  ThemeProvider: true,
+  unstable_createCssVarsProvider: true
 };
 Object.defineProperty(exports, "Box", {
   enumerable: true,
@@ -229,6 +230,12 @@ Object.defineProperty(exports, "typography", {
     return _typography.default;
   }
 });
+Object.defineProperty(exports, "unstable_createCssVarsProvider", {
+  enumerable: true,
+  get: function () {
+    return _createCssVarsProvider.default;
+  }
+});
 Object.defineProperty(exports, "unstable_extendSxProp", {
   enumerable: true,
   get: function () {
@@ -450,6 +457,8 @@ Object.keys(_colorManipulator).forEach(function (key) {
 
 var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
 
+var _createCssVarsProvider = _interopRequireDefault(require("./cssVars/createCssVarsProvider"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/legacy/breakpoints.js

@@ -10,12 +10,12 @@ export var values = {
   xs: 0,
   // phone
   sm: 600,
-  // tablets
+  // tablet
   md: 900,
   // small laptop
   lg: 1200,
   // desktop
-  xl: 1536 // large screens
+  xl: 1536 // large screen
 
 };
 var defaultBreakpoints = {
@@ -122,10 +122,40 @@ export function mergeBreakpointsInOrder(breakpointsInput) {
     return deepmerge(prev, next);
   }, {});
   return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
+} // compute base for responsive values; e.g.,
+// [1,2,3] => {xs: true, sm: true, md: true}
+// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
+
+export function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
+  // fixed value
+  if (_typeof(breakpointValues) !== 'object') {
+    return {};
+  }
+
+  var base = {};
+  var breakpointsKeys = Object.keys(themeBreakpoints);
+
+  if (Array.isArray(breakpointValues)) {
+    breakpointsKeys.forEach(function (breakpoint, i) {
+      if (i < breakpointValues.length) {
+        base[breakpoint] = true;
+      }
+    });
+  } else {
+    breakpointsKeys.forEach(function (breakpoint) {
+      if (breakpointValues[breakpoint] != null) {
+        base[breakpoint] = true;
+      }
+    });
+  }
+
+  return base;
 }
 export function resolveBreakpointValues(_ref) {
   var breakpointValues = _ref.values,
-      base = _ref.base;
+      themeBreakpoints = _ref.breakpoints,
+      customBase = _ref.base;
+  var base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
   var keys = Object.keys(base);
 
   if (keys.length === 0) {
@@ -133,14 +163,15 @@ export function resolveBreakpointValues(_ref) {
   }
 
   var previous;
-  return keys.reduce(function (acc, breakpoint) {
-    if (_typeof(breakpointValues) === 'object') {
-      acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
+  return keys.reduce(function (acc, breakpoint, i) {
+    if (Array.isArray(breakpointValues)) {
+      acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
+      previous = i;
     } else {
-      acc[breakpoint] = breakpointValues;
+      acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous] || breakpointValues;
+      previous = breakpoint;
     }
 
-    previous = breakpoint;
     return acc;
   }, {});
 }

package/legacy/createBox.js

@@ -9,7 +9,10 @@ import useTheme from './useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createBox() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var defaultTheme = options.defaultTheme;
+  var defaultTheme = options.defaultTheme,
+      _options$defaultClass = options.defaultClassName,
+      defaultClassName = _options$defaultClass === void 0 ? 'MuiBox-root' : _options$defaultClass,
+      generateClassName = options.generateClassName;
   var BoxRoot = styled('div')(styleFunctionSx);
   var Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
     var theme = useTheme(defaultTheme);
@@ -23,7 +26,7 @@ export default function createBox() {
     return /*#__PURE__*/_jsx(BoxRoot, _extends({
       as: component,
       ref: ref,
-      className: clsx(className, 'MuiBox-root'),
+      className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
       theme: theme
     }, other));
   });
@@ -49,7 +52,7 @@ export default function createBox() {
     /**
      * @ignore
      */
-    sx: PropTypes.object
+    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
   } : void 0;
   return Box;
 }

package/legacy/createStyled.js

@@ -118,7 +118,11 @@ export default function createStyled() {
       }
 
       var expressionsWithDefaultTheme = expressions ? expressions.map(function (stylesArg) {
-        return typeof stylesArg === 'function' ? function (_ref) {
+        // On the server emotion doesn't use React.forwardRef for creating components, so the created
+        // component stays as a function. This condition makes sure that we do not interpolate functions
+        // which are basically components used as a selectors.
+        // eslint-disable-next-line no-underscore-dangle
+        return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? function (_ref) {
           var themeInput = _ref.theme,
               other = _objectWithoutProperties(_ref, ["theme"]);
 

package/legacy/createTheme/createBreakpoints.js

@@ -10,12 +10,12 @@ export default function createBreakpoints(breakpoints) {
     xs: 0,
     // phone
     sm: 600,
-    // tablets
+    // tablet
     md: 900,
     // small laptop
     lg: 1200,
     // desktop
-    xl: 1536 // large screens
+    xl: 1536 // large screen
 
   } : _breakpoints$values,
       _breakpoints$unit = breakpoints.unit,

package/legacy/cssVars/createCssVarsProvider.js

@@ -0,0 +1,215 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { GlobalStyles } from '@mui/styled-engine';
+import { deepmerge } from '@mui/utils';
+import cssVarsParser from './cssVarsParser';
+import ThemeProvider from '../ThemeProvider';
+import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
+import useCurrentColorScheme from './useCurrentColorScheme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function createCssVarsProvider(options) {
+  var _options$theme = options.theme,
+      baseTheme = _options$theme === void 0 ? {} : _options$theme,
+      _options$defaultMode = options.defaultMode,
+      desisgnSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
+      designSystemColorScheme = options.defaultColorScheme,
+      _options$prefix = options.prefix,
+      designSystemPrefix = _options$prefix === void 0 ? '' : _options$prefix,
+      shouldSkipGeneratingVar = options.shouldSkipGeneratingVar;
+
+  if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || _typeof(designSystemColorScheme) === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || _typeof(designSystemColorScheme) === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
+    console.error("MUI: `".concat(designSystemColorScheme, "` does not exist in `theme.colorSchemes`."));
+  }
+
+  var ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
+
+  var useColorScheme = function useColorScheme() {
+    var value = React.useContext(ColorSchemeContext);
+
+    if (!value) {
+      throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `useColorScheme` must be called under <CssVarsProvider />" : _formatMuiErrorMessage(19));
+    }
+
+    return value;
+  };
+
+  function CssVarsProvider(_ref) {
+    var children = _ref.children,
+        _ref$theme = _ref.theme,
+        themeProp = _ref$theme === void 0 ? {} : _ref$theme,
+        _ref$prefix = _ref.prefix,
+        prefix = _ref$prefix === void 0 ? designSystemPrefix : _ref$prefix,
+        _ref$modeStorageKey = _ref.modeStorageKey,
+        modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
+        _ref$attribute = _ref.attribute,
+        attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute,
+        _ref$defaultMode = _ref.defaultMode,
+        defaultMode = _ref$defaultMode === void 0 ? desisgnSystemMode : _ref$defaultMode,
+        _ref$defaultColorSche = _ref.defaultColorScheme,
+        defaultColorScheme = _ref$defaultColorSche === void 0 ? designSystemColorScheme : _ref$defaultColorSche;
+
+    var _baseTheme$colorSchem = baseTheme.colorSchemes,
+        baseColorSchemes = _baseTheme$colorSchem === void 0 ? {} : _baseTheme$colorSchem,
+        restBaseTheme = _objectWithoutProperties(baseTheme, ["colorSchemes"]);
+
+    var _themeProp$colorSchem = themeProp.colorSchemes,
+        colorSchemesProp = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
+        restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes"]);
+
+    var mergedTheme = deepmerge(restBaseTheme, restThemeProp);
+    var colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
+    var allColorSchemes = Object.keys(colorSchemes);
+    var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
+    var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+
+    var _useCurrentColorSchem = useCurrentColorScheme({
+      supportedColorSchemes: allColorSchemes,
+      defaultLightColorScheme: defaultLightColorScheme,
+      defaultDarkColorScheme: defaultDarkColorScheme,
+      modeStorageKey: modeStorageKey,
+      defaultMode: defaultMode
+    }),
+        mode = _useCurrentColorSchem.mode,
+        setMode = _useCurrentColorSchem.setMode,
+        lightColorScheme = _useCurrentColorSchem.lightColorScheme,
+        darkColorScheme = _useCurrentColorSchem.darkColorScheme,
+        colorScheme = _useCurrentColorSchem.colorScheme,
+        setColorScheme = _useCurrentColorSchem.setColorScheme;
+
+    var resolvedColorScheme = function () {
+      if (!colorScheme) {
+        // This scope occurs on the server
+        if (defaultMode === 'dark') {
+          return defaultDarkColorScheme;
+        } // use light color scheme, if default mode is 'light' | 'auto'
+
+
+        return defaultLightColorScheme;
+      }
+
+      return colorScheme;
+    }();
+
+    var _cssVarsParser = cssVarsParser(mergedTheme, {
+      prefix: prefix,
+      basePrefix: designSystemPrefix,
+      shouldSkipGeneratingVar: shouldSkipGeneratingVar
+    }),
+        rootCss = _cssVarsParser.css,
+        rootVars = _cssVarsParser.vars;
+
+    mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+      vars: rootVars
+    });
+    var styleSheet = {};
+    Object.entries(colorSchemes).forEach(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+          key = _ref3[0],
+          scheme = _ref3[1];
+
+      var _cssVarsParser2 = cssVarsParser(scheme, {
+        prefix: prefix,
+        basePrefix: designSystemPrefix,
+        shouldSkipGeneratingVar: shouldSkipGeneratingVar
+      }),
+          css = _cssVarsParser2.css,
+          vars = _cssVarsParser2.vars;
+
+      if (key === resolvedColorScheme) {
+        mergedTheme.vars = _extends({}, mergedTheme.vars, vars);
+      }
+
+      var resolvedDefaultColorScheme = function () {
+        if (typeof defaultColorScheme === 'string') {
+          return defaultColorScheme;
+        }
+
+        if (defaultMode === 'dark') {
+          return defaultColorScheme.dark;
+        }
+
+        return defaultColorScheme.light;
+      }();
+
+      if (key === resolvedDefaultColorScheme) {
+        styleSheet[':root'] = css;
+      } else {
+        styleSheet["[".concat(attribute, "=\"").concat(key, "\"]")] = css;
+      }
+    });
+    React.useEffect(function () {
+      if (colorScheme) {
+        document.body.setAttribute(attribute, colorScheme);
+      }
+    }, [colorScheme, attribute]);
+    return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
+      value: {
+        mode: mode,
+        setMode: setMode,
+        lightColorScheme: lightColorScheme,
+        darkColorScheme: darkColorScheme,
+        colorScheme: colorScheme,
+        setColorScheme: setColorScheme,
+        allColorSchemes: allColorSchemes
+      },
+      children: [/*#__PURE__*/_jsx(GlobalStyles, {
+        styles: {
+          ':root': rootCss
+        }
+      }), /*#__PURE__*/_jsx(GlobalStyles, {
+        styles: styleSheet
+      }), /*#__PURE__*/_jsx(ThemeProvider, {
+        theme: mergedTheme,
+        children: children
+      })]
+    });
+  }
+
+  process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
+    /**
+     * The body attribute name to attach colorScheme.
+     */
+    attribute: PropTypes.string,
+
+    /**
+     * Your component tree.
+     */
+    children: PropTypes.node,
+
+    /**
+     * The initial color scheme used.
+     */
+    defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
+    /**
+     * The initial mode used.
+     */
+    defaultMode: PropTypes.string,
+
+    /**
+     * The key in the local storage used to store current color scheme.
+     */
+    modeStorageKey: PropTypes.string,
+
+    /**
+     * css variable prefix
+     */
+    prefix: PropTypes.string,
+
+    /**
+     * The calculated theme object that will be passed through context.
+     */
+    theme: PropTypes.object
+  } : void 0;
+  return {
+    CssVarsProvider: CssVarsProvider,
+    useColorScheme: useColorScheme,
+    getInitColorSchemeScript: getInitColorSchemeScript
+  };
+}

package/legacy/cssVars/cssVarsParser.js

@@ -0,0 +1,153 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+
+/**
+ * This function create an object from keys, value and then assign to target
+ *
+ * @param {Object} obj : the target object to be assigned
+ * @param {string[]} keys
+ * @param {string | number} value
+ *
+ * @example
+ * const source = {}
+ * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
+ *
+ * @example
+ * const source = { palette: { primary: 'var(--palette-primary)' } }
+ * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
+ */
+export var assignNestedKeys = function assignNestedKeys(obj, keys, value) {
+  var temp = obj;
+  keys.forEach(function (k, index) {
+    if (index === keys.length - 1) {
+      if (temp && _typeof(temp) === 'object') {
+        temp[k] = value;
+      }
+    } else if (temp && _typeof(temp) === 'object') {
+      if (!temp[k]) {
+        temp[k] = {};
+      }
+
+      temp = temp[k];
+    }
+  });
+};
+/**
+ *
+ * @param {Object} obj : source object
+ * @param {Function} callback : a function that will be called when
+ *                   - the deepest key in source object is reached
+ *                   - the value of the deepest key is NOT `undefined` | `null`
+ *
+ * @example
+ * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
+ * // ['palette', 'primary', 'main'] '#000000'
+ */
+
+export var walkObjectDeep = function walkObjectDeep(obj, callback) {
+  function recurse(object) {
+    var parentKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    Object.entries(object).forEach(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          value = _ref2[1];
+
+      if (value !== undefined && value !== null) {
+        if (_typeof(value) === 'object' && Object.keys(value).length > 0) {
+          recurse(value, [].concat(_toConsumableArray(parentKeys), [key]));
+        } else {
+          callback([].concat(_toConsumableArray(parentKeys), [key]), value, object);
+        }
+      }
+    });
+  }
+
+  recurse(obj);
+};
+
+var getCssValue = function getCssValue(keys, value) {
+  if (typeof value === 'number') {
+    if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(function (prop) {
+      return keys.includes(prop);
+    })) {
+      // css property that are unitless
+      return value;
+    }
+
+    return "".concat(value, "px");
+  }
+
+  return value;
+};
+/**
+ * a function that parse theme and return { css, vars }
+ *
+ * @param {Object} theme
+ * @param {{
+ *  prefix?: string,
+ *  basePrefix?: string,
+ *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
+ * }} options.
+ *  `basePrefix`: defined by design system.
+ *  `prefix`: defined by application
+ *
+ *   This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
+ *
+ * @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 } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: '#000000' } }
+ * })
+ *
+ * console.log(css) // { '--fontSize': '12px', '--lineHeight': 1.2, '--palette-primary-500': '#000000' }
+ * console.log(vars) // { fontSize: '--fontSize', lineHeight: '--lineHeight', palette: { primary: { 500: 'var(--palette-primary-500)' } } }
+ */
+
+
+export default function cssVarsParser(theme, options) {
+  var clonedTheme = _extends({}, theme);
+
+  delete clonedTheme.vars; // remove 'vars' from the structure
+
+  var _ref3 = options || {},
+      prefix = _ref3.prefix,
+      _ref3$basePrefix = _ref3.basePrefix,
+      basePrefix = _ref3$basePrefix === void 0 ? '' : _ref3$basePrefix,
+      shouldSkipGeneratingVar = _ref3.shouldSkipGeneratingVar;
+
+  var css = {};
+  var vars = {};
+  walkObjectDeep(clonedTheme, function (keys, val, scope) {
+    if (typeof val === 'string' || typeof val === 'number') {
+      var _value = val;
+
+      if (typeof _value === 'string' && _value.startsWith('var')) {
+        // replace the value of the `scope` object with the prefix or remove basePrefix from the value
+        _value = prefix ? _value.replace(basePrefix, prefix) : _value.replace("".concat(basePrefix, "-"), ''); // scope is the deepest object in the tree, keys is the theme path keys
+
+        scope[keys.slice(-1)[0]] = _value;
+      }
+
+      if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, _value)) {
+        // only create css & var if `shouldSkipGeneratingVar` return false
+        var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));
+
+        _extends(css, _defineProperty({}, cssVar, getCssValue(keys, _value)));
+
+        assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"));
+      }
+    }
+  });
+  return {
+    css: css,
+    vars: vars
+  };
+}