@fluentui/styles - npm Package Compare versions

Comparing version 0.56.1-beta.1 to 0.57.0

dist/dts/src/callable.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.callable = function (possibleFunction) { return function () {
+exports.callable = void 0;
+var callable = function (possibleFunction) { return function () {
     var args = [];
@@ -10,1 +11,2 @@ for (var _i = 0; _i < arguments.length; _i++) {
 }; };
+exports.callable = callable;

dist/dts/src/createTheme.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTheme = void 0;
 var withDebugId_1 = require("./withDebugId");
-exports.createTheme = function (themeInput, debugId) {
+var createTheme = function (themeInput, debugId) {
     return withDebugId_1.withDebugId(themeInput, debugId);
 };
+exports.createTheme = createTheme;

dist/dts/src/debugEnabled.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isEnabled = void 0;
 var isDebugEnabled = function () {
@@ -4,0 +5,0 @@ var enabled = false;

dist/dts/src/deepmerge.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.deepmerge = void 0;
 var isObject = function (o) { return o !== null && typeof o === 'object' && !Array.isArray(o); };
@@ -8,3 +9,3 @@ var isValid = function (k) { return k !== '__proto__' && k !== 'prototype' && k !== 'constructor'; };
 // Merging should result in a themes that are non-mutated and have broken references.
-exports.deepmerge = function () {
+var deepmerge = function () {
     var sources = [];
@@ -32,1 +33,2 @@ for (var _i = 0; _i < arguments.length; _i++) {
 };
+exports.deepmerge = deepmerge;

dist/dts/src/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.withDebugId = exports.objectKeyToValues = exports.mergeSiteVariables = exports.mergeThemeVariables = exports.mergeThemeStyles = exports.mergeStyles = exports.mergeStaticStyles = exports.mergeFontFaces = exports.mergeComponentStyles = exports.mergeComponentVariables = exports.emptyTheme = exports.mergeThemes = exports.deepmerge = exports.isDebugEnabled = exports.createTheme = exports.callable = void 0;
 var tslib_1 = require("tslib");
 var callable_1 = require("./callable");
-exports.callable = callable_1.callable;
+Object.defineProperty(exports, "callable", { enumerable: true, get: function () { return callable_1.callable; } });
 var createTheme_1 = require("./createTheme");
-exports.createTheme = createTheme_1.createTheme;
+Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return createTheme_1.createTheme; } });
 var debugEnabled_1 = require("./debugEnabled");
-exports.isDebugEnabled = debugEnabled_1.isEnabled;
+Object.defineProperty(exports, "isDebugEnabled", { enumerable: true, get: function () { return debugEnabled_1.isEnabled; } });
 var deepmerge_1 = require("./deepmerge");
-exports.deepmerge = deepmerge_1.deepmerge;
+Object.defineProperty(exports, "deepmerge", { enumerable: true, get: function () { return deepmerge_1.deepmerge; } });
 var mergeThemes_1 = require("./mergeThemes");
-exports.mergeThemes = mergeThemes_1.mergeThemes;
-exports.emptyTheme = mergeThemes_1.emptyTheme;
-exports.mergeComponentVariables = mergeThemes_1.mergeComponentVariables;
-exports.mergeComponentStyles = mergeThemes_1.mergeComponentStyles;
-exports.mergeFontFaces = mergeThemes_1.mergeFontFaces;
-exports.mergeStaticStyles = mergeThemes_1.mergeStaticStyles;
-exports.mergeStyles = mergeThemes_1.mergeStyles;
-exports.mergeThemeStyles = mergeThemes_1.mergeThemeStyles;
-exports.mergeThemeVariables = mergeThemes_1.mergeThemeVariables;
-exports.mergeSiteVariables = mergeThemes_1.mergeSiteVariables;
+Object.defineProperty(exports, "mergeThemes", { enumerable: true, get: function () { return mergeThemes_1.mergeThemes; } });
+Object.defineProperty(exports, "emptyTheme", { enumerable: true, get: function () { return mergeThemes_1.emptyTheme; } });
+Object.defineProperty(exports, "mergeComponentVariables", { enumerable: true, get: function () { return mergeThemes_1.mergeComponentVariables; } });
+Object.defineProperty(exports, "mergeComponentStyles", { enumerable: true, get: function () { return mergeThemes_1.mergeComponentStyles; } });
+Object.defineProperty(exports, "mergeFontFaces", { enumerable: true, get: function () { return mergeThemes_1.mergeFontFaces; } });
+Object.defineProperty(exports, "mergeStaticStyles", { enumerable: true, get: function () { return mergeThemes_1.mergeStaticStyles; } });
+Object.defineProperty(exports, "mergeStyles", { enumerable: true, get: function () { return mergeThemes_1.mergeStyles; } });
+Object.defineProperty(exports, "mergeThemeStyles", { enumerable: true, get: function () { return mergeThemes_1.mergeThemeStyles; } });
+Object.defineProperty(exports, "mergeThemeVariables", { enumerable: true, get: function () { return mergeThemes_1.mergeThemeVariables; } });
+Object.defineProperty(exports, "mergeSiteVariables", { enumerable: true, get: function () { return mergeThemes_1.mergeSiteVariables; } });
 var objectKeysToValues_1 = require("./objectKeysToValues");
-exports.objectKeyToValues = objectKeysToValues_1.objectKeyToValues;
+Object.defineProperty(exports, "objectKeyToValues", { enumerable: true, get: function () { return objectKeysToValues_1.objectKeyToValues; } });
 var withDebugId_1 = require("./withDebugId");
-exports.withDebugId = withDebugId_1.withDebugId;
+Object.defineProperty(exports, "withDebugId", { enumerable: true, get: function () { return withDebugId_1.withDebugId; } });
 tslib_1.__exportStar(require("./types"), exports);

dist/dts/src/mergeThemes.d.ts

@@ -1,2 +0,2 @@
-import { ComponentSlotStyle, ComponentSlotStylesInput, ComponentSlotStylesPrepared, ComponentVariablesPrepared, FontFace, SiteVariablesInput, SiteVariablesPrepared, StaticStyle, ThemeAnimation, ThemeComponentStylesInput, ThemeComponentStylesPrepared, ThemeComponentVariablesInput, ThemeComponentVariablesPrepared, ThemeInput, ThemePrepared } from './types';
+import { ComponentSlotStyle, ComponentSlotStylesInput, ComponentSlotStylesPrepared, ComponentVariablesInput, ComponentVariablesPrepared, FontFace, SiteVariablesInput, SiteVariablesPrepared, StaticStyle, ThemeAnimation, ThemeComponentStylesInput, ThemeComponentStylesPrepared, ThemeComponentVariablesInput, ThemeComponentVariablesPrepared, ThemeInput, ThemePrepared } from './types';
 export declare const emptyTheme: ThemePrepared;
@@ -6,11 +6,11 @@ /**
  */
-export declare const mergeComponentStyles__PROD: (stylesA: ComponentSlotStyle<{}, {}>, stylesB: ComponentSlotStyle<{}, {}>) => ComponentSlotStylesPrepared<{}, {}>;
-export declare const mergeComponentStyles__DEV: (stylesA: ComponentSlotStylesInput<{}, {}>, stylesB: ComponentSlotStylesInput<{}, {}>) => ComponentSlotStylesPrepared<{}, {}>;
-export declare const mergeComponentStyles: (...sources: (ComponentSlotStylesInput | null | undefined)[]) => ComponentSlotStylesPrepared;
+export declare const mergeComponentStyles__PROD: typeof mergeComponentStyles;
+export declare const mergeComponentStyles__DEV: typeof mergeComponentStyles;
+export declare const mergeComponentStyles: (stylesA: ComponentSlotStylesInput | null | undefined, stylesB: ComponentSlotStylesInput | null | undefined) => ComponentSlotStylesPrepared;
 /**
  * Merges a single component's variables with another component's variables.
  */
-export declare const mergeComponentVariables__PROD: (...sources: any[]) => ComponentVariablesPrepared;
-export declare const mergeComponentVariables__DEV: (...sources: any[]) => ComponentVariablesPrepared;
-export declare const mergeComponentVariables: (...sources: any[]) => ComponentVariablesPrepared;
+export declare const mergeComponentVariables__PROD: (...sources: ComponentVariablesInput[]) => ComponentVariablesPrepared;
+export declare const mergeComponentVariables__DEV: (...sources: ComponentVariablesInput[]) => ComponentVariablesPrepared;
+export declare const mergeComponentVariables: (...sources: ComponentVariablesInput[]) => ComponentVariablesPrepared;
 /**
@@ -20,5 +20,5 @@ * Site variables can safely be merged at each Provider in the tree.
  */
-export declare const mergeSiteVariables__PROD: (...sources: SiteVariablesInput[]) => SiteVariablesPrepared;
-export declare const mergeSiteVariables__DEV: (...sources: SiteVariablesInput[]) => SiteVariablesPrepared;
-export declare const mergeSiteVariables: (...sources: SiteVariablesInput[]) => SiteVariablesPrepared;
+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;
 /**
@@ -31,5 +31,5 @@ * Component variables can be objects, functions, or an array of these.
  */
-export declare const mergeThemeVariables__PROD: (...sources: ThemeComponentVariablesInput<any>[]) => ThemeComponentVariablesPrepared<any>;
-export declare const mergeThemeVariables__DEV: (...sources: ThemeComponentVariablesInput<any>[]) => ThemeComponentVariablesPrepared<any>;
-export declare const mergeThemeVariables: (...sources: ThemeComponentVariablesInput<any>[]) => ThemeComponentVariablesPrepared<any>;
+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;
 /**
@@ -40,3 +40,3 @@ * See mergeThemeVariables() description.
  */
-export declare const mergeThemeStyles: (...sources: ThemeComponentStylesInput<any>[]) => ThemeComponentStylesPrepared<any>;
+export declare const mergeThemeStyles: (...sources: (ThemeComponentStylesInput | null | undefined)[]) => ThemeComponentStylesPrepared;
 export declare const mergeFontFaces: (...sources: FontFace[]) => FontFace[];
@@ -49,3 +49,3 @@ export declare const mergeStaticStyles: (...sources: StaticStyle[]) => StaticStyle[];
 };
-export declare const mergeStyles: (...sources: ComponentSlotStyle<{}, {}>[]) => (...args: any[]) => any;
-export declare const mergeThemes: (...themes: ThemeInput<any>[]) => ThemePrepared<any>;
+export declare const mergeStyles: (...sources: ComponentSlotStyle[]) => (...args: any[]) => any;
+export declare const mergeThemes: (...themes: ThemeInput[]) => ThemePrepared;

dist/dts/src/mergeThemes.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeThemes = exports.mergeStyles = exports.mergeAnimations = exports.mergeStaticStyles = exports.mergeFontFaces = exports.mergeThemeStyles = exports.mergeThemeVariables = exports.mergeThemeVariables__DEV = exports.mergeThemeVariables__PROD = exports.mergeSiteVariables = exports.mergeSiteVariables__DEV = exports.mergeSiteVariables__PROD = exports.mergeComponentVariables = exports.mergeComponentVariables__DEV = exports.mergeComponentVariables__PROD = exports.mergeComponentStyles = exports.mergeComponentStyles__DEV = exports.mergeComponentStyles__PROD = exports.emptyTheme = void 0;
 var tslib_1 = require("tslib");
@@ -27,9 +28,8 @@ var _ = require("lodash");
  */
-exports.mergeComponentStyles__PROD = function (stylesA, stylesB) {
+var mergeComponentStyles__PROD = function (stylesA, stylesB) {
     var result = {};
     if (stylesA) {
         Object.keys(stylesA).forEach(function (partName) {
-            var _a;
             var slotA = stylesA[partName];
-            var slotB = (_a = stylesB) === null || _a === void 0 ? void 0 : _a[partName];
+            var slotB = stylesB === null || stylesB === void 0 ? void 0 : stylesB[partName];
             // if there is no source, merging is a no-op, skip it
@@ -52,4 +52,3 @@ if (typeof slotA === 'undefined' || slotA === null) {
         Object.keys(stylesB).forEach(function (partName) {
-            var _a;
-            var slotA = (_a = stylesA) === null || _a === void 0 ? void 0 : _a[partName];
+            var slotA = stylesA === null || stylesA === void 0 ? void 0 : stylesA[partName];
             var slotB = stylesB[partName];
@@ -78,3 +77,4 @@ // if there is no source, merging is a no-op, skip it
 };
-exports.mergeComponentStyles__DEV = function (stylesA, stylesB) {
+exports.mergeComponentStyles__PROD = mergeComponentStyles__PROD;
+var mergeComponentStyles__DEV = function (stylesA, stylesB) {
     if (!debugEnabled_1.isEnabled) {
@@ -86,6 +86,4 @@ return exports.mergeComponentStyles__PROD(stylesA, stylesB);
     mergedKeys.forEach(function (slotName) {
-        var _a, _b, _c, _d;
         var slotA = function (styleParam) {
-            var _a;
-            var _b = callable_1.callable((_a = stylesA) === null || _a === void 0 ? void 0 : _a[slotName])(styleParam) || {}, _c = _b._debug, _debug = _c === void 0 ? undefined : _c, styles = tslib_1.__rest(_b, ["_debug"]);
+            var _a = callable_1.callable(stylesA === null || stylesA === void 0 ? void 0 : stylesA[slotName])(styleParam) || {}, _b = _a._debug, _debug = _b === void 0 ? undefined : _b, styles = tslib_1.__rest(_a, ["_debug"]);
             // new object required to prevent circular JSON structure error in <Debug />
@@ -95,8 +93,7 @@ return tslib_1.__assign(tslib_1.__assign({}, styles), { _debug: _debug || [{ styles: tslib_1.__assign({}, styles), debugId: stylesA._debugId }] });
         var slotB = function (styleParam) {
-            var _a;
-            var _b = callable_1.callable((_a = stylesB) === null || _a === void 0 ? void 0 : _a[slotName])(styleParam) || {}, _c = _b._debug, _debug = _c === void 0 ? undefined : _c, styles = tslib_1.__rest(_b, ["_debug"]);
+            var _a = callable_1.callable(stylesB === null || stylesB === void 0 ? void 0 : stylesB[slotName])(styleParam) || {}, _b = _a._debug, _debug = _b === void 0 ? undefined : _b, styles = tslib_1.__rest(_a, ["_debug"]);
             // new object required to prevent circular JSON structure error in <Debug />
             return tslib_1.__assign(tslib_1.__assign({}, styles), { _debug: _debug || [{ styles: tslib_1.__assign({}, styles), debugId: stylesB._debugId }] });
         };
-        if (((_a = stylesA) === null || _a === void 0 ? void 0 : _a[slotName]) && ((_b = stylesB) === null || _b === void 0 ? void 0 : _b[slotName])) {
+        if ((stylesA === null || stylesA === void 0 ? void 0 : stylesA[slotName]) && (stylesB === null || stylesB === void 0 ? void 0 : stylesB[slotName])) {
             // We have both, replace with merge fn
@@ -112,6 +109,6 @@ result[slotName] = function (styleParam) {
         }
-        else if ((_c = stylesA) === null || _c === void 0 ? void 0 : _c[slotName]) {
+        else if (stylesA === null || stylesA === void 0 ? void 0 : stylesA[slotName]) {
             result[slotName] = slotA;
         }
-        else if ((_d = stylesB) === null || _d === void 0 ? void 0 : _d[slotName]) {
+        else if (stylesB === null || stylesB === void 0 ? void 0 : stylesB[slotName]) {
             result[slotName] = slotB;
@@ -122,2 +119,3 @@ }
 };
+exports.mergeComponentStyles__DEV = mergeComponentStyles__DEV;
 exports.mergeComponentStyles = process.env.NODE_ENV === 'production' ? exports.mergeComponentStyles__PROD : exports.mergeComponentStyles__DEV;
@@ -127,3 +125,3 @@ /**
  */
-exports.mergeComponentVariables__PROD = function () {
+var mergeComponentVariables__PROD = function () {
     var sources = [];
@@ -153,3 +151,4 @@ for (var _i = 0; _i < arguments.length; _i++) {
 };
-exports.mergeComponentVariables__DEV = function () {
+exports.mergeComponentVariables__PROD = mergeComponentVariables__PROD;
+var mergeComponentVariables__DEV = function () {
     var sources = [];
@@ -179,2 +178,3 @@ for (var _i = 0; _i < arguments.length; _i++) {
 };
+exports.mergeComponentVariables__DEV = mergeComponentVariables__DEV;
 exports.mergeComponentVariables = process.env.NODE_ENV === 'production' ? exports.mergeComponentVariables__PROD : exports.mergeComponentVariables__DEV;
@@ -188,3 +188,3 @@ // ----------------------------------------
  */
-exports.mergeSiteVariables__PROD = function () {
+var mergeSiteVariables__PROD = function () {
     var sources = [];
@@ -199,3 +199,4 @@ for (var _i = 0; _i < arguments.length; _i++) {
 };
-exports.mergeSiteVariables__DEV = function () {
+exports.mergeSiteVariables__PROD = mergeSiteVariables__PROD;
+var mergeSiteVariables__DEV = function () {
     var sources = [];
@@ -220,2 +221,3 @@ for (var _i = 0; _i < arguments.length; _i++) {
 };
+exports.mergeSiteVariables__DEV = mergeSiteVariables__DEV;
 exports.mergeSiteVariables = process.env.NODE_ENV === 'production' ? exports.mergeSiteVariables__PROD : exports.mergeSiteVariables__DEV;
@@ -229,3 +231,3 @@ /**
  */
-exports.mergeThemeVariables__PROD = function () {
+var mergeThemeVariables__PROD = function () {
     var sources = [];
@@ -241,3 +243,4 @@ for (var _i = 0; _i < arguments.length; _i++) {
 };
-exports.mergeThemeVariables__DEV = function () {
+exports.mergeThemeVariables__PROD = mergeThemeVariables__PROD;
+var mergeThemeVariables__DEV = function () {
     var sources = [];
@@ -256,2 +259,3 @@ for (var _i = 0; _i < arguments.length; _i++) {
 };
+exports.mergeThemeVariables__DEV = mergeThemeVariables__DEV;
 exports.mergeThemeVariables = process.env.NODE_ENV === 'production' ? exports.mergeThemeVariables__PROD : exports.mergeThemeVariables__DEV;
@@ -263,3 +267,3 @@ /**
  */
-exports.mergeThemeStyles = function () {
+var mergeThemeStyles = function () {
     var sources = [];
@@ -277,3 +281,4 @@ for (var _i = 0; _i < arguments.length; _i++) {
 };
-exports.mergeFontFaces = function () {
+exports.mergeThemeStyles = mergeThemeStyles;
+var mergeFontFaces = function () {
     var sources = [];
@@ -285,3 +290,4 @@ for (var _i = 0; _i < arguments.length; _i++) {
 };
-exports.mergeStaticStyles = function () {
+exports.mergeFontFaces = mergeFontFaces;
+var mergeStaticStyles = function () {
     var sources = [];
@@ -293,3 +299,4 @@ for (var _i = 0; _i < arguments.length; _i++) {
 };
-exports.mergeAnimations = function () {
+exports.mergeStaticStyles = mergeStaticStyles;
+var mergeAnimations = function () {
     var sources = [];
@@ -301,3 +308,4 @@ for (var _i = 0; _i < arguments.length; _i++) {
 };
-exports.mergeStyles = function () {
+exports.mergeAnimations = mergeAnimations;
+var mergeStyles = function () {
     var sources = [];
@@ -317,3 +325,4 @@ for (var _i = 0; _i < arguments.length; _i++) {
 };
-exports.mergeThemes = function () {
+exports.mergeStyles = mergeStyles;
+var mergeThemes = function () {
     var themes = [];
@@ -336,1 +345,2 @@ for (var _i = 0; _i < arguments.length; _i++) {
 };
+exports.mergeThemes = mergeThemes;

dist/dts/src/objectKeysToValues.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.objectKeyToValues = void 0;
 var isObject = function (o) { return o !== null && typeof o === 'object' && !Array.isArray(o); };
-exports.objectKeyToValues = function (input, formatter) {
+var objectKeyToValues = function (input, formatter) {
     if (formatter === void 0) { formatter = function (input) { return input; }; }
@@ -23,1 +24,2 @@ if (!isObject(input)) {
 };
+exports.objectKeyToValues = objectKeyToValues;

dist/dts/src/toCompactArray.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toCompactArray = function () {
+exports.toCompactArray = void 0;
+var toCompactArray = function () {
     var _a;
@@ -11,1 +12,2 @@ var values = [];
 };
+exports.toCompactArray = toCompactArray;

dist/dts/src/types.d.ts

@@ -12,3 +12,3 @@ import * as CSS from 'csstype';
 export declare type ObjectOrFunc<TResult, TArg = {}> = ((arg: TArg) => TResult) | TResult;
-export declare type AnimationKeyFrame = Record<'from' | 'to' | string, ICSSInJSStyle>;
+export declare type AnimationKeyFrame = Record<'from' | 'to' | string, CSSCustom>;
 export interface AnimationName<P = Record<string, any>> {
@@ -18,24 +18,24 @@ keyframe?: AnimationKeyFrame | ((params: P) => AnimationKeyFrame);
 }
-declare type CSSProperties = Omit<CSS.Properties<string | number>, 'animationName'> & {
-    animationName?: AnimationName | AnimationKeyFrame | string | 'none';
-};
-export interface ICSSPseudoElementStyle extends ICSSInJSStyle {
-    content?: string;
-}
-export declare type ICSSInJSStyle = Omit<CSSProperties, 'display'> & {
-    [key: string]: any;
-    display?: CSSProperties['display'] | CSSProperties['display'][];
+declare type CSSProperties = Omit<CSS.Properties<number | string>, 'animationName'> & {
     speak?: CSS.Globals | 'none' | 'normal' | 'spell-out';
-    '::before'?: ICSSPseudoElementStyle;
-    '::after'?: ICSSPseudoElementStyle;
-    ':hover'?: ICSSInJSStyle;
-    ':active'?: ICSSInJSStyle;
-    ':focus'?: ICSSInJSStyle;
-    ':visited'?: ICSSInJSStyle;
-    ':first-child'?: ICSSInJSStyle;
-    ':last-child'?: ICSSInJSStyle;
-    ':nth-child(n+2)'?: ICSSInJSStyle;
-    '-webkit-font-smoothing'?: CSS.Globals | 'auto' | 'none' | 'antialiased' | 'subpixel-antialiased';
-    '-moz-osx-font-smoothing'?: CSS.Globals | 'auto' | 'grayscale';
+    WebkitFontSmoothing?: CSS.Globals | 'auto' | 'none' | 'antialiased' | 'subpixel-antialiased';
+    MozOsxFontSmoothing?: CSS.Globals | 'auto' | 'grayscale';
+    '-webkit-appearance'?: never;
+    '-webkit-box-orient'?: never;
+    '-webkit-font-smoothing'?: never;
+    '-webkit-line-clamp'?: never;
+    '-webkit-text-fill-color'?: never;
 };
+declare type CSSObject = CSSProperties & CSSPseudos & {
+    animationName?: AnimationName<any> | AnimationKeyFrame | string | 'none';
+};
+declare type CSSCustom = {
+    [prop: string]: number | string | ICSSInJSStyle;
+};
+declare type CSSPseudos = {
+    [K in CSS.Pseudos]?: CSSObject & {
+        content?: string;
+    };
+};
+export declare type ICSSInJSStyle = CSSObject | CSSCustom;
 export interface ThemeAnimation<KP = {}> {
@@ -42,0 +42,0 @@ keyframe: ((kp: KP) => object) | object | string;

dist/dts/src/withDebugId.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.withDebugId = void 0;
 var tslib_1 = require("tslib");
@@ -4,0 +5,0 @@ var debugEnabled_1 = require("./debugEnabled");

dist/es/mergeThemes.d.ts

@@ -1,2 +0,2 @@
-import { ComponentSlotStyle, ComponentSlotStylesInput, ComponentSlotStylesPrepared, ComponentVariablesPrepared, FontFace, SiteVariablesInput, SiteVariablesPrepared, StaticStyle, ThemeAnimation, ThemeComponentStylesInput, ThemeComponentStylesPrepared, ThemeComponentVariablesInput, ThemeComponentVariablesPrepared, ThemeInput, ThemePrepared } from './types';
+import { ComponentSlotStyle, ComponentSlotStylesInput, ComponentSlotStylesPrepared, ComponentVariablesInput, ComponentVariablesPrepared, FontFace, SiteVariablesInput, SiteVariablesPrepared, StaticStyle, ThemeAnimation, ThemeComponentStylesInput, ThemeComponentStylesPrepared, ThemeComponentVariablesInput, ThemeComponentVariablesPrepared, ThemeInput, ThemePrepared } from './types';
 export declare const emptyTheme: ThemePrepared;
@@ -6,11 +6,11 @@ /**
  */
-export declare const mergeComponentStyles__PROD: (stylesA: ComponentSlotStyle<{}, {}>, stylesB: ComponentSlotStyle<{}, {}>) => ComponentSlotStylesPrepared<{}, {}>;
-export declare const mergeComponentStyles__DEV: (stylesA: ComponentSlotStylesInput<{}, {}>, stylesB: ComponentSlotStylesInput<{}, {}>) => ComponentSlotStylesPrepared<{}, {}>;
-export declare const mergeComponentStyles: (...sources: (ComponentSlotStylesInput | null | undefined)[]) => ComponentSlotStylesPrepared;
+export declare const mergeComponentStyles__PROD: typeof mergeComponentStyles;
+export declare const mergeComponentStyles__DEV: typeof mergeComponentStyles;
+export declare const mergeComponentStyles: (stylesA: ComponentSlotStylesInput | null | undefined, stylesB: ComponentSlotStylesInput | null | undefined) => ComponentSlotStylesPrepared;
 /**
  * Merges a single component's variables with another component's variables.
  */
-export declare const mergeComponentVariables__PROD: (...sources: any[]) => ComponentVariablesPrepared;
-export declare const mergeComponentVariables__DEV: (...sources: any[]) => ComponentVariablesPrepared;
-export declare const mergeComponentVariables: (...sources: any[]) => ComponentVariablesPrepared;
+export declare const mergeComponentVariables__PROD: (...sources: ComponentVariablesInput[]) => ComponentVariablesPrepared;
+export declare const mergeComponentVariables__DEV: (...sources: ComponentVariablesInput[]) => ComponentVariablesPrepared;
+export declare const mergeComponentVariables: (...sources: ComponentVariablesInput[]) => ComponentVariablesPrepared;
 /**
@@ -20,5 +20,5 @@ * Site variables can safely be merged at each Provider in the tree.
  */
-export declare const mergeSiteVariables__PROD: (...sources: SiteVariablesInput[]) => SiteVariablesPrepared;
-export declare const mergeSiteVariables__DEV: (...sources: SiteVariablesInput[]) => SiteVariablesPrepared;
-export declare const mergeSiteVariables: (...sources: SiteVariablesInput[]) => SiteVariablesPrepared;
+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;
 /**
@@ -31,5 +31,5 @@ * Component variables can be objects, functions, or an array of these.
  */
-export declare const mergeThemeVariables__PROD: (...sources: ThemeComponentVariablesInput<any>[]) => ThemeComponentVariablesPrepared<any>;
-export declare const mergeThemeVariables__DEV: (...sources: ThemeComponentVariablesInput<any>[]) => ThemeComponentVariablesPrepared<any>;
-export declare const mergeThemeVariables: (...sources: ThemeComponentVariablesInput<any>[]) => ThemeComponentVariablesPrepared<any>;
+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;
 /**
@@ -40,3 +40,3 @@ * See mergeThemeVariables() description.
  */
-export declare const mergeThemeStyles: (...sources: ThemeComponentStylesInput<any>[]) => ThemeComponentStylesPrepared<any>;
+export declare const mergeThemeStyles: (...sources: (ThemeComponentStylesInput | null | undefined)[]) => ThemeComponentStylesPrepared;
 export declare const mergeFontFaces: (...sources: FontFace[]) => FontFace[];
@@ -49,3 +49,3 @@ export declare const mergeStaticStyles: (...sources: StaticStyle[]) => StaticStyle[];
 };
-export declare const mergeStyles: (...sources: ComponentSlotStyle<{}, {}>[]) => (...args: any[]) => any;
-export declare const mergeThemes: (...themes: ThemeInput<any>[]) => ThemePrepared<any>;
+export declare const mergeStyles: (...sources: ComponentSlotStyle[]) => (...args: any[]) => any;
+export declare const mergeThemes: (...themes: ThemeInput[]) => ThemePrepared;

dist/es/types.d.ts

@@ -12,3 +12,3 @@ import * as CSS from 'csstype';
 export declare type ObjectOrFunc<TResult, TArg = {}> = ((arg: TArg) => TResult) | TResult;
-export declare type AnimationKeyFrame = Record<'from' | 'to' | string, ICSSInJSStyle>;
+export declare type AnimationKeyFrame = Record<'from' | 'to' | string, CSSCustom>;
 export interface AnimationName<P = Record<string, any>> {
@@ -18,24 +18,24 @@ keyframe?: AnimationKeyFrame | ((params: P) => AnimationKeyFrame);
 }
-declare type CSSProperties = Omit<CSS.Properties<string | number>, 'animationName'> & {
-    animationName?: AnimationName | AnimationKeyFrame | string | 'none';
-};
-export interface ICSSPseudoElementStyle extends ICSSInJSStyle {
-    content?: string;
-}
-export declare type ICSSInJSStyle = Omit<CSSProperties, 'display'> & {
-    [key: string]: any;
-    display?: CSSProperties['display'] | CSSProperties['display'][];
+declare type CSSProperties = Omit<CSS.Properties<number | string>, 'animationName'> & {
     speak?: CSS.Globals | 'none' | 'normal' | 'spell-out';
-    '::before'?: ICSSPseudoElementStyle;
-    '::after'?: ICSSPseudoElementStyle;
-    ':hover'?: ICSSInJSStyle;
-    ':active'?: ICSSInJSStyle;
-    ':focus'?: ICSSInJSStyle;
-    ':visited'?: ICSSInJSStyle;
-    ':first-child'?: ICSSInJSStyle;
-    ':last-child'?: ICSSInJSStyle;
-    ':nth-child(n+2)'?: ICSSInJSStyle;
-    '-webkit-font-smoothing'?: CSS.Globals | 'auto' | 'none' | 'antialiased' | 'subpixel-antialiased';
-    '-moz-osx-font-smoothing'?: CSS.Globals | 'auto' | 'grayscale';
+    WebkitFontSmoothing?: CSS.Globals | 'auto' | 'none' | 'antialiased' | 'subpixel-antialiased';
+    MozOsxFontSmoothing?: CSS.Globals | 'auto' | 'grayscale';
+    '-webkit-appearance'?: never;
+    '-webkit-box-orient'?: never;
+    '-webkit-font-smoothing'?: never;
+    '-webkit-line-clamp'?: never;
+    '-webkit-text-fill-color'?: never;
 };
+declare type CSSObject = CSSProperties & CSSPseudos & {
+    animationName?: AnimationName<any> | AnimationKeyFrame | string | 'none';
+};
+declare type CSSCustom = {
+    [prop: string]: number | string | ICSSInJSStyle;
+};
+declare type CSSPseudos = {
+    [K in CSS.Pseudos]?: CSSObject & {
+        content?: string;
+    };
+};
+export declare type ICSSInJSStyle = CSSObject | CSSCustom;
 export interface ThemeAnimation<KP = {}> {
@@ -42,0 +42,0 @@ keyframe: ((kp: KP) => object) | object | string;

package.json

 {
   "name": "@fluentui/styles",
   "description": "A set of styling utilities for CSS-in-JS.",
-  "version": "0.56.1-beta.1",
+  "version": "0.57.0",
   "author": "Marija Najdova <[e-mail]>",
@@ -40,3 +40,3 @@ "bugs": "https://github.com/microsoft/fluentui/issues",
   "types": "dist/es/index.d.ts",
-  "gitHead": "e739e52a1d894fe863367843a459af939cfee6ec"
+  "gitHead": "9ed48c7056dc8f76437c210040943dbd022e9980"
 }

No alert changes

Improved metrics

Total package byte prevSize

310649

2.7%

Lines of code

3282

0.8%

No dependency changes