@fluentui/styles - npm Package Compare versions

Comparing version 0.61.0 to 0.62.0

dist/commonjs/mergeThemes.js

@@ -28,4 +28,2 @@ "use strict";
 
-var _toCompactArray = require("./toCompactArray");
-
 var _withDebugId = require("./withDebugId");
@@ -142,3 +140,3 @@
           styles: Object.assign({}, styles),
-          debugId: stylesA._debugId
+          debugId: stylesA == null ? void 0 : stylesA._debugId
         }]
@@ -158,3 +156,3 @@ });
           styles: Object.assign({}, styles),
-          debugId: stylesB._debugId
+          debugId: stylesB == null ? void 0 : stylesB._debugId
         }]
@@ -200,26 +198,26 @@ });
 
-var mergeComponentVariables__PROD = function mergeComponentVariables__PROD() {
-  var initial = function initial() {
-    return {};
-  }; // filtering is required as some arguments can be undefined
+var mergeComponentVariables__PROD = function mergeComponentVariables__PROD(variablesA, variablesB) {
+  if (variablesA && variablesB) {
+    return function mergedComponentVariables(siteVariables) {
+      var resolvedVariablesA = typeof variablesA === 'function' ? variablesA(siteVariables) : variablesA || {};
+      var resolvedVariablesB = typeof variablesB === 'function' ? variablesB(siteVariables) : variablesB || {};
+      return (0, _deepmerge.deepmerge)(resolvedVariablesA, resolvedVariablesB);
+    };
+  }
 
-
-  for (var _len = arguments.length, sources = new Array(_len), _key = 0; _key < _len; _key++) {
-    sources[_key] = arguments[_key];
+  if (variablesA) {
+    return typeof variablesA === 'function' ? variablesA : function () {
+      return variablesA || {};
+    };
   }
 
-  var filteredSources = sources.filter(Boolean); // a short circle to avoid calls of deepmerge()
-
-  if (filteredSources.length === 1) {
-    return typeof filteredSources[0] === 'function' ? filteredSources[0] : (0, _callable.callable)(filteredSources[0]);
+  if (variablesB) {
+    return typeof variablesB === 'function' ? variablesB : function () {
+      return variablesB || {};
+    };
   }
 
-  return filteredSources.reduce(function (acc, next) {
-    return function mergeComponentVariables() {
-      var accumulatedVariables = acc.apply(void 0, arguments);
-      var fn = typeof next === 'function' ? next : (0, _callable.callable)(next);
-      var computedComponentVariables = fn.apply(void 0, arguments);
-      return (0, _deepmerge.deepmerge)(accumulatedVariables, computedComponentVariables);
-    };
-  }, initial);
+  return function () {
+    return {};
+  };
 };
@@ -229,9 +227,5 @@
 
-var mergeComponentVariables__DEV = function mergeComponentVariables__DEV() {
-  for (var _len2 = arguments.length, sources = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    sources[_key2] = arguments[_key2];
-  }
-
+var mergeComponentVariables__DEV = function mergeComponentVariables__DEV(variablesA, variablesB) {
   if (!_debugEnabled.isEnabled) {
-    return mergeComponentVariables__PROD.apply(void 0, sources);
+    return mergeComponentVariables__PROD(variablesA, variablesB);
   }
@@ -243,3 +237,3 @@
 
-  return sources.reduce(function (acc, next) {
+  return [variablesA, variablesB].reduce(function (acc, next) {
     return function (siteVariables) {
@@ -281,3 +275,3 @@ var _acc = acc(siteVariables),
 
-var mergeSiteVariables__PROD = function mergeSiteVariables__PROD() {
+var mergeSiteVariables__PROD = function mergeSiteVariables__PROD(siteVariablesA, siteVariablesB) {
   var initial = {
@@ -287,7 +281,11 @@ fontSizes: {}
 
-  for (var _len3 = arguments.length, sources = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-    sources[_key3] = arguments[_key3];
+  if (siteVariablesA && siteVariablesB) {
+    return (0, _deepmerge.deepmerge)(initial, siteVariablesA, siteVariablesB);
   }
 
-  return _deepmerge.deepmerge.apply(void 0, [initial].concat(sources));
+  if (siteVariablesA) {
+    return Object.assign({}, initial, siteVariablesA);
+  }
+
+  return Object.assign({}, initial, siteVariablesB);
 };
@@ -297,9 +295,5 @@
 
-var mergeSiteVariables__DEV = function mergeSiteVariables__DEV() {
-  for (var _len4 = arguments.length, sources = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-    sources[_key4] = arguments[_key4];
-  }
-
+var mergeSiteVariables__DEV = function mergeSiteVariables__DEV(siteVariablesA, siteVariablesB) {
   if (!_debugEnabled.isEnabled) {
-    return mergeSiteVariables__PROD.apply(void 0, sources);
+    return mergeSiteVariables__PROD(siteVariablesA, siteVariablesB);
   }
@@ -310,3 +304,3 @@
   };
-  return sources.reduce(function (acc, next) {
+  return [siteVariablesA, siteVariablesB].reduce(function (acc, next) {
     var _acc$_debug2 = acc._debug,
@@ -351,13 +345,29 @@ _debug = _acc$_debug2 === void 0 ? [] : _acc$_debug2,
 
-var mergeThemeVariables__PROD = function mergeThemeVariables__PROD() {
-  for (var _len5 = arguments.length, sources = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-    sources[_key5] = arguments[_key5];
+var mergeThemeVariables__PROD = function mergeThemeVariables__PROD(themeComponentVariablesA, themeComponentVariablesB) {
+  if (themeComponentVariablesA && themeComponentVariablesB) {
+    var displayNames = _union2.default.apply(void 0, (0, _map2.default)([themeComponentVariablesA, themeComponentVariablesB], _keys2.default));
+
+    return displayNames.reduce(function (componentVariables, displayName) {
+      componentVariables[displayName] = mergeComponentVariables(themeComponentVariablesA[displayName], themeComponentVariablesB[displayName]);
+      return componentVariables;
+    }, {});
   }
 
-  var displayNames = _union2.default.apply(void 0, (0, _map2.default)(sources, _keys2.default));
+  if (themeComponentVariablesA) {
+    return Object.fromEntries(Object.entries(themeComponentVariablesA).map(function (_ref5) {
+      var displayName = _ref5[0],
+          variables = _ref5[1];
+      return [displayName, mergeComponentVariables(undefined, variables)];
+    }));
+  }
 
-  return displayNames.reduce(function (componentVariables, displayName) {
-    componentVariables[displayName] = mergeComponentVariables.apply(void 0, (0, _map2.default)(sources, displayName));
-    return componentVariables;
-  }, {});
+  if (themeComponentVariablesB) {
+    return Object.fromEntries(Object.entries(themeComponentVariablesB).map(function (_ref6) {
+      var displayName = _ref6[0],
+          variables = _ref6[1];
+      return [displayName, mergeComponentVariables(undefined, variables)];
+    }));
+  }
+
+  return {};
 };
@@ -367,17 +377,11 @@
 
-var mergeThemeVariables__DEV = function mergeThemeVariables__DEV() {
-  for (var _len6 = arguments.length, sources = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
-    sources[_key6] = arguments[_key6];
-  }
-
+var mergeThemeVariables__DEV = function mergeThemeVariables__DEV(themeComponentVariablesA, themeComponentVariablesB) {
   if (!_debugEnabled.isEnabled) {
-    return mergeThemeVariables__PROD.apply(void 0, sources);
+    return mergeThemeVariables__PROD(themeComponentVariablesA, themeComponentVariablesB);
   }
 
-  var displayNames = _union2.default.apply(void 0, (0, _map2.default)(sources, _keys2.default));
+  var displayNames = _union2.default.apply(void 0, (0, _map2.default)([themeComponentVariablesA, themeComponentVariablesB], _keys2.default));
 
   return displayNames.reduce(function (componentVariables, displayName) {
-    componentVariables[displayName] = mergeComponentVariables.apply(void 0, (0, _map2.default)(sources, function (source) {
-      return source && (0, _withDebugId.withDebugId)(source[displayName], source._debugId);
-    }));
+    componentVariables[displayName] = mergeComponentVariables(themeComponentVariablesA && (0, _withDebugId.withDebugId)(themeComponentVariablesA[displayName], themeComponentVariablesA._debugId), themeComponentVariablesB && (0, _withDebugId.withDebugId)(themeComponentVariablesB[displayName], themeComponentVariablesB._debugId));
     return componentVariables;
@@ -397,10 +401,38 @@ }, {});
 
-var mergeThemeStyles = function mergeThemeStyles() {
-  var initial = {};
+var mergeThemeStyles__PROD = function mergeThemeStyles__PROD(themeComponentStylesA, themeComponentStylesB) {
+  if (themeComponentStylesA && themeComponentStylesB) {
+    var displayNames = _union2.default.apply(void 0, (0, _map2.default)([themeComponentStylesA, themeComponentStylesB], _keys2.default));
 
-  for (var _len7 = arguments.length, sources = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
-    sources[_key7] = arguments[_key7];
+    return displayNames.reduce(function (themeComponentStyles, displayName) {
+      themeComponentStyles[displayName] = mergeComponentStyles(themeComponentStylesA[displayName], themeComponentStylesB[displayName]);
+      return themeComponentStyles;
+    }, {});
   }
 
-  return sources.reduce(function (themeComponentStyles, next) {
+  if (themeComponentStylesA) {
+    return Object.fromEntries(Object.entries(themeComponentStylesA).map(function (_ref7) {
+      var displayName = _ref7[0],
+          styles = _ref7[1];
+      return [displayName, mergeComponentStyles(undefined, styles)];
+    }));
+  }
+
+  if (themeComponentStylesB) {
+    return Object.fromEntries(Object.entries(themeComponentStylesB).map(function (_ref8) {
+      var displayName = _ref8[0],
+          styles = _ref8[1];
+      return [displayName, mergeComponentStyles(undefined, styles)];
+    }));
+  }
+
+  return {};
+};
+
+var mergeThemeStyles__DEV = function mergeThemeStyles__DEV(componentStylesA, componentStylesB) {
+  if (!_debugEnabled.isEnabled) {
+    return mergeThemeStyles__PROD(componentStylesA, componentStylesB);
+  }
+
+  var initial = {};
+  return [componentStylesA, componentStylesB].reduce(function (themeComponentStyles, next) {
     (0, _forEach2.default)(next, function (stylesByPart, displayName) {
@@ -413,6 +445,7 @@ themeComponentStyles[displayName] = mergeComponentStyles(themeComponentStyles[displayName], (0, _withDebugId.withDebugId)(stylesByPart, next._debugId));
 
+var mergeThemeStyles = process.env.NODE_ENV === 'production' ? mergeThemeStyles__PROD : mergeThemeStyles__DEV;
 exports.mergeThemeStyles = mergeThemeStyles;
 
-var mergeFontFaces = function mergeFontFaces() {
-  return _toCompactArray.toCompactArray.apply(void 0, arguments);
+var mergeFontFaces = function mergeFontFaces(fontFacesA, fontFacesB) {
+  return [].concat(fontFacesA || [], fontFacesB || []);
 };
@@ -422,4 +455,4 @@
 
-var mergeStaticStyles = function mergeStaticStyles() {
-  return _toCompactArray.toCompactArray.apply(void 0, arguments);
+var mergeStaticStyles = function mergeStaticStyles(staticStylesA, staticStylesB) {
+  return [].concat(staticStylesA || [], staticStylesB || []);
 };
@@ -429,8 +462,4 @@
 
-var mergeAnimations = function mergeAnimations() {
-  for (var _len8 = arguments.length, sources = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
-    sources[_key8] = arguments[_key8];
-  }
-
-  return Object.assign.apply(Object, [{}].concat(sources));
+var mergeAnimations = function mergeAnimations(animationsA, animationsB) {
+  return Object.assign({}, animationsA, animationsB);
 };
@@ -441,9 +470,9 @@
 var mergeStyles = function mergeStyles() {
-  for (var _len9 = arguments.length, sources = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
-    sources[_key9] = arguments[_key9];
+  for (var _len = arguments.length, sources = new Array(_len), _key = 0; _key < _len; _key++) {
+    sources[_key] = arguments[_key];
   }
 
   return function () {
-    for (var _len10 = arguments.length, args = new Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
-      args[_key10] = arguments[_key10];
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
     }
@@ -459,19 +488,40 @@
 
-var mergeThemes = function mergeThemes() {
-  for (var _len11 = arguments.length, themes = new Array(_len11), _key11 = 0; _key11 < _len11; _key11++) {
-    themes[_key11] = arguments[_key11];
+var mergeThemes = function mergeThemes(themeA, themeB) {
+  var debugIdA = themeA == null ? void 0 : themeA['_debugId'];
+  var debugIdB = themeB == null ? void 0 : themeB['_debugId'];
+
+  if (themeA && themeB) {
+    return {
+      animations: mergeAnimations(themeA.animations, themeB.animations),
+      componentVariables: mergeThemeVariables((0, _withDebugId.withDebugId)(themeA.componentVariables, debugIdA), (0, _withDebugId.withDebugId)(themeB.componentVariables, debugIdB)),
+      componentStyles: mergeThemeStyles((0, _withDebugId.withDebugId)(themeA.componentStyles, debugIdA), (0, _withDebugId.withDebugId)(themeB.componentStyles, debugIdB)),
+      fontFaces: mergeFontFaces(themeA.fontFaces, themeB.fontFaces),
+      siteVariables: mergeSiteVariables((0, _withDebugId.withDebugId)(themeA.siteVariables, debugIdA), (0, _withDebugId.withDebugId)(themeB.siteVariables, debugIdB)),
+      staticStyles: mergeStaticStyles(themeA.staticStyles, themeB.staticStyles)
+    };
   }
 
-  return themes.reduce(function (acc, next) {
-    if (!next) return acc;
-    var nextDebugId = next['_debugId'];
-    acc.siteVariables = mergeSiteVariables(acc.siteVariables, (0, _withDebugId.withDebugId)(next.siteVariables, nextDebugId));
-    acc.componentVariables = mergeThemeVariables(acc.componentVariables, (0, _withDebugId.withDebugId)(next.componentVariables, nextDebugId));
-    acc.componentStyles = mergeThemeStyles(acc.componentStyles, (0, _withDebugId.withDebugId)(next.componentStyles, nextDebugId));
-    acc.fontFaces = mergeFontFaces.apply(void 0, acc.fontFaces.concat(next.fontFaces || []));
-    acc.staticStyles = mergeStaticStyles.apply(void 0, acc.staticStyles.concat(next.staticStyles || []));
-    acc.animations = mergeAnimations(acc.animations, next.animations);
-    return acc;
-  }, // .reduce() will modify "emptyTheme" object, so we should clone it before actual usage
-  Object.assign({}, emptyTheme));
+  if (themeA) {
+    return {
+      animations: mergeAnimations(undefined, themeA.animations),
+      componentVariables: mergeThemeVariables(undefined, (0, _withDebugId.withDebugId)(themeA.componentVariables, debugIdA)),
+      componentStyles: mergeThemeStyles(undefined, (0, _withDebugId.withDebugId)(themeA.componentStyles, debugIdA)),
+      fontFaces: mergeFontFaces(undefined, themeA.fontFaces),
+      siteVariables: mergeSiteVariables(undefined, (0, _withDebugId.withDebugId)(themeA.siteVariables, debugIdA)),
+      staticStyles: mergeStaticStyles(undefined, themeA.staticStyles)
+    };
+  }
+
+  if (themeB) {
+    return {
+      animations: mergeAnimations(undefined, themeB.animations),
+      componentVariables: mergeThemeVariables(undefined, (0, _withDebugId.withDebugId)(themeB.componentVariables, debugIdB)),
+      componentStyles: mergeThemeStyles(undefined, (0, _withDebugId.withDebugId)(themeB.componentStyles, debugIdB)),
+      fontFaces: mergeFontFaces(undefined, themeB.fontFaces),
+      siteVariables: mergeSiteVariables(undefined, (0, _withDebugId.withDebugId)(themeB.siteVariables, debugIdB)),
+      staticStyles: mergeStaticStyles(undefined, themeB.staticStyles)
+    };
+  }
+
+  return Object.assign({}, emptyTheme);
 };
@@ -478,0 +528,0 @@

dist/dts/src/mergeThemes.d.ts

@@ -12,5 +12,5 @@ import { ComponentSlotStyle, ComponentSlotStylesInput, ComponentSlotStylesPrepared, ComponentVariablesInput, ComponentVariablesPrepared, FontFace, SiteVariablesInput, SiteVariablesPrepared, StaticStyle, ThemeAnimation, ThemeComponentStylesInput, ThemeComponentStylesPrepared, ThemeComponentVariablesInput, ThemeComponentVariablesPrepared, ThemeInput, ThemePrepared } from './types';
  */
-export declare const mergeComponentVariables__PROD: (...sources: ComponentVariablesInput[]) => ComponentVariablesPrepared;
-export declare const mergeComponentVariables__DEV: (...sources: ComponentVariablesInput[]) => ComponentVariablesPrepared;
-export declare const mergeComponentVariables: (...sources: ComponentVariablesInput[]) => ComponentVariablesPrepared;
+export declare const mergeComponentVariables__PROD: (variablesA: ComponentVariablesInput | undefined, variablesB: ComponentVariablesInput | undefined) => ComponentVariablesPrepared;
+export declare const mergeComponentVariables__DEV: typeof mergeComponentVariables__PROD;
+export declare const mergeComponentVariables: (variablesA: ComponentVariablesInput | undefined, variablesB: ComponentVariablesInput | undefined) => ComponentVariablesPrepared;
 /**
@@ -20,5 +20,5 @@ * Site variables can safely be merged at each Provider in the tree.
  */
-export declare const mergeSiteVariables__PROD: (...sources: (SiteVariablesInput | null | undefined)[]) => SiteVariablesPrepared;
-export declare const mergeSiteVariables__DEV: (...sources: (SiteVariablesInput | null | undefined)[]) => SiteVariablesPrepared;
-export declare const mergeSiteVariables: (...sources: (SiteVariablesInput | null | undefined)[]) => SiteVariablesPrepared;
+export declare const mergeSiteVariables__PROD: (siteVariablesA: SiteVariablesInput | undefined, siteVariablesB: SiteVariablesInput | undefined) => SiteVariablesPrepared;
+export declare const mergeSiteVariables__DEV: typeof mergeSiteVariables__PROD;
+export declare const mergeSiteVariables: (siteVariablesA: SiteVariablesInput | undefined, siteVariablesB: SiteVariablesInput | undefined) => SiteVariablesPrepared;
 /**
@@ -31,19 +31,16 @@ * Component variables can be objects, functions, or an array of these.
  */
-export declare const mergeThemeVariables__PROD: (...sources: (ThemeComponentVariablesInput | null | undefined)[]) => ThemeComponentVariablesPrepared;
-export declare const mergeThemeVariables__DEV: (...sources: (ThemeComponentVariablesInput | null | undefined)[]) => ThemeComponentVariablesPrepared;
-export declare const mergeThemeVariables: (...sources: (ThemeComponentVariablesInput | null | undefined)[]) => ThemeComponentVariablesPrepared;
-/**
- * See mergeThemeVariables() description.
- * Component styles adhere to the same pattern as component variables, except
- *   that they return style objects.
- */
-export declare const mergeThemeStyles: (...sources: (ThemeComponentStylesInput | null | undefined)[]) => ThemeComponentStylesPrepared;
-export declare const mergeFontFaces: (...sources: FontFace[]) => FontFace[];
-export declare const mergeStaticStyles: (...sources: StaticStyle[]) => StaticStyle[];
-export declare const mergeAnimations: (...sources: {
+export declare const mergeThemeVariables__PROD: (themeComponentVariablesA: ThemeComponentVariablesInput | undefined, themeComponentVariablesB: ThemeComponentVariablesInput | undefined) => ThemeComponentVariablesPrepared;
+export declare const mergeThemeVariables__DEV: typeof mergeThemeVariables__PROD;
+export declare const mergeThemeVariables: (themeComponentVariablesA: ThemeComponentVariablesInput | undefined, themeComponentVariablesB: ThemeComponentVariablesInput | undefined) => ThemeComponentVariablesPrepared;
+export declare const mergeThemeStyles: (themeComponentStylesA: ThemeComponentStylesInput | undefined, themeComponentStylesB: ThemeComponentStylesInput | undefined) => ThemeComponentStylesPrepared;
+export declare const mergeFontFaces: (fontFacesA: FontFace[] | undefined, fontFacesB: FontFace[] | undefined) => FontFace[];
+export declare const mergeStaticStyles: (staticStylesA: StaticStyle[] | undefined, staticStylesB: StaticStyle[] | undefined) => StaticStyle[];
+export declare const mergeAnimations: (animationsA: {
     [key: string]: ThemeAnimation<{}>;
-}[]) => {
+} | undefined, animationsB: {
     [key: string]: ThemeAnimation<{}>;
+} | undefined) => {
+    [key: string]: ThemeAnimation<{}>;
 };
-export declare const mergeStyles: (...sources: ComponentSlotStyle[]) => (...args: any[]) => any;
-export declare const mergeThemes: (...themes: ThemeInput[]) => ThemePrepared;
+export declare const mergeStyles: (...sources: ComponentSlotStyle[]) => (...args: any[]) => ComponentSlotStyle<{}, {}>;
+export declare const mergeThemes: (themeA: ThemeInput | ThemePrepared | undefined, themeB: ThemeInput | ThemePrepared | undefined) => ThemePrepared;

dist/dts/src/mergeThemes.js

@@ -36,3 +36,2 @@ "use strict";
 var objectKeysToValues_1 = require("./objectKeysToValues");
-var toCompactArray_1 = require("./toCompactArray");
 var withDebugId_1 = require("./withDebugId");
@@ -113,3 +112,3 @@ exports.emptyTheme = {
             // new object required to prevent circular JSON structure error in <Debug />
-            return __assign(__assign({}, styles), { _debug: _debug || [{ styles: __assign({}, styles), debugId: stylesA._debugId }] });
+            return __assign(__assign({}, styles), { _debug: _debug || [{ styles: __assign({}, styles), debugId: stylesA === null || stylesA === void 0 ? void 0 : stylesA._debugId }] });
         };
@@ -119,3 +118,3 @@ var slotB = function (styleParam) {
             // new object required to prevent circular JSON structure error in <Debug />
-            return __assign(__assign({}, styles), { _debug: _debug || [{ styles: __assign({}, styles), debugId: stylesB._debugId }] });
+            return __assign(__assign({}, styles), { _debug: _debug || [{ styles: __assign({}, styles), debugId: stylesB === null || stylesB === void 0 ? void 0 : stylesB._debugId }] });
         };
@@ -147,38 +146,25 @@ if ((stylesA === null || stylesA === void 0 ? void 0 : stylesA[slotName]) && (stylesB === null || stylesB === void 0 ? void 0 : stylesB[slotName])) {
  */
-var mergeComponentVariables__PROD = function () {
-    var sources = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        sources[_i] = arguments[_i];
+var mergeComponentVariables__PROD = function (variablesA, variablesB) {
+    if (variablesA && variablesB) {
+        return function mergedComponentVariables(siteVariables) {
+            var resolvedVariablesA = typeof variablesA === 'function' ? variablesA(siteVariables) : variablesA || {};
+            var resolvedVariablesB = typeof variablesB === 'function' ? variablesB(siteVariables) : variablesB || {};
+            return deepmerge_1.deepmerge(resolvedVariablesA, resolvedVariablesB);
+        };
     }
-    var initial = function () { return ({}); };
-    // filtering is required as some arguments can be undefined
-    var filteredSources = sources.filter(Boolean);
-    // a short circle to avoid calls of deepmerge()
-    if (filteredSources.length === 1) {
-        return typeof filteredSources[0] === 'function' ? filteredSources[0] : callable_1.callable(filteredSources[0]);
+    if (variablesA) {
+        return typeof variablesA === 'function' ? variablesA : function () { return variablesA || {}; };
     }
-    return filteredSources.reduce(function (acc, next) {
-        return function mergeComponentVariables() {
-            var args = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                args[_i] = arguments[_i];
-            }
-            var accumulatedVariables = acc.apply(void 0, args);
-            var fn = typeof next === 'function' ? next : callable_1.callable(next);
-            var computedComponentVariables = fn.apply(void 0, args);
-            return deepmerge_1.deepmerge(accumulatedVariables, computedComponentVariables);
-        };
-    }, initial);
+    if (variablesB) {
+        return typeof variablesB === 'function' ? variablesB : function () { return variablesB || {}; };
+    }
+    return function () { return ({}); };
 };
 exports.mergeComponentVariables__PROD = mergeComponentVariables__PROD;
-var mergeComponentVariables__DEV = function () {
-    var sources = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        sources[_i] = arguments[_i];
-    }
+var mergeComponentVariables__DEV = function (variablesA, variablesB) {
     if (!debugEnabled_1.isEnabled) {
-        return exports.mergeComponentVariables__PROD.apply(void 0, sources);
+        return exports.mergeComponentVariables__PROD(variablesA, variablesB);
     }
     var initial = function () { return ({}); };
-    return sources.reduce(function (acc, next) {
+    return [variablesA, variablesB].reduce(function (acc, next) {
         return function (siteVariables) {
@@ -208,20 +194,18 @@ var _a = acc(siteVariables), _b = _a._debug, _debug = _b === void 0 ? [] : _b, accumulatedVariables = __rest(_a, ["_debug"]);
  */
-var mergeSiteVariables__PROD = function () {
-    var sources = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        sources[_i] = arguments[_i];
-    }
+var mergeSiteVariables__PROD = function (siteVariablesA, siteVariablesB) {
     var initial = {
         fontSizes: {},
     };
-    return deepmerge_1.deepmerge.apply(void 0, __spreadArray([initial], sources));
+    if (siteVariablesA && siteVariablesB) {
+        return deepmerge_1.deepmerge(initial, siteVariablesA, siteVariablesB);
+    }
+    if (siteVariablesA) {
+        return __assign(__assign({}, initial), siteVariablesA);
+    }
+    return __assign(__assign({}, initial), siteVariablesB);
 };
 exports.mergeSiteVariables__PROD = mergeSiteVariables__PROD;
-var mergeSiteVariables__DEV = function () {
-    var sources = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        sources[_i] = arguments[_i];
-    }
+var mergeSiteVariables__DEV = function (siteVariablesA, siteVariablesB) {
     if (!debugEnabled_1.isEnabled) {
-        return exports.mergeSiteVariables__PROD.apply(void 0, sources);
+        return exports.mergeSiteVariables__PROD(siteVariablesA, siteVariablesB);
     }
@@ -231,3 +215,3 @@ var initial = {
     };
-    return sources.reduce(function (acc, next) {
+    return [siteVariablesA, siteVariablesB].reduce(function (acc, next) {
         var _a = acc._debug, _debug = _a === void 0 ? [] : _a, accumulatedSiteVariables = __rest(acc, ["_debug"]);
@@ -250,25 +234,32 @@ var _b = next || {}, _c = _b._debug, computedDebug = _c === void 0 ? undefined : _c, _d = _b._invertedKeys, _invertedKeys = _d === void 0 ? undefined : _d, _e = _b._debugId, _debugId = _e === void 0 ? undefined : _e, nextSiteVariables = __rest(_b, ["_debug", "_invertedKeys", "_debugId"]);
  */
-var mergeThemeVariables__PROD = function () {
-    var sources = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        sources[_i] = arguments[_i];
+var mergeThemeVariables__PROD = function (themeComponentVariablesA, themeComponentVariablesB) {
+    if (themeComponentVariablesA && themeComponentVariablesB) {
+        var displayNames = _.union.apply(_, _.map([themeComponentVariablesA, themeComponentVariablesB], _.keys));
+        return displayNames.reduce(function (componentVariables, displayName) {
+            componentVariables[displayName] = exports.mergeComponentVariables(themeComponentVariablesA[displayName], themeComponentVariablesB[displayName]);
+            return componentVariables;
+        }, {});
     }
-    var displayNames = _.union.apply(_, _.map(sources, _.keys));
-    return displayNames.reduce(function (componentVariables, displayName) {
-        componentVariables[displayName] = exports.mergeComponentVariables.apply(void 0, _.map(sources, displayName));
-        return componentVariables;
-    }, {});
+    if (themeComponentVariablesA) {
+        return Object.fromEntries(Object.entries(themeComponentVariablesA).map(function (_a) {
+            var displayName = _a[0], variables = _a[1];
+            return [displayName, exports.mergeComponentVariables(undefined, variables)];
+        }));
+    }
+    if (themeComponentVariablesB) {
+        return Object.fromEntries(Object.entries(themeComponentVariablesB).map(function (_a) {
+            var displayName = _a[0], variables = _a[1];
+            return [displayName, exports.mergeComponentVariables(undefined, variables)];
+        }));
+    }
+    return {};
 };
 exports.mergeThemeVariables__PROD = mergeThemeVariables__PROD;
-var mergeThemeVariables__DEV = function () {
-    var sources = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        sources[_i] = arguments[_i];
-    }
+var mergeThemeVariables__DEV = function (themeComponentVariablesA, themeComponentVariablesB) {
     if (!debugEnabled_1.isEnabled) {
-        return exports.mergeThemeVariables__PROD.apply(void 0, sources);
+        return exports.mergeThemeVariables__PROD(themeComponentVariablesA, themeComponentVariablesB);
     }
-    var displayNames = _.union.apply(_, _.map(sources, _.keys));
+    var displayNames = _.union.apply(_, _.map([themeComponentVariablesA, themeComponentVariablesB], _.keys));
     return displayNames.reduce(function (componentVariables, displayName) {
-        componentVariables[displayName] = exports.mergeComponentVariables.apply(void 0, _.map(sources, function (source) { return source && withDebugId_1.withDebugId(source[displayName], source._debugId); }));
+        componentVariables[displayName] = exports.mergeComponentVariables(themeComponentVariablesA && withDebugId_1.withDebugId(themeComponentVariablesA[displayName], themeComponentVariablesA._debugId), themeComponentVariablesB && withDebugId_1.withDebugId(themeComponentVariablesB[displayName], themeComponentVariablesB._debugId));
         return componentVariables;
@@ -284,9 +275,30 @@ }, {});
  */
-var mergeThemeStyles = function () {
-    var sources = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        sources[_i] = arguments[_i];
+var mergeThemeStyles__PROD = function (themeComponentStylesA, themeComponentStylesB) {
+    if (themeComponentStylesA && themeComponentStylesB) {
+        var displayNames = _.union.apply(_, _.map([themeComponentStylesA, themeComponentStylesB], _.keys));
+        return displayNames.reduce(function (themeComponentStyles, displayName) {
+            themeComponentStyles[displayName] = exports.mergeComponentStyles(themeComponentStylesA[displayName], themeComponentStylesB[displayName]);
+            return themeComponentStyles;
+        }, {});
     }
+    if (themeComponentStylesA) {
+        return Object.fromEntries(Object.entries(themeComponentStylesA).map(function (_a) {
+            var displayName = _a[0], styles = _a[1];
+            return [displayName, exports.mergeComponentStyles(undefined, styles)];
+        }));
+    }
+    if (themeComponentStylesB) {
+        return Object.fromEntries(Object.entries(themeComponentStylesB).map(function (_a) {
+            var displayName = _a[0], styles = _a[1];
+            return [displayName, exports.mergeComponentStyles(undefined, styles)];
+        }));
+    }
+    return {};
+};
+var mergeThemeStyles__DEV = function (componentStylesA, componentStylesB) {
+    if (!debugEnabled_1.isEnabled) {
+        return mergeThemeStyles__PROD(componentStylesA, componentStylesB);
+    }
     var initial = {};
-    return sources.reduce(function (themeComponentStyles, next) {
+    return [componentStylesA, componentStylesB].reduce(function (themeComponentStyles, next) {
         _.forEach(next, function (stylesByPart, displayName) {
@@ -298,25 +310,13 @@ themeComponentStyles[displayName] = exports.mergeComponentStyles(themeComponentStyles[displayName], withDebugId_1.withDebugId(stylesByPart, next._debugId));
 };
-exports.mergeThemeStyles = mergeThemeStyles;
-var mergeFontFaces = function () {
-    var sources = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        sources[_i] = arguments[_i];
-    }
-    return toCompactArray_1.toCompactArray.apply(void 0, sources);
+exports.mergeThemeStyles = process.env.NODE_ENV === 'production' ? mergeThemeStyles__PROD : mergeThemeStyles__DEV;
+var mergeFontFaces = function (fontFacesA, fontFacesB) {
+    return __spreadArray(__spreadArray([], (fontFacesA || [])), (fontFacesB || []));
 };
 exports.mergeFontFaces = mergeFontFaces;
-var mergeStaticStyles = function () {
-    var sources = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        sources[_i] = arguments[_i];
-    }
-    return toCompactArray_1.toCompactArray.apply(void 0, sources);
+var mergeStaticStyles = function (staticStylesA, staticStylesB) {
+    return __spreadArray(__spreadArray([], (staticStylesA || [])), (staticStylesB || []));
 };
 exports.mergeStaticStyles = mergeStaticStyles;
-var mergeAnimations = function () {
-    var sources = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        sources[_i] = arguments[_i];
-    }
-    return Object.assign.apply(Object, __spreadArray([{}], sources));
+var mergeAnimations = function (animationsA, animationsB) {
+    return __assign(__assign({}, animationsA), animationsB);
 };
@@ -340,20 +340,37 @@ exports.mergeAnimations = mergeAnimations;
 exports.mergeStyles = mergeStyles;
-var mergeThemes = function () {
-    var themes = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        themes[_i] = arguments[_i];
+var mergeThemes = function (themeA, themeB) {
+    var debugIdA = themeA === null || themeA === void 0 ? void 0 : themeA['_debugId'];
+    var debugIdB = themeB === null || themeB === void 0 ? void 0 : themeB['_debugId'];
+    if (themeA && themeB) {
+        return {
+            animations: exports.mergeAnimations(themeA.animations, themeB.animations),
+            componentVariables: exports.mergeThemeVariables(withDebugId_1.withDebugId(themeA.componentVariables, debugIdA), withDebugId_1.withDebugId(themeB.componentVariables, debugIdB)),
+            componentStyles: exports.mergeThemeStyles(withDebugId_1.withDebugId(themeA.componentStyles, debugIdA), withDebugId_1.withDebugId(themeB.componentStyles, debugIdB)),
+            fontFaces: exports.mergeFontFaces(themeA.fontFaces, themeB.fontFaces),
+            siteVariables: exports.mergeSiteVariables(withDebugId_1.withDebugId(themeA.siteVariables, debugIdA), withDebugId_1.withDebugId(themeB.siteVariables, debugIdB)),
+            staticStyles: exports.mergeStaticStyles(themeA.staticStyles, themeB.staticStyles),
+        };
     }
-    return themes.reduce(function (acc, next) {
-        if (!next)
-            return acc;
-        var nextDebugId = next['_debugId'];
-        acc.siteVariables = exports.mergeSiteVariables(acc.siteVariables, withDebugId_1.withDebugId(next.siteVariables, nextDebugId));
-        acc.componentVariables = exports.mergeThemeVariables(acc.componentVariables, withDebugId_1.withDebugId(next.componentVariables, nextDebugId));
-        acc.componentStyles = exports.mergeThemeStyles(acc.componentStyles, withDebugId_1.withDebugId(next.componentStyles, nextDebugId));
-        acc.fontFaces = exports.mergeFontFaces.apply(void 0, __spreadArray(__spreadArray([], acc.fontFaces), (next.fontFaces || [])));
-        acc.staticStyles = exports.mergeStaticStyles.apply(void 0, __spreadArray(__spreadArray([], acc.staticStyles), (next.staticStyles || [])));
-        acc.animations = exports.mergeAnimations(acc.animations, next.animations);
-        return acc;
-    }, __assign({}, exports.emptyTheme));
+    if (themeA) {
+        return {
+            animations: exports.mergeAnimations(undefined, themeA.animations),
+            componentVariables: exports.mergeThemeVariables(undefined, withDebugId_1.withDebugId(themeA.componentVariables, debugIdA)),
+            componentStyles: exports.mergeThemeStyles(undefined, withDebugId_1.withDebugId(themeA.componentStyles, debugIdA)),
+            fontFaces: exports.mergeFontFaces(undefined, themeA.fontFaces),
+            siteVariables: exports.mergeSiteVariables(undefined, withDebugId_1.withDebugId(themeA.siteVariables, debugIdA)),
+            staticStyles: exports.mergeStaticStyles(undefined, themeA.staticStyles),
+        };
+    }
+    if (themeB) {
+        return {
+            animations: exports.mergeAnimations(undefined, themeB.animations),
+            componentVariables: exports.mergeThemeVariables(undefined, withDebugId_1.withDebugId(themeB.componentVariables, debugIdB)),
+            componentStyles: exports.mergeThemeStyles(undefined, withDebugId_1.withDebugId(themeB.componentStyles, debugIdB)),
+            fontFaces: exports.mergeFontFaces(undefined, themeB.fontFaces),
+            siteVariables: exports.mergeSiteVariables(undefined, withDebugId_1.withDebugId(themeB.siteVariables, debugIdB)),
+            staticStyles: exports.mergeStaticStyles(undefined, themeB.staticStyles),
+        };
+    }
+    return __assign({}, exports.emptyTheme);
 };
 exports.mergeThemes = mergeThemes;

dist/dts/src/types.d.ts

@@ -122,8 +122,4 @@ import * as CSS from 'csstype';
     siteVariables: SiteVariablesPrepared;
-    componentVariables: {
-        [key in keyof ThemeComponentVariablesPrepared<ThemeStylesProps>]: ComponentVariablesPrepared;
-    };
-    componentStyles: {
-        [key in keyof ThemeComponentStylesPrepared<ThemeStylesProps>]: ComponentSlotStylesPrepared;
-    };
+    componentVariables: ThemeComponentVariablesPrepared<ThemeStylesProps>;
+    componentStyles: ThemeComponentStylesPrepared<ThemeStylesProps>;
     fontFaces: FontFaces;
@@ -130,0 +126,0 @@ staticStyles: StaticStyles;

dist/dts/test/mergeThemes/mergeComponentStyles-test.js

@@ -51,13 +51,12 @@ "use strict";
         });
-        test('gracefully handles null and undefined', function () {
+        test('gracefully handles undefined', function () {
             var styles = { root: { color: 'black' } };
-            var stylesWithNull = { root: { color: null }, icon: null };
             var stylesWithUndefined = { root: { color: undefined }, icon: undefined };
             expect(function () { return mergeComponentStyles(styles, null); }).not.toThrow();
-            expect(function () { return mergeComponentStyles(styles, stylesWithNull); }).not.toThrow();
             expect(function () { return mergeComponentStyles(null, styles); }).not.toThrow();
-            expect(function () { return mergeComponentStyles(stylesWithNull, styles); }).not.toThrow();
             expect(function () { return mergeComponentStyles(styles, undefined); }).not.toThrow();
+            // @ts-expect-error
             expect(function () { return mergeComponentStyles(styles, stylesWithUndefined); }).not.toThrow();
             expect(function () { return mergeComponentStyles(undefined, styles); }).not.toThrow();
+            // @ts-expect-error
             expect(function () { return mergeComponentStyles(stylesWithUndefined, styles); }).not.toThrow();
@@ -80,3 +79,3 @@ });
             var target = { root: { color: 'red' } };
-            var merged = mergeComponentStyles(target);
+            var merged = mergeComponentStyles(undefined, target);
             expect(merged.root).toBeInstanceOf(Function);
@@ -103,3 +102,10 @@ });
             var merged = mergeComponentStyles(target, source);
-            expect(merged.root()).toMatchObject({
+            var styleFunctionParams = {
+                props: {},
+                variables: {},
+                theme: styles_1.emptyTheme,
+                disableAnimations: false,
+                rtl: false,
+            };
+            expect(merged.root(styleFunctionParams)).toMatchObject({
                 display: 'inline-block',
@@ -106,0 +112,0 @@ color: 'blue',

dist/dts/test/mergeThemes/mergeComponentVariables-test.js

@@ -35,16 +35,7 @@ "use strict";
             expect(mergeComponentVariables({}, {})()).toMatchObject({});
-            expect(mergeComponentVariables(null, null)()).toMatchObject({});
             expect(mergeComponentVariables(undefined, undefined)()).toMatchObject({});
-            expect(mergeComponentVariables(null, undefined)()).toMatchObject({});
-            expect(mergeComponentVariables(undefined, null)()).toMatchObject({});
             expect(mergeComponentVariables({}, undefined)()).toMatchObject({});
             expect(mergeComponentVariables(undefined, {})()).toMatchObject({});
-            expect(mergeComponentVariables({}, null)()).toMatchObject({});
-            expect(mergeComponentVariables(null, {})()).toMatchObject({});
         });
-        test('gracefully handles null and undefined', function () {
-            expect(mergeComponentVariables({ color: 'black' }, null)).not.toThrow();
-            expect(mergeComponentVariables({ color: 'black' }, { color: null })).not.toThrow();
-            expect(mergeComponentVariables(null, { color: 'black' })).not.toThrow();
-            expect(mergeComponentVariables({ color: null }, { color: 'black' })).not.toThrow();
+        test('gracefully handles undefined', function () {
             expect(mergeComponentVariables({ color: 'black' }, undefined)).not.toThrow();
@@ -104,2 +95,3 @@ expect(mergeComponentVariables({ color: 'black' }, { color: undefined })).not.toThrow();
                 },
+                fontSizes: {},
             };
@@ -110,3 +102,3 @@ var target = { a: 1, b: 2, c: 3, d: 4, e: 5 };
             var source3 = { d: 'bS3', dd: 'bbS3' };
-            expect(mergeComponentVariables(target, source1, source2, source3)(siteVariables)).toMatchObject({
+            expect(mergeComponentVariables(mergeComponentVariables(target, source1), mergeComponentVariables(source2, source3))(siteVariables)).toMatchObject({
                 a: 1,
@@ -136,3 +128,3 @@ b: 'bS1',
             var target = function () { return ({}); };
-            expect(mergeThemes_1.mergeComponentVariables__PROD(target)).toBe(target);
+            expect(mergeThemes_1.mergeComponentVariables__PROD(undefined, target)).toBe(target);
             expect(mergeThemes_1.mergeComponentVariables__PROD(target, undefined)).toBe(target);
@@ -198,7 +190,7 @@ });
                 var source2 = styles_1.withDebugId(function (sv) { return ({ c: sv.colors.colorForC, cc: 'bbS2' }); }, 'source2');
-                var merged1 = mergeThemes_1.mergeComponentVariables__DEV(target, source1, source2)(siteVariables);
+                var merged1 = mergeThemes_1.mergeComponentVariables__DEV(target, source1)(siteVariables);
                 var merged2 = mergeThemes_1.mergeComponentVariables__DEV(mergeThemes_1.mergeComponentVariables__DEV(target, source1), source2)(siteVariables);
                 var merged3 = mergeThemes_1.mergeComponentVariables__DEV(target, mergeThemes_1.mergeComponentVariables__DEV(source1, source2))(siteVariables);
                 expect(merged1).toMatchObject({
-                    _debug: [{ debugId: 'target' }, { debugId: 'source1' }, { debugId: 'source2' }],
+                    _debug: [{ debugId: 'target' }, { debugId: 'source1' }],
                 });
@@ -205,0 +197,0 @@ expect(merged2).toMatchObject({

dist/dts/test/mergeThemes/mergeFontFaces-test.js

@@ -6,15 +6,3 @@ "use strict";
     test('returns a compact array', function () {
-        expect(styles_1.mergeFontFaces(undefined, null, {
-            name: 'Segoe UI',
-            paths: ['public/fonts/segoe-ui-regular.woff2'],
-            props: { fontWeight: 400 },
-        }, {
-            name: 'Segoe UI',
-            paths: ['public/fonts/segoe-ui-semibold.woff2'],
-            props: { fontWeight: 600 },
-        }, {
-            name: 'Segoe UI',
-            paths: ['public/fonts/segoe-ui-bold.woff2'],
-            props: { fontWeight: 700 },
-        })).toEqual([
+        expect(styles_1.mergeFontFaces(undefined, [
             {
@@ -35,4 +23,20 @@ name: 'Segoe UI',
             },
+        ])).toEqual([
+            {
+                name: 'Segoe UI',
+                paths: ['public/fonts/segoe-ui-regular.woff2'],
+                props: { fontWeight: 400 },
+            },
+            {
+                name: 'Segoe UI',
+                paths: ['public/fonts/segoe-ui-semibold.woff2'],
+                props: { fontWeight: 600 },
+            },
+            {
+                name: 'Segoe UI',
+                paths: ['public/fonts/segoe-ui-bold.woff2'],
+                props: { fontWeight: 700 },
+            },
         ]);
     });
 });

dist/dts/test/mergeThemes/mergeSiteVariables-test.js

@@ -24,10 +24,5 @@ "use strict";
             expect(mergeSiteVariables({}, {})).toMatchObject({});
-            expect(mergeSiteVariables(null, null)).toMatchObject({});
             expect(mergeSiteVariables(undefined, undefined)).toMatchObject({});
-            expect(mergeSiteVariables(null, undefined)).toMatchObject({});
-            expect(mergeSiteVariables(undefined, null)).toMatchObject({});
             expect(mergeSiteVariables({}, undefined)).toMatchObject({});
             expect(mergeSiteVariables(undefined, {})).toMatchObject({});
-            expect(mergeSiteVariables({}, null)).toMatchObject({});
-            expect(mergeSiteVariables(null, {})).toMatchObject({});
         });
@@ -40,6 +35,2 @@ test('always adds fontSizes', function () {
         test('gracefully handles null and undefined', function () {
-            expect(function () { return mergeSiteVariables({ color: 'black' }, null); }).not.toThrow();
-            expect(function () { return mergeSiteVariables({ color: 'black' }, { color: null }); }).not.toThrow();
-            expect(function () { return mergeSiteVariables(null, { color: 'black' }); }).not.toThrow();
-            expect(function () { return mergeSiteVariables({ color: null }, { color: 'black' }); }).not.toThrow();
             expect(function () { return mergeSiteVariables({ color: 'black' }, undefined); }).not.toThrow();
@@ -46,0 +37,0 @@ expect(function () { return mergeSiteVariables({ color: 'black' }, { color: undefined }); }).not.toThrow();

dist/dts/test/mergeThemes/mergeStaticStyles-test.js

@@ -6,3 +6,3 @@ "use strict";
     test('returns a compact array', function () {
-        expect(styles_1.mergeStaticStyles(undefined, null, '', { body: { color: 'red' } }, '*{box-sizing:border-box;}')).toEqual([
+        expect(styles_1.mergeStaticStyles(undefined, [{ body: { color: 'red' } }, '*{box-sizing:border-box;}'])).toEqual([
             { body: { color: 'red' } },
@@ -9,0 +9,0 @@ '*{box-sizing:border-box;}',

dist/dts/test/mergeThemes/mergeThemes-test.js

@@ -26,10 +26,5 @@ "use strict";
         expect(styles_1.mergeThemes({}, {})).toMatchObject({});
-        expect(styles_1.mergeThemes(null, null)).toMatchObject({});
         expect(styles_1.mergeThemes(undefined, undefined)).toMatchObject({});
-        expect(styles_1.mergeThemes(null, undefined)).toMatchObject({});
-        expect(styles_1.mergeThemes(undefined, null)).toMatchObject({});
         expect(styles_1.mergeThemes({}, undefined)).toMatchObject({});
         expect(styles_1.mergeThemes(undefined, {})).toMatchObject({});
-        expect(styles_1.mergeThemes({}, null)).toMatchObject({});
-        expect(styles_1.mergeThemes(null, {})).toMatchObject({});
     });
@@ -169,14 +164,17 @@ test('gracefully handles merging a theme in with undefined values', function () {
         test('converts merged component parts to functions', function () {
+            var _a, _b;
             var target = { componentStyles: { Button: { root: { color: 'red' } } } };
             var source = { componentStyles: { Icon: { root: { color: 'red' } } } };
             var merged = styles_1.mergeThemes(target, source);
-            expect(merged.componentStyles.Button.root).toBeInstanceOf(Function);
-            expect(merged.componentStyles.Icon.root).toBeInstanceOf(Function);
+            expect((_a = merged.componentStyles.Button) === null || _a === void 0 ? void 0 : _a.root).toBeInstanceOf(Function);
+            expect((_b = merged.componentStyles.Icon) === null || _b === void 0 ? void 0 : _b.root).toBeInstanceOf(Function);
         });
         test('converts target only component parts to functions', function () {
+            var _a;
             var target = { componentStyles: { Button: { root: { color: 'red' } } } };
-            var merged = styles_1.mergeThemes(target);
-            expect(merged.componentStyles.Button.root).toBeInstanceOf(Function);
+            var merged = styles_1.mergeThemes(undefined, target);
+            expect((_a = merged.componentStyles.Button) === null || _a === void 0 ? void 0 : _a.root).toBeInstanceOf(Function);
         });
         test('component part styles are deeply merged', function () {
+            var _a;
             var target = {
@@ -208,3 +206,3 @@ componentStyles: {
             var merged = styles_1.mergeThemes(target, source);
-            expect(merged.componentStyles.Button.root(styleParam)).toMatchObject({
+            expect((_a = merged.componentStyles.Button) === null || _a === void 0 ? void 0 : _a.root(styleParam)).toMatchObject({
                 display: 'inline-block',
@@ -219,2 +217,3 @@ color: 'blue',
         test('functions can accept and apply params', function () {
+            var _a;
             var target = {
@@ -239,3 +238,3 @@ componentStyles: {
             };
-            expect(merged.componentStyles.Button.root(styleParam)).toMatchObject(__assign({ source: true, target: true }, styleParam));
+            expect((_a = merged.componentStyles.Button) === null || _a === void 0 ? void 0 : _a.root(styleParam)).toMatchObject(__assign({ source: true, target: true }, styleParam));
         });
@@ -245,3 +244,3 @@ });
         test('returns a compact array', function () {
-            expect(styles_1.mergeThemes({ fontFaces: null }, { fontFaces: undefined }, {
+            expect(styles_1.mergeThemes({ fontFaces: undefined }, {
                 fontFaces: [
@@ -253,5 +252,2 @@ {
                     },
-                ],
-            }, {
-                fontFaces: [
                     {
@@ -263,10 +259,2 @@ name: 'Segoe UI',
                 ],
-            }, {
-                fontFaces: [
-                    {
-                        name: 'Segoe UI',
-                        paths: ['public/fonts/segoe-ui-bold.woff2'],
-                        props: { fontWeight: 700 },
-                    },
-                ],
             })).toMatchObject({
@@ -284,7 +272,2 @@ fontFaces: [
                     },
-                    {
-                        name: 'Segoe UI',
-                        paths: ['public/fonts/segoe-ui-bold.woff2'],
-                        props: { fontWeight: 700 },
-                    },
                 ],
@@ -296,3 +279,3 @@ });
         test('returns a compact array', function () {
-            expect(styles_1.mergeThemes({ staticStyles: null }, { staticStyles: undefined }, { staticStyles: [''] }, { staticStyles: [{ body: { color: 'red' } }] }, { staticStyles: ['*{box-sizing:border-box;}'] })).toMatchObject({
+            expect(styles_1.mergeThemes({ staticStyles: undefined }, { staticStyles: [{ body: { color: 'red' } }, '*{box-sizing:border-box;}'] })).toMatchObject({
                 staticStyles: [{ body: { color: 'red' } }, '*{box-sizing:border-box;}'],
@@ -368,2 +351,3 @@ });
         test('are saved if debug is enabled', function () {
+            var _a;
             mockIsDebugEnabled(true);
@@ -385,21 +369,9 @@ var target = {
             expect(merged.siteVariables).toMatchObject({
-                _debug: [
-                    {
-                    /* FIXME: unnecessary empty object */
-                    },
-                    { resolved: { varA: 'tVarA' } },
-                    { resolved: { varA: 'sVarA' } },
-                ],
+                _debug: [{ resolved: { varA: 'tVarA' } }, { resolved: { varA: 'sVarA' } }],
             });
             var buttonVariables = merged.componentVariables.Button(merged.siteVariables);
             expect(buttonVariables).toMatchObject({
-                _debug: [
-                    {
-                    /* FIXME: unnecessary empty object */
-                    },
-                    { resolved: { btnVar: 'tBtnVar' } },
-                    { resolved: { btnVar: 'sVarA' } },
-                ],
+                _debug: [{ resolved: { btnVar: 'tBtnVar' } }, { resolved: { btnVar: 'sVarA' } }],
             });
-            var buttonRootStyles = merged.componentStyles.Button.root({
+            var buttonRootStyles = (_a = merged.componentStyles.Button) === null || _a === void 0 ? void 0 : _a.root({
                 variables: buttonVariables,
@@ -412,2 +384,3 @@ });
         test('are not saved if debug is disabled', function () {
+            var _a;
             mockIsDebugEnabled(false);
@@ -431,3 +404,3 @@ var target = {
             expect(buttonVariables._debug).toBe(undefined);
-            var buttonRootStyles = merged.componentStyles.Button.root({
+            var buttonRootStyles = (_a = merged.componentStyles.Button) === null || _a === void 0 ? void 0 : _a.root({
                 variables: buttonVariables,
@@ -438,2 +411,3 @@ });
         test('contain debugId', function () {
+            var _a;
             mockIsDebugEnabled(true);
@@ -455,21 +429,9 @@ var target = styles_1.withDebugId({
             expect(merged.siteVariables).toMatchObject({
-                _debug: [
-                    {
-                    /* FIXME: unnecessary empty object */
-                    },
-                    { debugId: 'target' },
-                    { debugId: 'source' },
-                ],
+                _debug: [{ debugId: 'target' }, { debugId: 'source' }],
             });
             var buttonVariables = merged.componentVariables.Button(merged.siteVariables);
             expect(buttonVariables).toMatchObject({
-                _debug: [
-                    {
-                    /* FIXME: unnecessary empty object */
-                    },
-                    { debugId: 'target' },
-                    { debugId: 'source' },
-                ],
+                _debug: [{ debugId: 'target' }, { debugId: 'source' }],
             });
-            var buttonRootStyles = merged.componentStyles.Button.root({
+            var buttonRootStyles = (_a = merged.componentStyles.Button) === null || _a === void 0 ? void 0 : _a.root({
                 variables: buttonVariables,
@@ -476,0 +438,0 @@ });

dist/dts/test/mergeThemes/mergeThemeVariables-test.js

@@ -43,3 +43,2 @@ "use strict";
             var source2 = { Button: { c: 'cS2' } };
-            var source3 = { Button: { d: 'dS3' } };
             var siteVariables = {
@@ -52,6 +51,6 @@ fontSizes: {},
             };
-            var merged = mergeThemeVariables(target, mergeThemeVariables(source1, source2), source3);
+            var merged = mergeThemeVariables(target, mergeThemeVariables(source1, source2));
             var resolved = _.mapValues(merged, function (cv) { return cv(siteVariables); });
             expect(resolved).toMatchObject({
-                Button: { a: 'a', b: 'b_color', c: 'cS2', d: 'dS3', e: 'e' },
+                Button: { a: 'a', b: 'b_color', c: 'cS2', e: 'e' },
             });
@@ -58,0 +57,0 @@ });

dist/es/mergeThemes.d.ts

@@ -12,5 +12,5 @@ import { ComponentSlotStyle, ComponentSlotStylesInput, ComponentSlotStylesPrepared, ComponentVariablesInput, ComponentVariablesPrepared, FontFace, SiteVariablesInput, SiteVariablesPrepared, StaticStyle, ThemeAnimation, ThemeComponentStylesInput, ThemeComponentStylesPrepared, ThemeComponentVariablesInput, ThemeComponentVariablesPrepared, ThemeInput, ThemePrepared } from './types';
  */
-export declare const mergeComponentVariables__PROD: (...sources: ComponentVariablesInput[]) => ComponentVariablesPrepared;
-export declare const mergeComponentVariables__DEV: (...sources: ComponentVariablesInput[]) => ComponentVariablesPrepared;
-export declare const mergeComponentVariables: (...sources: ComponentVariablesInput[]) => ComponentVariablesPrepared;
+export declare const mergeComponentVariables__PROD: (variablesA: ComponentVariablesInput | undefined, variablesB: ComponentVariablesInput | undefined) => ComponentVariablesPrepared;
+export declare const mergeComponentVariables__DEV: typeof mergeComponentVariables__PROD;
+export declare const mergeComponentVariables: (variablesA: ComponentVariablesInput | undefined, variablesB: ComponentVariablesInput | undefined) => ComponentVariablesPrepared;
 /**
@@ -20,5 +20,5 @@ * Site variables can safely be merged at each Provider in the tree.
  */
-export declare const mergeSiteVariables__PROD: (...sources: (SiteVariablesInput | null | undefined)[]) => SiteVariablesPrepared;
-export declare const mergeSiteVariables__DEV: (...sources: (SiteVariablesInput | null | undefined)[]) => SiteVariablesPrepared;
-export declare const mergeSiteVariables: (...sources: (SiteVariablesInput | null | undefined)[]) => SiteVariablesPrepared;
+export declare const mergeSiteVariables__PROD: (siteVariablesA: SiteVariablesInput | undefined, siteVariablesB: SiteVariablesInput | undefined) => SiteVariablesPrepared;
+export declare const mergeSiteVariables__DEV: typeof mergeSiteVariables__PROD;
+export declare const mergeSiteVariables: (siteVariablesA: SiteVariablesInput | undefined, siteVariablesB: SiteVariablesInput | undefined) => SiteVariablesPrepared;
 /**
@@ -31,19 +31,16 @@ * Component variables can be objects, functions, or an array of these.
  */
-export declare const mergeThemeVariables__PROD: (...sources: (ThemeComponentVariablesInput | null | undefined)[]) => ThemeComponentVariablesPrepared;
-export declare const mergeThemeVariables__DEV: (...sources: (ThemeComponentVariablesInput | null | undefined)[]) => ThemeComponentVariablesPrepared;
-export declare const mergeThemeVariables: (...sources: (ThemeComponentVariablesInput | null | undefined)[]) => ThemeComponentVariablesPrepared;
-/**
- * See mergeThemeVariables() description.
- * Component styles adhere to the same pattern as component variables, except
- *   that they return style objects.
- */
-export declare const mergeThemeStyles: (...sources: (ThemeComponentStylesInput | null | undefined)[]) => ThemeComponentStylesPrepared;
-export declare const mergeFontFaces: (...sources: FontFace[]) => FontFace[];
-export declare const mergeStaticStyles: (...sources: StaticStyle[]) => StaticStyle[];
-export declare const mergeAnimations: (...sources: {
+export declare const mergeThemeVariables__PROD: (themeComponentVariablesA: ThemeComponentVariablesInput | undefined, themeComponentVariablesB: ThemeComponentVariablesInput | undefined) => ThemeComponentVariablesPrepared;
+export declare const mergeThemeVariables__DEV: typeof mergeThemeVariables__PROD;
+export declare const mergeThemeVariables: (themeComponentVariablesA: ThemeComponentVariablesInput | undefined, themeComponentVariablesB: ThemeComponentVariablesInput | undefined) => ThemeComponentVariablesPrepared;
+export declare const mergeThemeStyles: (themeComponentStylesA: ThemeComponentStylesInput | undefined, themeComponentStylesB: ThemeComponentStylesInput | undefined) => ThemeComponentStylesPrepared;
+export declare const mergeFontFaces: (fontFacesA: FontFace[] | undefined, fontFacesB: FontFace[] | undefined) => FontFace[];
+export declare const mergeStaticStyles: (staticStylesA: StaticStyle[] | undefined, staticStylesB: StaticStyle[] | undefined) => StaticStyle[];
+export declare const mergeAnimations: (animationsA: {
     [key: string]: ThemeAnimation<{}>;
-}[]) => {
+} | undefined, animationsB: {
     [key: string]: ThemeAnimation<{}>;
+} | undefined) => {
+    [key: string]: ThemeAnimation<{}>;
 };
-export declare const mergeStyles: (...sources: ComponentSlotStyle[]) => (...args: any[]) => any;
-export declare const mergeThemes: (...themes: ThemeInput[]) => ThemePrepared;
+export declare const mergeStyles: (...sources: ComponentSlotStyle[]) => (...args: any[]) => ComponentSlotStyle<{}, {}>;
+export declare const mergeThemes: (themeA: ThemeInput | ThemePrepared | undefined, themeB: ThemeInput | ThemePrepared | undefined) => ThemePrepared;

dist/es/mergeThemes.js

@@ -19,3 +19,2 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import { objectKeyToValues } from './objectKeysToValues';
-import { toCompactArray } from './toCompactArray';
 import { withDebugId } from './withDebugId';
@@ -118,3 +117,3 @@ export var emptyTheme = {
           styles: Object.assign({}, styles),
-          debugId: stylesA._debugId
+          debugId: stylesA == null ? void 0 : stylesA._debugId
         }]
@@ -134,3 +133,3 @@ });
           styles: Object.assign({}, styles),
-          debugId: stylesB._debugId
+          debugId: stylesB == null ? void 0 : stylesB._debugId
         }]
@@ -173,34 +172,30 @@ });
 
-export var mergeComponentVariables__PROD = function mergeComponentVariables__PROD() {
-  var initial = function initial() {
-    return {};
-  }; // filtering is required as some arguments can be undefined
-
-
-  for (var _len = arguments.length, sources = new Array(_len), _key = 0; _key < _len; _key++) {
-    sources[_key] = arguments[_key];
+export var mergeComponentVariables__PROD = function mergeComponentVariables__PROD(variablesA, variablesB) {
+  if (variablesA && variablesB) {
+    return function mergedComponentVariables(siteVariables) {
+      var resolvedVariablesA = typeof variablesA === 'function' ? variablesA(siteVariables) : variablesA || {};
+      var resolvedVariablesB = typeof variablesB === 'function' ? variablesB(siteVariables) : variablesB || {};
+      return deepmerge(resolvedVariablesA, resolvedVariablesB);
+    };
   }
 
-  var filteredSources = sources.filter(Boolean); // a short circle to avoid calls of deepmerge()
-
-  if (filteredSources.length === 1) {
-    return typeof filteredSources[0] === 'function' ? filteredSources[0] : callable(filteredSources[0]);
+  if (variablesA) {
+    return typeof variablesA === 'function' ? variablesA : function () {
+      return variablesA || {};
+    };
   }
 
-  return filteredSources.reduce(function (acc, next) {
-    return function mergeComponentVariables() {
-      var accumulatedVariables = acc.apply(void 0, arguments);
-      var fn = typeof next === 'function' ? next : callable(next);
-      var computedComponentVariables = fn.apply(void 0, arguments);
-      return deepmerge(accumulatedVariables, computedComponentVariables);
+  if (variablesB) {
+    return typeof variablesB === 'function' ? variablesB : function () {
+      return variablesB || {};
     };
-  }, initial);
-};
-export var mergeComponentVariables__DEV = function mergeComponentVariables__DEV() {
-  for (var _len2 = arguments.length, sources = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    sources[_key2] = arguments[_key2];
   }
 
+  return function () {
+    return {};
+  };
+};
+export var mergeComponentVariables__DEV = function mergeComponentVariables__DEV(variablesA, variablesB) {
   if (!isDebugEnabled) {
-    return mergeComponentVariables__PROD.apply(void 0, sources);
+    return mergeComponentVariables__PROD(variablesA, variablesB);
   }
@@ -212,3 +207,3 @@
 
-  return sources.reduce(function (acc, next) {
+  return [variablesA, variablesB].reduce(function (acc, next) {
     return function (siteVariables) {
@@ -246,3 +241,3 @@ var _acc = acc(siteVariables),
 
-export var mergeSiteVariables__PROD = function mergeSiteVariables__PROD() {
+export var mergeSiteVariables__PROD = function mergeSiteVariables__PROD(siteVariablesA, siteVariablesB) {
   var initial = {
@@ -252,15 +247,15 @@ fontSizes: {}
 
-  for (var _len3 = arguments.length, sources = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-    sources[_key3] = arguments[_key3];
+  if (siteVariablesA && siteVariablesB) {
+    return deepmerge(initial, siteVariablesA, siteVariablesB);
   }
 
-  return deepmerge.apply(void 0, [initial].concat(sources));
-};
-export var mergeSiteVariables__DEV = function mergeSiteVariables__DEV() {
-  for (var _len4 = arguments.length, sources = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-    sources[_key4] = arguments[_key4];
+  if (siteVariablesA) {
+    return Object.assign({}, initial, siteVariablesA);
   }
 
+  return Object.assign({}, initial, siteVariablesB);
+};
+export var mergeSiteVariables__DEV = function mergeSiteVariables__DEV(siteVariablesA, siteVariablesB) {
   if (!isDebugEnabled) {
-    return mergeSiteVariables__PROD.apply(void 0, sources);
+    return mergeSiteVariables__PROD(siteVariablesA, siteVariablesB);
   }
@@ -271,3 +266,3 @@
   };
-  return sources.reduce(function (acc, next) {
+  return [siteVariablesA, siteVariablesB].reduce(function (acc, next) {
     var _acc$_debug2 = acc._debug,
@@ -308,29 +303,39 @@ _debug = _acc$_debug2 === void 0 ? [] : _acc$_debug2,
 
-export var mergeThemeVariables__PROD = function mergeThemeVariables__PROD() {
-  for (var _len5 = arguments.length, sources = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-    sources[_key5] = arguments[_key5];
+export var mergeThemeVariables__PROD = function mergeThemeVariables__PROD(themeComponentVariablesA, themeComponentVariablesB) {
+  if (themeComponentVariablesA && themeComponentVariablesB) {
+    var displayNames = _union.apply(void 0, _map([themeComponentVariablesA, themeComponentVariablesB], _keys));
+
+    return displayNames.reduce(function (componentVariables, displayName) {
+      componentVariables[displayName] = mergeComponentVariables(themeComponentVariablesA[displayName], themeComponentVariablesB[displayName]);
+      return componentVariables;
+    }, {});
   }
 
-  var displayNames = _union.apply(void 0, _map(sources, _keys));
+  if (themeComponentVariablesA) {
+    return Object.fromEntries(Object.entries(themeComponentVariablesA).map(function (_ref5) {
+      var displayName = _ref5[0],
+          variables = _ref5[1];
+      return [displayName, mergeComponentVariables(undefined, variables)];
+    }));
+  }
 
-  return displayNames.reduce(function (componentVariables, displayName) {
-    componentVariables[displayName] = mergeComponentVariables.apply(void 0, _map(sources, displayName));
-    return componentVariables;
-  }, {});
-};
-export var mergeThemeVariables__DEV = function mergeThemeVariables__DEV() {
-  for (var _len6 = arguments.length, sources = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
-    sources[_key6] = arguments[_key6];
+  if (themeComponentVariablesB) {
+    return Object.fromEntries(Object.entries(themeComponentVariablesB).map(function (_ref6) {
+      var displayName = _ref6[0],
+          variables = _ref6[1];
+      return [displayName, mergeComponentVariables(undefined, variables)];
+    }));
   }
 
+  return {};
+};
+export var mergeThemeVariables__DEV = function mergeThemeVariables__DEV(themeComponentVariablesA, themeComponentVariablesB) {
   if (!isDebugEnabled) {
-    return mergeThemeVariables__PROD.apply(void 0, sources);
+    return mergeThemeVariables__PROD(themeComponentVariablesA, themeComponentVariablesB);
   }
 
-  var displayNames = _union.apply(void 0, _map(sources, _keys));
+  var displayNames = _union.apply(void 0, _map([themeComponentVariablesA, themeComponentVariablesB], _keys));
 
   return displayNames.reduce(function (componentVariables, displayName) {
-    componentVariables[displayName] = mergeComponentVariables.apply(void 0, _map(sources, function (source) {
-      return source && withDebugId(source[displayName], source._debugId);
-    }));
+    componentVariables[displayName] = mergeComponentVariables(themeComponentVariablesA && withDebugId(themeComponentVariablesA[displayName], themeComponentVariablesA._debugId), themeComponentVariablesB && withDebugId(themeComponentVariablesB[displayName], themeComponentVariablesB._debugId));
     return componentVariables;
@@ -346,10 +351,38 @@ }, {});
 
-export var mergeThemeStyles = function mergeThemeStyles() {
-  var initial = {};
+var mergeThemeStyles__PROD = function mergeThemeStyles__PROD(themeComponentStylesA, themeComponentStylesB) {
+  if (themeComponentStylesA && themeComponentStylesB) {
+    var displayNames = _union.apply(void 0, _map([themeComponentStylesA, themeComponentStylesB], _keys));
 
-  for (var _len7 = arguments.length, sources = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
-    sources[_key7] = arguments[_key7];
+    return displayNames.reduce(function (themeComponentStyles, displayName) {
+      themeComponentStyles[displayName] = mergeComponentStyles(themeComponentStylesA[displayName], themeComponentStylesB[displayName]);
+      return themeComponentStyles;
+    }, {});
   }
 
-  return sources.reduce(function (themeComponentStyles, next) {
+  if (themeComponentStylesA) {
+    return Object.fromEntries(Object.entries(themeComponentStylesA).map(function (_ref7) {
+      var displayName = _ref7[0],
+          styles = _ref7[1];
+      return [displayName, mergeComponentStyles(undefined, styles)];
+    }));
+  }
+
+  if (themeComponentStylesB) {
+    return Object.fromEntries(Object.entries(themeComponentStylesB).map(function (_ref8) {
+      var displayName = _ref8[0],
+          styles = _ref8[1];
+      return [displayName, mergeComponentStyles(undefined, styles)];
+    }));
+  }
+
+  return {};
+};
+
+var mergeThemeStyles__DEV = function mergeThemeStyles__DEV(componentStylesA, componentStylesB) {
+  if (!isDebugEnabled) {
+    return mergeThemeStyles__PROD(componentStylesA, componentStylesB);
+  }
+
+  var initial = {};
+  return [componentStylesA, componentStylesB].reduce(function (themeComponentStyles, next) {
     _forEach(next, function (stylesByPart, displayName) {
@@ -362,23 +395,21 @@ themeComponentStyles[displayName] = mergeComponentStyles(themeComponentStyles[displayName], withDebugId(stylesByPart, next._debugId));
 };
-export var mergeFontFaces = function mergeFontFaces() {
-  return toCompactArray.apply(void 0, arguments);
+
+export var mergeThemeStyles = process.env.NODE_ENV === 'production' ? mergeThemeStyles__PROD : mergeThemeStyles__DEV;
+export var mergeFontFaces = function mergeFontFaces(fontFacesA, fontFacesB) {
+  return [].concat(fontFacesA || [], fontFacesB || []);
 };
-export var mergeStaticStyles = function mergeStaticStyles() {
-  return toCompactArray.apply(void 0, arguments);
+export var mergeStaticStyles = function mergeStaticStyles(staticStylesA, staticStylesB) {
+  return [].concat(staticStylesA || [], staticStylesB || []);
 };
-export var mergeAnimations = function mergeAnimations() {
-  for (var _len8 = arguments.length, sources = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
-    sources[_key8] = arguments[_key8];
-  }
-
-  return Object.assign.apply(Object, [{}].concat(sources));
+export var mergeAnimations = function mergeAnimations(animationsA, animationsB) {
+  return Object.assign({}, animationsA, animationsB);
 };
 export var mergeStyles = function mergeStyles() {
-  for (var _len9 = arguments.length, sources = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
-    sources[_key9] = arguments[_key9];
+  for (var _len = arguments.length, sources = new Array(_len), _key = 0; _key < _len; _key++) {
+    sources[_key] = arguments[_key];
   }
 
   return function () {
-    for (var _len10 = arguments.length, args = new Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
-      args[_key10] = arguments[_key10];
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
     }
@@ -391,20 +422,41 @@
 };
-export var mergeThemes = function mergeThemes() {
-  for (var _len11 = arguments.length, themes = new Array(_len11), _key11 = 0; _key11 < _len11; _key11++) {
-    themes[_key11] = arguments[_key11];
+export var mergeThemes = function mergeThemes(themeA, themeB) {
+  var debugIdA = themeA == null ? void 0 : themeA['_debugId'];
+  var debugIdB = themeB == null ? void 0 : themeB['_debugId'];
+
+  if (themeA && themeB) {
+    return {
+      animations: mergeAnimations(themeA.animations, themeB.animations),
+      componentVariables: mergeThemeVariables(withDebugId(themeA.componentVariables, debugIdA), withDebugId(themeB.componentVariables, debugIdB)),
+      componentStyles: mergeThemeStyles(withDebugId(themeA.componentStyles, debugIdA), withDebugId(themeB.componentStyles, debugIdB)),
+      fontFaces: mergeFontFaces(themeA.fontFaces, themeB.fontFaces),
+      siteVariables: mergeSiteVariables(withDebugId(themeA.siteVariables, debugIdA), withDebugId(themeB.siteVariables, debugIdB)),
+      staticStyles: mergeStaticStyles(themeA.staticStyles, themeB.staticStyles)
+    };
   }
 
-  return themes.reduce(function (acc, next) {
-    if (!next) return acc;
-    var nextDebugId = next['_debugId'];
-    acc.siteVariables = mergeSiteVariables(acc.siteVariables, withDebugId(next.siteVariables, nextDebugId));
-    acc.componentVariables = mergeThemeVariables(acc.componentVariables, withDebugId(next.componentVariables, nextDebugId));
-    acc.componentStyles = mergeThemeStyles(acc.componentStyles, withDebugId(next.componentStyles, nextDebugId));
-    acc.fontFaces = mergeFontFaces.apply(void 0, acc.fontFaces.concat(next.fontFaces || []));
-    acc.staticStyles = mergeStaticStyles.apply(void 0, acc.staticStyles.concat(next.staticStyles || []));
-    acc.animations = mergeAnimations(acc.animations, next.animations);
-    return acc;
-  }, // .reduce() will modify "emptyTheme" object, so we should clone it before actual usage
-  Object.assign({}, emptyTheme));
+  if (themeA) {
+    return {
+      animations: mergeAnimations(undefined, themeA.animations),
+      componentVariables: mergeThemeVariables(undefined, withDebugId(themeA.componentVariables, debugIdA)),
+      componentStyles: mergeThemeStyles(undefined, withDebugId(themeA.componentStyles, debugIdA)),
+      fontFaces: mergeFontFaces(undefined, themeA.fontFaces),
+      siteVariables: mergeSiteVariables(undefined, withDebugId(themeA.siteVariables, debugIdA)),
+      staticStyles: mergeStaticStyles(undefined, themeA.staticStyles)
+    };
+  }
+
+  if (themeB) {
+    return {
+      animations: mergeAnimations(undefined, themeB.animations),
+      componentVariables: mergeThemeVariables(undefined, withDebugId(themeB.componentVariables, debugIdB)),
+      componentStyles: mergeThemeStyles(undefined, withDebugId(themeB.componentStyles, debugIdB)),
+      fontFaces: mergeFontFaces(undefined, themeB.fontFaces),
+      siteVariables: mergeSiteVariables(undefined, withDebugId(themeB.siteVariables, debugIdB)),
+      staticStyles: mergeStaticStyles(undefined, themeB.staticStyles)
+    };
+  }
+
+  return Object.assign({}, emptyTheme);
 };
 //# sourceMappingURL=mergeThemes.js.map

dist/es/types.d.ts

@@ -122,8 +122,4 @@ import * as CSS from 'csstype';
     siteVariables: SiteVariablesPrepared;
-    componentVariables: {
-        [key in keyof ThemeComponentVariablesPrepared<ThemeStylesProps>]: ComponentVariablesPrepared;
-    };
-    componentStyles: {
-        [key in keyof ThemeComponentStylesPrepared<ThemeStylesProps>]: ComponentSlotStylesPrepared;
-    };
+    componentVariables: ThemeComponentVariablesPrepared<ThemeStylesProps>;
+    componentStyles: ThemeComponentStylesPrepared<ThemeStylesProps>;
     fontFaces: FontFaces;
@@ -130,0 +126,0 @@ staticStyles: StaticStyles;

package.json

 {
   "name": "@fluentui/styles",
   "description": "A set of styling utilities for CSS-in-JS.",
-  "version": "0.61.0",
+  "version": "0.62.0",
   "author": "Marija Najdova <[e-mail]>",
@@ -39,3 +39,3 @@ "bugs": "https://github.com/microsoft/fluentui/issues",
   "types": "dist/es/index.d.ts",
-  "gitHead": "e2eadfd8ebfc7f01d89d8954a3f8e080260bd609"
+  "gitHead": "4540cd8373265a1e16bd3df33e9e3c31a5ea223e"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

266267

increased by8.09%

Lines of code

3401

increased by0.77%

Worsened metrics

Number of package files

83

decreased by-7.78%

Number of low supply chain risk alerts

19

increased by18.75%

No dependency changes