@fluentui/make-styles - npm Package Compare versions

Comparing version 0.0.0-nightly57a9843f2620211119.1 to 0.0.0-nightly58c310891320211216.1

CHANGELOG.json

@@ -5,5 +5,5 @@ {
     {
-      "date": "Fri, 19 Nov 2021 04:18:58 GMT",
-      "tag": "@fluentui/make-styles_v0.0.0-nightly57a9843f2620211119.1",
-      "version": "0.0.0-nightly57a9843f2620211119.1",
+      "date": "Thu, 16 Dec 2021 04:14:52 GMT",
+      "tag": "@fluentui/make-styles_v0.0.0-nightly58c310891320211216.1",
+      "version": "0.0.0-nightly58c310891320211216.1",
       "comments": {
@@ -14,8 +14,61 @@ "prerelease": [
             "package": "@fluentui/make-styles",
-            "commit": "e6017db01058700b10f0f2b6b36ef51efb28b9b9",
+            "commit": "919f08a1b25cd5045dc729d44a65f64f7838f4dc",
             "comment": "Release nightly v9"
           },
           {
+            "author": "[e-mail]",
+            "package": "@fluentui/make-styles",
+            "commit": "b8ca4b3642b752e506fc6617c13c2568867c5464",
+            "comment": "fix: improve return types for shorthand functions"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/make-styles",
+            "commit": "a76afe26daad901ff5458ffdda7e66e600d5bcac",
+            "comment": "improve types, add new types"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/make-styles",
+            "commit": "add7efae6339cc0fa85ccc37fea4371bc26074e1",
+            "comment": "Add shorthand functions for styles"
+          },
+          {
             "author": "[e-mail]",
             "package": "@fluentui/make-styles",
+            "commit": "dea36b70172522ea1d9da527ae961226ab2c847c",
+            "comment": "Add `unstable_filterCSSRule` option to default `createDOMRenderer`"
+          }
+        ],
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/make-styles",
+            "commit": "7c5dc03c415baf9a2d8a7ff104b2c0e3bff6daca",
+            "comment": "update tooling config"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/make-styles",
+            "commit": "3360b45ec159250b1346c91afad7dce138e6bc20",
+            "comment": "Add casts to work around typescript 4.3 issue"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/make-styles",
+            "commit": "28ceaaa83cd92a0389c466f0b15b283e3d9b08e4",
+            "comment": "fixup! fixup! chore: update all jest deps to v25 + apply single version policy"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 25 Nov 2021 08:34:10 GMT",
+      "tag": "@fluentui/make-styles_v9.0.0-beta.3",
+      "version": "9.0.0-beta.3",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/make-styles",
             "commit": "58db204f28af1d68df7260ff580cf91f0adcfb66",
@@ -22,0 +75,0 @@ "comment": "Add development warning for unresolved style rules"

CHANGELOG.md

 # Change Log - @fluentui/make-styles
 
-This log was last generated on Fri, 19 Nov 2021 04:18:58 GMT and should not be manually modified.
+This log was last generated on Thu, 16 Dec 2021 04:14:52 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly57a9843f2620211119.1](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v0.0.0-nightly57a9843f2620211119.1)
+## [0.0.0-nightly58c310891320211216.1](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v0.0.0-nightly58c310891320211216.1)
 
-Fri, 19 Nov 2021 04:18:58 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v9.0.0-beta.2..@fluentui/make-styles_v0.0.0-nightly57a9843f2620211119.1)
+Thu, 16 Dec 2021 04:14:52 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v9.0.0-beta.3..@fluentui/make-styles_v0.0.0-nightly58c310891320211216.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/e6017db01058700b10f0f2b6b36ef51efb28b9b9) by email not defined)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/919f08a1b25cd5045dc729d44a65f64f7838f4dc) by email not defined)
+- fix: improve return types for shorthand functions ([PR #21001](https://github.com/microsoft/fluentui/pull/21001) by [e-mail])
+- improve types, add new types ([PR #20786](https://github.com/microsoft/fluentui/pull/20786) by [e-mail])
+- Add shorthand functions for styles ([PR #20628](https://github.com/microsoft/fluentui/pull/20628) by [e-mail])
+- Add `unstable_filterCSSRule` option to default `createDOMRenderer` ([PR #20827](https://github.com/microsoft/fluentui/pull/20827) by [e-mail])
+
+## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v9.0.0-beta.3)
+
+Thu, 25 Nov 2021 08:34:10 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v9.0.0-beta.2..@fluentui/make-styles_v9.0.0-beta.3)
+
+### Changes
+
 - Add development warning for unresolved style rules ([PR #20541](https://github.com/microsoft/fluentui/pull/20541) by [e-mail])
@@ -16,0 +28,0 @@ - Bumps rtl-css-js to 1.14.5, fixes[#20572](https://github.com/microsoft/fluentui/issues/20572) ([PR #20610](https://github.com/microsoft/fluentui/pull/20610) by [e-mail])

dist/make-styles.d.ts

@@ -1,2 +0,6 @@
-import { Properties } from 'csstype';
+import type { BorderColorProperty } from 'csstype';
+import type { BorderStyleProperty } from 'csstype';
+import type { BorderWidthProperty } from 'csstype';
+import * as CSS_2 from 'csstype';
+import type { OverflowProperty } from 'csstype';
 
@@ -10,3 +14,89 @@ /**
 
+declare function border(width: BorderWidthProperty<MakeStylesCSSValue>): BorderStyle;
+
+declare function border(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): BorderStyle;
+
+declare function border(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): BorderStyle;
+
+declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>): BorderBottomStyle;
+
+declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): BorderBottomStyle;
+
+declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): BorderBottomStyle;
+
+declare type BorderBottomStyle = Pick<MakeStylesStrictCSSObject, 'borderBottomWidth' | 'borderBottomStyle' | 'borderBottomColor'>;
+
+declare function borderColor(all: BorderColorProperty): BorderColorStyle;
+
+declare function borderColor(vertical: BorderColorProperty, horizontal: BorderColorProperty): BorderColorStyle;
+
+declare function borderColor(top: BorderColorProperty, horizontal: BorderColorProperty, bottom: BorderColorProperty): BorderColorStyle;
+
+declare function borderColor(top: BorderColorProperty, right: BorderColorProperty, bottom: BorderColorProperty, left: BorderColorProperty): BorderColorStyle;
+
+declare type BorderColorStyle = Pick<MakeStylesStrictCSSObject, 'borderTopColor' | 'borderRightColor' | 'borderBottomColor' | 'borderLeftColor'>;
+
+declare function borderLeft(width: BorderWidthProperty<MakeStylesCSSValue>): BorderLeftStyle;
+
+declare function borderLeft(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): BorderLeftStyle;
+
+declare function borderLeft(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): BorderLeftStyle;
+
+declare type BorderLeftStyle = Pick<MakeStylesStrictCSSObject, 'borderLeftColor' | 'borderLeftStyle' | 'borderLeftWidth'>;
+
 /**
+ * A function that implements CSS spec conformant expansion for "borderRadius". "/" is not supported, please use CSS
+ * longhands directly.
+ *
+ * @example
+ *   borderRadius('10px')
+ *   borderRadius('10px', '5%')
+ *   borderRadius('2px', '4px', '8px')
+ *   borderRadius('1px', 0, '3px', '4px')
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
+ */
+declare function borderRadius(value1: MakeStylesCSSValue, value2?: MakeStylesCSSValue, value3?: MakeStylesCSSValue, value4?: MakeStylesCSSValue): BorderRadiusStyle;
+
+declare type BorderRadiusStyle = Pick<MakeStylesStrictCSSObject, 'borderBottomRightRadius' | 'borderBottomLeftRadius' | 'borderTopRightRadius' | 'borderTopLeftRadius'>;
+
+declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>): BorderRightStyle;
+
+declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): BorderRightStyle;
+
+declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): BorderRightStyle;
+
+declare type BorderRightStyle = Pick<MakeStylesStrictCSSObject, 'borderRightWidth' | 'borderRightStyle' | 'borderRightColor'>;
+
+declare type BorderStyle = Pick<MakeStylesStrictCSSObject, 'borderTopColor' | 'borderTopStyle' | 'borderTopWidth' | 'borderRightColor' | 'borderRightStyle' | 'borderRightWidth' | 'borderBottomColor' | 'borderBottomStyle' | 'borderBottomWidth' | 'borderLeftColor' | 'borderLeftStyle' | 'borderLeftWidth'>;
+
+declare function borderStyle(all: BorderStyleProperty): BorderStyleStyle;
+
+declare function borderStyle(vertical: BorderStyleProperty, horizontal: BorderStyleProperty): BorderStyleStyle;
+
+declare function borderStyle(top: BorderStyleProperty, horizontal: BorderStyleProperty, bottom: BorderStyleProperty): BorderStyleStyle;
+
+declare function borderStyle(top: BorderStyleProperty, right: BorderStyleProperty, bottom: BorderStyleProperty, left: BorderStyleProperty): BorderStyleStyle;
+
+declare type BorderStyleStyle = Pick<MakeStylesStrictCSSObject, 'borderTopStyle' | 'borderRightStyle' | 'borderBottomStyle' | 'borderLeftStyle'>;
+
+declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>): BorderTopStyle;
+
+declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): BorderTopStyle;
+
+declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): BorderTopStyle;
+
+declare type BorderTopStyle = Pick<MakeStylesStrictCSSObject, 'borderTopWidth' | 'borderTopStyle' | 'borderTopColor'>;
+
+declare function borderWidth(all: BorderWidthProperty<MakeStylesCSSValue>): BorderWidthStyle;
+
+declare function borderWidth(vertical: BorderWidthProperty<MakeStylesCSSValue>, horizontal: BorderWidthProperty<MakeStylesCSSValue>): BorderWidthStyle;
+
+declare function borderWidth(top: BorderWidthProperty<MakeStylesCSSValue>, horizontal: BorderWidthProperty<MakeStylesCSSValue>, bottom: BorderWidthProperty<MakeStylesCSSValue>): BorderWidthStyle;
+
+declare function borderWidth(top: BorderWidthProperty<MakeStylesCSSValue>, right: BorderWidthProperty<MakeStylesCSSValue>, bottom: BorderWidthProperty<MakeStylesCSSValue>, left: BorderWidthProperty<MakeStylesCSSValue>): BorderWidthStyle;
+
+declare type BorderWidthStyle = Pick<MakeStylesStrictCSSObject, 'borderTopStyle' | 'borderRightStyle' | 'borderBottomStyle' | 'borderLeftStyle'>;
+
+/**
  * @internal
@@ -21,7 +111,19 @@ */
  */
-export declare function createDOMRenderer(target?: Document | undefined): MakeStylesRenderer;
+export declare function createDOMRenderer(target?: Document | undefined, options?: CreateDOMRendererOptions): MakeStylesRenderer;
 
+export declare interface CreateDOMRendererOptions {
+    /**
+     * A filter run before css rule insertion to systematically remove css rules at render time.
+     * This can be used to forbid specific rules from being written to the style sheet at run time without
+     * affecting build time styles.
+     *
+     * ⚠️ Keep the filter as performant as possible to avoid negative performance impacts to your application.
+     * ⚠️ This API is unstable and can be removed from the library at any time.
+     */
+    unstable_filterCSSRule?: (cssRule: string) => boolean;
+}
+
 export declare type CSSClasses = /* ltrClassName */ string | [/* ltrClassName */ string, /* rtlClassName */ string];
 
-export declare type CSSClassesMap = Record<PropertyHash, CSSClasses>;
+declare type CSSClassesMap = Record<PropertyHash, CSSClasses>;
 
@@ -35,2 +137,15 @@ export declare type CSSClassesMapBySlot<Slots extends string | number> = Record<Slots, CSSClassesMap>;
 
+/**
+ * A function that implements CSS spec conformant expansion for "gap"
+ *
+ * @example
+ *   gap('10px')
+ *   gap('10px', '5px')
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/CSS/gap
+ */
+declare function gap(columnGap: MakeStylesCSSValue, rowGap?: MakeStylesCSSValue): GapStyle;
+
+declare type GapStyle = Pick<MakeStylesStrictCSSObject, 'columnGap' | 'rowGap'>;
+
 /** @internal */
@@ -45,6 +160,18 @@ export declare const HASH_PREFIX = "f";
 
-export declare type LookupItem = [/* definitions */ CSSClassesMap, /* dir */ /* dir */ 'rtl' | 'ltr'];
+declare type LookupItem = [/* definitions */ CSSClassesMap, /* dir */ /* dir */ 'rtl' | 'ltr'];
 
-export declare type MakeStaticStyles = ({
-    [key: string]: Properties & Record<string, any>;
+export declare type MakeStaticStyles = MakeStaticStylesStyle | string;
+
+/**
+ * Register static css.
+ * @param styles - styles object or string.
+ */
+export declare function makeStaticStyles(styles: MakeStaticStyles | MakeStaticStyles[]): (options: MakeStaticStylesOptions) => void;
+
+export declare interface MakeStaticStylesOptions {
+    renderer: MakeStylesRenderer;
+}
+
+export declare type MakeStaticStylesStyle = {
+    [key: string]: CSS_2.Properties & Record<string, any>;
 } & {
@@ -62,21 +189,22 @@ '@font-face'?: {
     };
-}) | string;
+};
 
-/**
- * Register static css.
- * @param styles - styles object or string.
- */
-export declare function makeStaticStyles(styles: MakeStaticStyles | MakeStaticStyles[]): (options: MakeStaticStylesOptions) => void;
+export declare function makeStyles<Slots extends string | number, Tokens>(stylesBySlots: StylesBySlots<Slots, Tokens>, unstable_cssPriority?: number): (options: MakeStylesOptions) => Record<Slots, string>;
 
-export declare interface MakeStaticStylesOptions {
-    renderer: MakeStylesRenderer;
-}
+export declare type MakeStylesAnimation = Record<'from' | 'to' | string, MakeStylesCSSObjectCustom>;
 
-export declare interface MakeStyles extends Omit<Properties, 'animationName'> {
-    [key: string]: any;
-    animationName?: object | string;
-}
+declare type MakeStylesCSSObjectCustom = {
+    [Property: string]: MakeStylesStyle | string | 0;
+};
 
-export declare function makeStyles<Slots extends string | number, Tokens>(stylesBySlots: StylesBySlots<Slots, Tokens>, unstable_cssPriority?: number): (options: MakeStylesOptions) => Record<Slots, string>;
+declare type MakeStylesCSSProperties = Omit<CSS_2.Properties<MakeStylesCSSValue>, 'animationName'>;
 
+declare type MakeStylesCSSPseudos = {
+    [Property in CSS_2.Pseudos]?: MakeStylesStrictCSSObject & {
+        content?: string;
+    };
+};
+
+declare type MakeStylesCSSValue = string | 0;
+
 export declare interface MakeStylesOptions {
@@ -103,6 +231,22 @@ dir: 'ltr' | 'rtl';
 
-export declare type MakeStylesStyleFunctionRule<Tokens> = (tokens: Tokens) => MakeStyles;
+declare type MakeStylesStrictCSSObject = MakeStylesCSSProperties & MakeStylesCSSPseudos & {
+    animationName?: MakeStylesAnimation | MakeStylesAnimation[] | CSS_2.AnimationProperty;
+};
 
-export declare type MakeStylesStyleRule<Tokens> = MakeStyles | MakeStylesStyleFunctionRule<Tokens>;
+export declare type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustom;
 
+export declare type MakeStylesStyleFunctionRule<Tokens> = (tokens: Tokens) => MakeStylesStyle;
+
+export declare type MakeStylesStyleRule<Tokens> = MakeStylesStyle | MakeStylesStyleFunctionRule<Tokens>;
+
+declare function margin(all: MakeStylesCSSValue): MarginStyle;
+
+declare function margin(vertical: MakeStylesCSSValue, horizontal: MakeStylesCSSValue): MarginStyle;
+
+declare function margin(top: MakeStylesCSSValue, horizontal: MakeStylesCSSValue, bottom: MakeStylesCSSValue): MarginStyle;
+
+declare function margin(top: MakeStylesCSSValue, right: MakeStylesCSSValue, bottom: MakeStylesCSSValue, left: MakeStylesCSSValue): MarginStyle;
+
+declare type MarginStyle = Pick<MakeStylesStrictCSSObject, 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft'>;
+
 /**
@@ -127,4 +271,27 @@ * Function can take any number of arguments, joins classes together and deduplicates atomic declarations generated by
 
-export declare type PropertyHash = string;
+/**
+ * A function that implements CSS spec conformant expansion for "overflow"
+ *
+ * @example
+ *   overflow('hidden')
+ *   overflow('hidden', 'scroll')
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
+ */
+declare function overflow(overflowX: OverflowProperty, overflowY?: OverflowProperty): OverflowStyle;
 
+declare type OverflowStyle = Pick<MakeStylesStrictCSSObject, 'overflowX' | 'overflowY'>;
+
+declare function padding(all: MakeStylesCSSValue): PaddingStyle;
+
+declare function padding(vertical: MakeStylesCSSValue, horizontal: MakeStylesCSSValue): PaddingStyle;
+
+declare function padding(top: MakeStylesCSSValue, horizontal: MakeStylesCSSValue, bottom: MakeStylesCSSValue): PaddingStyle;
+
+declare function padding(top: MakeStylesCSSValue, right: MakeStylesCSSValue, bottom: MakeStylesCSSValue, left: MakeStylesCSSValue): PaddingStyle;
+
+declare type PaddingStyle = Pick<MakeStylesStrictCSSObject, 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft'>;
+
+declare type PropertyHash = string;
+
 /**
@@ -148,3 +315,3 @@ * Should be called in a case of Server-Side rendering. Rehydrates cache from for a renderer to avoid double insertion
  */
-export declare function resolveStyleRules(styles: MakeStyles, unstable_cssPriority?: number): [CSSClassesMap, CSSRulesByBucket];
+export declare function resolveStyleRules(styles: MakeStylesStyle, unstable_cssPriority?: number): [CSSClassesMap, CSSRulesByBucket];
 
@@ -167,4 +334,20 @@ /**
 
-export declare type SequenceHash = string;
+declare type SequenceHash = string;
 
+export declare const shorthands: {
+    border: typeof border;
+    borderLeft: typeof borderLeft;
+    borderBottom: typeof borderBottom;
+    borderRight: typeof borderRight;
+    borderTop: typeof borderTop;
+    borderColor: typeof borderColor;
+    borderStyle: typeof borderStyle;
+    borderRadius: typeof borderRadius;
+    borderWidth: typeof borderWidth;
+    gap: typeof gap;
+    margin: typeof margin;
+    padding: typeof padding;
+    overflow: typeof overflow;
+};
+
 /**
@@ -182,4 +365,4 @@ * Buckets under which we will group our stylesheets.
 
-export declare type StylesBySlots<Slots extends string | number, Tokens> = Record<Slots, MakeStylesStyleRule<Tokens>>;
+declare type StylesBySlots<Slots extends string | number, Tokens> = Record<Slots, MakeStylesStyleRule<Tokens>>;
 
 export { }

lib-commonjs/__styles.js

@@ -8,3 +8,3 @@ "use strict";
 
-var reduceToClassNameForSlots_1 = /*#__PURE__*/require("./runtime/reduceToClassNameForSlots");
+const reduceToClassNameForSlots_1 = /*#__PURE__*/require("./runtime/reduceToClassNameForSlots");
 /**
@@ -18,12 +18,14 @@ * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
 function __styles(classesMapBySlot, cssRules) {
-  var insertionCache = {};
-  var ltrClassNamesForSlots = null;
-  var rtlClassNamesForSlots = null;
+  const insertionCache = {};
+  let ltrClassNamesForSlots = null;
+  let rtlClassNamesForSlots = null;
 
   function computeClasses(options) {
-    var dir = options.dir,
-        renderer = options.renderer;
-    var isLTR = dir === 'ltr'; // As RTL classes are different they should have a different cache key for insertion
+    const {
+      dir,
+      renderer
+    } = options;
+    const isLTR = dir === 'ltr'; // As RTL classes are different they should have a different cache key for insertion
 
-    var rendererId = isLTR ? renderer.id : renderer.id + 'r';
+    const rendererId = isLTR ? renderer.id : renderer.id + 'r';
 
@@ -30,0 +32,0 @@ if (isLTR) {

lib-commonjs/index.d.ts

@@ -0,2 +1,19 @@
+import { border, borderLeft, borderBottom, borderRight, borderTop, borderColor, borderStyle, borderRadius, borderWidth, gap, margin, padding, overflow } from './shorthands/index';
+export declare const shorthands: {
+    border: typeof border;
+    borderLeft: typeof borderLeft;
+    borderBottom: typeof borderBottom;
+    borderRight: typeof borderRight;
+    borderTop: typeof borderTop;
+    borderColor: typeof borderColor;
+    borderStyle: typeof borderStyle;
+    borderRadius: typeof borderRadius;
+    borderWidth: typeof borderWidth;
+    gap: typeof gap;
+    margin: typeof margin;
+    padding: typeof padding;
+    overflow: typeof overflow;
+};
 export { createDOMRenderer } from './renderer/createDOMRenderer';
+export type { CreateDOMRendererOptions } from './renderer/createDOMRenderer';
 export { styleBucketOrdering } from './renderer/getStyleSheetForBucket';
@@ -11,3 +28,3 @@ export { rehydrateRendererCache } from './renderer/rehydrateRendererCache';
 export { __styles } from './__styles';
-export * from './types';
 export * from './constants';
+export type { MakeStaticStylesStyle, MakeStaticStyles, MakeStylesAnimation, MakeStylesStyle, MakeStylesStyleRule, MakeStylesStyleFunctionRule, CSSClasses, CSSClassesMapBySlot, CSSRulesByBucket, StyleBucketName, MakeStaticStylesOptions, MakeStylesOptions, MakeStylesRenderer, } from './types';

lib-commonjs/index.js

@@ -6,6 +6,26 @@ "use strict";
 });
-exports.__styles = exports.resolveStyleRules = exports.resolveProxyValues = exports.createCSSVariablesProxy = exports.resolveStyleRulesForSlots = exports.makeStyles = exports.makeStaticStyles = exports.mergeClasses = exports.rehydrateRendererCache = exports.styleBucketOrdering = exports.createDOMRenderer = void 0;
+exports.__styles = exports.resolveStyleRules = exports.resolveProxyValues = exports.createCSSVariablesProxy = exports.resolveStyleRulesForSlots = exports.makeStyles = exports.makeStaticStyles = exports.mergeClasses = exports.rehydrateRendererCache = exports.styleBucketOrdering = exports.createDOMRenderer = exports.shorthands = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib"); // This should be just "export * as shorthands from "
+// https://github.com/microsoft/fluentui/issues/20694
 
+
+const index_1 = /*#__PURE__*/require("./shorthands/index");
+
+exports.shorthands = {
+  border: index_1.border,
+  borderLeft: index_1.borderLeft,
+  borderBottom: index_1.borderBottom,
+  borderRight: index_1.borderRight,
+  borderTop: index_1.borderTop,
+  borderColor: index_1.borderColor,
+  borderStyle: index_1.borderStyle,
+  borderRadius: index_1.borderRadius,
+  borderWidth: index_1.borderWidth,
+  gap: index_1.gap,
+  margin: index_1.margin,
+  padding: index_1.padding,
+  overflow: index_1.overflow
+};
+
 var createDOMRenderer_1 = /*#__PURE__*/require("./renderer/createDOMRenderer");
@@ -107,5 +127,3 @@
 
-tslib_1.__exportStar(require("./types"), exports);
-
 tslib_1.__exportStar(require("./constants"), exports);
 //# sourceMappingURL=index.js.map

lib-commonjs/makeStaticStyles.js

@@ -8,3 +8,3 @@ "use strict";
 
-var resolveStaticStyleRules_1 = /*#__PURE__*/require("./runtime/resolveStaticStyleRules");
+const resolveStaticStyleRules_1 = /*#__PURE__*/require("./runtime/resolveStaticStyleRules");
 /**
@@ -17,7 +17,7 @@ * Register static css.
 function makeStaticStyles(styles) {
-  var styleCache = {};
-  var stylesSet = Array.isArray(styles) ? styles : [styles];
+  const styleCache = {};
+  const stylesSet = Array.isArray(styles) ? styles : [styles];
 
   function useStaticStyles(options) {
-    var cacheKey = options.renderer.id;
+    const cacheKey = options.renderer.id;
 
@@ -28,4 +28,3 @@ if (styleCache[cacheKey]) {
 
-    for (var _i = 0, stylesSet_1 = stylesSet; _i < stylesSet_1.length; _i++) {
-      var styleRules = stylesSet_1[_i];
+    for (const styleRules of stylesSet) {
       options.renderer.insertCSSRules(resolveStaticStyleRules_1.resolveStaticStyleRules(styleRules));
@@ -32,0 +31,0 @@ }

lib-commonjs/makeStyles.js

@@ -8,30 +8,26 @@ "use strict";
 
-var reduceToClassNameForSlots_1 = /*#__PURE__*/require("./runtime/reduceToClassNameForSlots");
+const reduceToClassNameForSlots_1 = /*#__PURE__*/require("./runtime/reduceToClassNameForSlots");
 
-var resolveStyleRulesForSlots_1 = /*#__PURE__*/require("./resolveStyleRulesForSlots");
+const resolveStyleRulesForSlots_1 = /*#__PURE__*/require("./resolveStyleRulesForSlots");
 
-function makeStyles(stylesBySlots, unstable_cssPriority) {
-  if (unstable_cssPriority === void 0) {
-    unstable_cssPriority = 0;
-  }
+function makeStyles(stylesBySlots, unstable_cssPriority = 0) {
+  const insertionCache = {};
+  let classesMapBySlot = null;
+  let cssRules = null;
+  let ltrClassNamesForSlots = null;
+  let rtlClassNamesForSlots = null;
 
-  var insertionCache = {};
-  var classesMapBySlot = null;
-  var cssRules = null;
-  var ltrClassNamesForSlots = null;
-  var rtlClassNamesForSlots = null;
-
   function computeClasses(options) {
-    var _a;
+    const {
+      dir,
+      renderer
+    } = options;
 
-    var dir = options.dir,
-        renderer = options.renderer;
-
     if (classesMapBySlot === null) {
-      _a = resolveStyleRulesForSlots_1.resolveStyleRulesForSlots(stylesBySlots, unstable_cssPriority), classesMapBySlot = _a[0], cssRules = _a[1];
+      [classesMapBySlot, cssRules] = resolveStyleRulesForSlots_1.resolveStyleRulesForSlots(stylesBySlots, unstable_cssPriority);
     }
 
-    var isLTR = dir === 'ltr'; // As RTL classes are different they should have a different cache key for insertion
+    const isLTR = dir === 'ltr'; // As RTL classes are different they should have a different cache key for insertion
 
-    var rendererId = isLTR ? renderer.id : renderer.id + 'r';
+    const rendererId = isLTR ? renderer.id : renderer.id + 'r';
 
@@ -38,0 +34,0 @@ if (isLTR) {

lib-commonjs/mergeClasses.js

@@ -8,11 +8,11 @@ "use strict";
 
-var constants_1 = /*#__PURE__*/require("./constants");
+const constants_1 = /*#__PURE__*/require("./constants");
 
-var hashSequence_1 = /*#__PURE__*/require("./runtime/utils/hashSequence");
+const hashSequence_1 = /*#__PURE__*/require("./runtime/utils/hashSequence");
 
-var reduceToClassNameForSlots_1 = /*#__PURE__*/require("./runtime/reduceToClassNameForSlots"); // Contains a mapping of previously resolved sequences of atomic classnames
+const reduceToClassNameForSlots_1 = /*#__PURE__*/require("./runtime/reduceToClassNameForSlots"); // Contains a mapping of previously resolved sequences of atomic classnames
 
 
-var mergeClassesCachedResults = {};
-var SEQUENCE_SIZE = constants_1.SEQUENCE_PREFIX.length + constants_1.SEQUENCE_HASH_LENGTH;
+const mergeClassesCachedResults = {};
+const SEQUENCE_SIZE = constants_1.SEQUENCE_PREFIX.length + constants_1.SEQUENCE_HASH_LENGTH;
 
@@ -22,11 +22,11 @@ function mergeClasses() {
   // @see https://babeljs.io/docs/en/babel-plugin-transform-parameters
-  var dir = null;
-  var resultClassName = ''; // Is used as a cache key to avoid object merging
+  let dir = null;
+  let resultClassName = ''; // Is used as a cache key to avoid object merging
 
-  var sequenceMatch = '';
-  var sequenceMappings = [];
+  let sequenceMatch = '';
+  const sequenceMappings = [];
 
-  for (var i = 0; i < arguments.length; i++) {
+  for (let i = 0; i < arguments.length; i++) {
     // eslint-disable-next-line prefer-rest-params
-    var className = arguments[i];
+    const className = arguments[i];
 
@@ -36,3 +36,3 @@ if (typeof className === 'string') {
       // without parsing each className in a string
-      var sequenceIndex = className.indexOf(constants_1.SEQUENCE_PREFIX);
+      const sequenceIndex = className.indexOf(constants_1.SEQUENCE_PREFIX);
 
@@ -42,4 +42,4 @@ if (sequenceIndex === -1) {
       } else {
-        var sequenceId = className.slice(sequenceIndex, sequenceIndex + SEQUENCE_SIZE);
-        var sequenceMapping = constants_1.DEFINITION_LOOKUP_TABLE[sequenceId]; // Handles a case with mixed classnames, i.e. "ui-button ATOMIC_CLASSES"
+        const sequenceId = className.slice(sequenceIndex, sequenceIndex + SEQUENCE_SIZE);
+        const sequenceMapping = constants_1.DEFINITION_LOOKUP_TABLE[sequenceId]; // Handles a case with mixed classnames, i.e. "ui-button ATOMIC_CLASSES"
 
@@ -57,3 +57,3 @@ if (sequenceIndex > 0) {
               // eslint-disable-next-line no-console
-              console.error("mergeClasses(): a passed string contains an identifier (" + sequenceId + ") that has different direction " + ("(dir=\"" + (sequenceMapping[1] ? 'rtl' : 'ltr') + "\") setting than other classes. This is not supported. ") + ("Source string: " + className));
+              console.error(`mergeClasses(): a passed string contains an identifier (${sequenceId}) that has different direction ` + `(dir="${sequenceMapping[1] ? 'rtl' : 'ltr'}") setting than other classes. This is not supported. ` + `Source string: ${className}`);
             }
@@ -66,3 +66,3 @@ }
             // eslint-disable-next-line no-console
-            console.error("mergeClasses(): a passed string contains an identifier (" + sequenceId + ") that does not match any entry " + ("in cache. Source string: " + className));
+            console.error(`mergeClasses(): a passed string contains an identifier (${sequenceId}) that does not match any entry ` + `in cache. Source string: ${className}`);
           }
@@ -75,3 +75,3 @@ }
           // eslint-disable-next-line no-console
-          console.error('mergeClasses(): a passed string contains multiple identifiers of atomic classes (classes that start ' + ("with \"" + constants_1.SEQUENCE_PREFIX + "\"), it's possible that passed classes were concatenated in a wrong way. ") + ("Source string: " + className));
+          console.error('mergeClasses(): a passed string contains multiple identifiers of atomic classes (classes that start ' + `with "${constants_1.SEQUENCE_PREFIX}"), it's possible that passed classes were concatenated in a wrong way. ` + `Source string: ${className}`);
         }
@@ -90,3 +90,3 @@ }
 
-  var mergeClassesResult = mergeClassesCachedResults[sequenceMatch];
+  const mergeClassesResult = mergeClassesCachedResults[sequenceMatch];
 
@@ -98,7 +98,7 @@ if (mergeClassesResult !== undefined) {
 
-  var resultDefinitions = Object.assign.apply(Object, // .assign() mutates the first object, we can't mutate mappings as it will produce invalid results later
+  const resultDefinitions = Object.assign.apply(Object, // .assign() mutates the first object, we can't mutate mappings as it will produce invalid results later
   [{}].concat(sequenceMappings));
-  var atomicClassNames = reduceToClassNameForSlots_1.reduceToClassName(resultDefinitions, dir); // Each merge of classes generates a new sequence of atomic classes that needs to be registered
+  let atomicClassNames = reduceToClassNameForSlots_1.reduceToClassName(resultDefinitions, dir); // Each merge of classes generates a new sequence of atomic classes that needs to be registered
 
-  var newSequenceHash = hashSequence_1.hashSequence(atomicClassNames, dir);
+  const newSequenceHash = hashSequence_1.hashSequence(atomicClassNames, dir);
   atomicClassNames = newSequenceHash + ' ' + atomicClassNames;
@@ -105,0 +105,0 @@ mergeClassesCachedResults[sequenceMatch] = atomicClassNames;

lib-commonjs/renderer/createDOMRenderer.d.ts

 import { MakeStylesRenderer } from '../types';
+export interface CreateDOMRendererOptions {
+    /**
+     * A filter run before css rule insertion to systematically remove css rules at render time.
+     * This can be used to forbid specific rules from being written to the style sheet at run time without
+     * affecting build time styles.
+     *
+     * ⚠️ Keep the filter as performant as possible to avoid negative performance impacts to your application.
+     * ⚠️ This API is unstable and can be removed from the library at any time.
+     */
+    unstable_filterCSSRule?: (cssRule: string) => boolean;
+}
 /**
@@ -7,2 +18,2 @@ * Creates a new instances of a renderer.
  */
-export declare function createDOMRenderer(target?: Document | undefined): MakeStylesRenderer;
+export declare function createDOMRenderer(target?: Document | undefined, options?: CreateDOMRendererOptions): MakeStylesRenderer;

lib-commonjs/renderer/createDOMRenderer.js

@@ -8,5 +8,5 @@ "use strict";
 
-var getStyleSheetForBucket_1 = /*#__PURE__*/require("./getStyleSheetForBucket");
+const getStyleSheetForBucket_1 = /*#__PURE__*/require("./getStyleSheetForBucket");
 
-var lastIndex = 0;
+let lastIndex = 0;
 /**
@@ -18,19 +18,19 @@ * Creates a new instances of a renderer.
 
-function createDOMRenderer(target) {
-  if (target === void 0) {
-    target = typeof document === 'undefined' ? undefined : document;
-  }
-
-  var renderer = {
+function createDOMRenderer(target = typeof document === 'undefined' ? undefined : document, options = {}) {
+  const {
+    unstable_filterCSSRule
+  } = options;
+  const renderer = {
     insertionCache: {},
     styleElements: {},
-    id: "d" + lastIndex++,
-    insertCSSRules: function (cssRules) {
+    id: `d${lastIndex++}`,
+
+    insertCSSRules(cssRules) {
       // eslint-disable-next-line guard-for-in
-      for (var styleBucketName in cssRules) {
-        var cssRulesForBucket = cssRules[styleBucketName];
-        var sheet = target && getStyleSheetForBucket_1.getStyleSheetForBucket(styleBucketName, target, renderer); // This is a hot path in rendering styles: ".length" is cached in "l" var to avoid accesses the property
+      for (const styleBucketName in cssRules) {
+        const cssRulesForBucket = cssRules[styleBucketName];
+        const sheet = target && getStyleSheetForBucket_1.getStyleSheetForBucket(styleBucketName, target, renderer); // This is a hot path in rendering styles: ".length" is cached in "l" var to avoid accesses the property
 
-        for (var i = 0, l = cssRulesForBucket.length; i < l; i++) {
-          var ruleCSS = cssRulesForBucket[i];
+        for (let i = 0, l = cssRulesForBucket.length; i < l; i++) {
+          const ruleCSS = cssRulesForBucket[i];
 
@@ -45,3 +45,9 @@ if (renderer.insertionCache[ruleCSS]) {
             try {
-              sheet.insertRule(ruleCSS, sheet.cssRules.length);
+              if (unstable_filterCSSRule) {
+                if (unstable_filterCSSRule(ruleCSS)) {
+                  sheet.insertRule(ruleCSS, sheet.cssRules.length);
+                }
+              } else {
+                sheet.insertRule(ruleCSS, sheet.cssRules.length);
+              }
             } catch (e) {
@@ -51,3 +57,3 @@ // We've disabled these warnings due to false-positive errors with browser prefixes
                 // eslint-disable-next-line no-console
-                console.error("There was a problem inserting the following rule: \"" + ruleCSS + "\"", e);
+                console.error(`There was a problem inserting the following rule: "${ruleCSS}"`, e);
               }
@@ -59,2 +65,3 @@ }
     }
+
   };
@@ -69,4 +76,4 @@ return renderer;
 
-var ignoreSuffixes = /*#__PURE__*/['-moz-placeholder', '-moz-focus-inner', '-moz-focusring', '-ms-input-placeholder', '-moz-read-write', '-moz-read-only'].join('|');
-var ignoreSuffixesRegex = /*#__PURE__*/new RegExp(":(" + ignoreSuffixes + ")");
+const ignoreSuffixes = /*#__PURE__*/['-moz-placeholder', '-moz-focus-inner', '-moz-focusring', '-ms-input-placeholder', '-moz-read-write', '-moz-read-only'].join('|');
+const ignoreSuffixesRegex = /*#__PURE__*/new RegExp(`:(${ignoreSuffixes})`);
 //# sourceMappingURL=createDOMRenderer.js.map

lib-commonjs/renderer/getStyleSheetForBucket.js

@@ -30,7 +30,7 @@ "use strict";
   if (!renderer.styleElements[bucketName]) {
-    var currentBucketIndex = exports.styleBucketOrdering.indexOf(bucketName) + 1;
-    var nextBucketFromCache = null; // Find the next bucket which we will add our new style bucket before.
+    let currentBucketIndex = exports.styleBucketOrdering.indexOf(bucketName) + 1;
+    let nextBucketFromCache = null; // Find the next bucket which we will add our new style bucket before.
 
     for (; currentBucketIndex < exports.styleBucketOrdering.length; currentBucketIndex++) {
-      var nextBucket = renderer.styleElements[exports.styleBucketOrdering[currentBucketIndex]];
+      const nextBucket = renderer.styleElements[exports.styleBucketOrdering[currentBucketIndex]];
 
@@ -43,3 +43,3 @@ if (nextBucket) {
 
-    var tag = target.createElement('style');
+    const tag = target.createElement('style');
     tag.dataset.makeStylesBucket = bucketName;
@@ -46,0 +46,0 @@ renderer.styleElements[bucketName] = tag;

lib-commonjs/renderer/rehydrateRendererCache.js

@@ -8,8 +8,7 @@ "use strict";
 // https://github.com/styletron/styletron/blob/e0fcae826744eb00ce679ac613a1b10d44256660/packages/styletron-engine-atomic/src/client/client.js#L8
-// eslint-disable-next-line @fluentui/max-len
 
-var KEYFRAMES_HYDRATOR = /@(-webkit-)?keyframes ([^{]+){((?:(?:from|to|(?:\d+\.?\d*%))\{(?:[^}])*})*)}/g;
-var AT_RULES_HYDRATOR = /@(media|supports)[^{]+\{([\s\S]+?})\s*}/g;
-var STYLES_HYDRATOR = /\.([^{:]+)(:[^{]+)?{(?:[^}]*;)?([^}]*?)}/g;
-var regexps = {
+const KEYFRAMES_HYDRATOR = /@(-webkit-)?keyframes ([^{]+){((?:(?:from|to|(?:\d+\.?\d*%))\{(?:[^}])*})*)}/g;
+const AT_RULES_HYDRATOR = /@(media|supports)[^{]+\{([\s\S]+?})\s*}/g;
+const STYLES_HYDRATOR = /\.([^{:]+)(:[^{]+)?{(?:[^}]*;)?([^}]*?)}/g;
+const regexps = {
   k: KEYFRAMES_HYDRATOR,
@@ -25,12 +24,8 @@ t: AT_RULES_HYDRATOR
 
-function rehydrateRendererCache(renderer, target) {
-  if (target === void 0) {
-    target = typeof document === 'undefined' ? undefined : document;
-  }
-
+function rehydrateRendererCache(renderer, target = typeof document === 'undefined' ? undefined : document) {
   if (target) {
-    var styleElements = target.querySelectorAll('[data-make-styles-bucket]');
-    styleElements.forEach(function (styleElement) {
-      var bucketName = styleElement.dataset.makeStylesBucket;
-      var regex = regexps[bucketName] || STYLES_HYDRATOR; // 👇 If some elements are not created yet, we will register them in renderer
+    const styleElements = target.querySelectorAll('[data-make-styles-bucket]');
+    styleElements.forEach(styleElement => {
+      const bucketName = styleElement.dataset.makeStylesBucket;
+      const regex = regexps[bucketName] || STYLES_HYDRATOR; // 👇 If some elements are not created yet, we will register them in renderer
 
@@ -41,7 +36,7 @@ if (!renderer.styleElements[bucketName]) {
 
-      var match;
+      let match;
 
       while (match = regex.exec(styleElement.textContent)) {
         // "cacheKey" is either a class name or an animation name
-        var cssRule = match[0];
+        const [cssRule] = match;
         renderer.insertionCache[cssRule] = bucketName;
@@ -48,0 +43,0 @@ }

lib-commonjs/resolveStyleRulesForSlots.js

@@ -8,5 +8,5 @@ "use strict";
 
-var createCSSVariablesProxy_1 = /*#__PURE__*/require("./runtime/createCSSVariablesProxy");
+const createCSSVariablesProxy_1 = /*#__PURE__*/require("./runtime/createCSSVariablesProxy");
 
-var resolveStyleRules_1 = /*#__PURE__*/require("./runtime/resolveStyleRules");
+const resolveStyleRules_1 = /*#__PURE__*/require("./runtime/resolveStyleRules");
 /**
@@ -23,22 +23,13 @@ * Calls resolveStyleRules() for each slot, is also used by build time transform.
 function resolveStyleRulesForSlots(stylesBySlots, unstable_cssPriority) {
-  var tokensProxy = createCSSVariablesProxy_1.createCSSVariablesProxy();
-  var classesMapBySlot = {};
-  var cssRules = {};
+  const tokensProxy = createCSSVariablesProxy_1.createCSSVariablesProxy();
+  const classesMapBySlot = {};
+  const cssRules = {}; // eslint-disable-next-line guard-for-in
 
-  var _loop_1 = function (slotName) {
-    var slotStyles = typeof stylesBySlots[slotName] === 'function' ? stylesBySlots[slotName](tokensProxy) : stylesBySlots[slotName];
-
-    var _a = resolveStyleRules_1.resolveStyleRules(slotStyles, unstable_cssPriority),
-        cssClassMap = _a[0],
-        cssRulesByBucket = _a[1];
-
+  for (const slotName in stylesBySlots) {
+    const slotStyles = typeof stylesBySlots[slotName] === 'function' ? stylesBySlots[slotName](tokensProxy) : stylesBySlots[slotName];
+    const [cssClassMap, cssRulesByBucket] = resolveStyleRules_1.resolveStyleRules(slotStyles, unstable_cssPriority);
     classesMapBySlot[slotName] = cssClassMap;
-    Object.keys(cssRulesByBucket).forEach(function (styleBucketName) {
+    Object.keys(cssRulesByBucket).forEach(styleBucketName => {
       cssRules[styleBucketName] = (cssRules[styleBucketName] || []).concat(cssRulesByBucket[styleBucketName]);
     });
-  }; // eslint-disable-next-line guard-for-in
-
-
-  for (var slotName in stylesBySlots) {
-    _loop_1(slotName);
   }
@@ -45,0 +36,0 @@

lib-commonjs/runtime/compileCSS.js

@@ -8,9 +8,9 @@ "use strict";
 
-var stylis_1 = /*#__PURE__*/require("stylis");
+const stylis_1 = /*#__PURE__*/require("stylis");
 
-var hyphenateProperty_1 = /*#__PURE__*/require("./utils/hyphenateProperty");
+const hyphenateProperty_1 = /*#__PURE__*/require("./utils/hyphenateProperty");
 
-var normalizeNestedProperty_1 = /*#__PURE__*/require("./utils/normalizeNestedProperty");
+const normalizeNestedProperty_1 = /*#__PURE__*/require("./utils/normalizeNestedProperty");
 
-var PSEUDO_SELECTOR_REGEX = /,( *[^ &])/g;
+const PSEUDO_SELECTOR_REGEX = /,( *[^ &])/g;
 
@@ -40,9 +40,7 @@ function repeatSelector(selector, times) {
 function compileCSSRules(cssRules) {
-  var rules = [];
+  const rules = [];
   stylis_1.serialize(stylis_1.compile(cssRules), stylis_1.middleware([stylis_1.prefixer, stylis_1.stringify, // 💡 we are using `.insertRule()` API for DOM operations, which does not support
   // insertion of multiple CSS rules in a single call. `rulesheet` plugin extracts
   // individual rules to be used with this API
-  stylis_1.rulesheet(function (rule) {
-    return rules.push(rule);
-  })]));
+  stylis_1.rulesheet(rule => rules.push(rule))]));
   return rules;
@@ -54,23 +52,25 @@ }
 function compileCSS(options) {
-  var className = options.className,
-      media = options.media,
-      pseudo = options.pseudo,
-      support = options.support,
-      property = options.property,
-      rtlClassName = options.rtlClassName,
-      rtlProperty = options.rtlProperty,
-      rtlValue = options.rtlValue,
-      value = options.value,
-      unstable_cssPriority = options.unstable_cssPriority;
-  var classNameSelector = repeatSelector("." + className, unstable_cssPriority);
-  var cssDeclaration = "{ " + hyphenateProperty_1.hyphenateProperty(property) + ": " + value + "; }";
-  var rtlClassNameSelector = null;
-  var rtlCSSDeclaration = null;
+  const {
+    className,
+    media,
+    pseudo,
+    support,
+    property,
+    rtlClassName,
+    rtlProperty,
+    rtlValue,
+    value,
+    unstable_cssPriority
+  } = options;
+  const classNameSelector = repeatSelector(`.${className}`, unstable_cssPriority);
+  const cssDeclaration = `{ ${hyphenateProperty_1.hyphenateProperty(property)}: ${value}; }`;
+  let rtlClassNameSelector = null;
+  let rtlCSSDeclaration = null;
 
   if (rtlProperty && rtlClassName) {
-    rtlClassNameSelector = repeatSelector("." + rtlClassName, unstable_cssPriority);
-    rtlCSSDeclaration = "{ " + hyphenateProperty_1.hyphenateProperty(rtlProperty) + ": " + rtlValue + "; }";
+    rtlClassNameSelector = repeatSelector(`.${rtlClassName}`, unstable_cssPriority);
+    rtlCSSDeclaration = `{ ${hyphenateProperty_1.hyphenateProperty(rtlProperty)}: ${rtlValue}; }`;
   }
 
-  var cssRule = ''; // Should be handled by namespace plugin of Stylis, is buggy now
+  let cssRule = ''; // Should be handled by namespace plugin of Stylis, is buggy now
   // Issues are reported:
@@ -82,20 +82,15 @@ // https://github.com/thysultan/stylis.js/issues/253
     // 👇 :global(GROUP_1)GROUP_2
-    var GLOBAL_PSEUDO_REGEX = /global\((.+)\)(.+)?/;
+    const GLOBAL_PSEUDO_REGEX = /global\((.+)\)(.+)?/;
+    const [, globalSelector, restPseudo = ''] = GLOBAL_PSEUDO_REGEX.exec(pseudo); // should be normalized to handle ":global(SELECTOR) &"
 
-    var _a = GLOBAL_PSEUDO_REGEX.exec(pseudo),
-        globalSelector = _a[1],
-        _b = _a[2],
-        restPseudo = _b === void 0 ? '' : _b; // should be normalized to handle ":global(SELECTOR) &"
-
-
-    var normalizedPseudo = normalizeNestedProperty_1.normalizeNestedProperty(restPseudo.trim());
-    var ltrRule = "" + classNameSelector + normalizedPseudo + " " + cssDeclaration;
-    var rtlRule = rtlProperty ? "" + rtlClassNameSelector + normalizedPseudo + " " + rtlCSSDeclaration : '';
-    cssRule = globalSelector + " { " + ltrRule + "; " + rtlRule + " }";
+    const normalizedPseudo = normalizeNestedProperty_1.normalizeNestedProperty(restPseudo.trim());
+    const ltrRule = `${classNameSelector}${normalizedPseudo} ${cssDeclaration}`;
+    const rtlRule = rtlProperty ? `${rtlClassNameSelector}${normalizedPseudo} ${rtlCSSDeclaration}` : '';
+    cssRule = `${globalSelector} { ${ltrRule}; ${rtlRule} }`;
   } else {
-    var normalizedPseudo = normalizePseudoSelector(pseudo);
-    cssRule = classNameSelector + "{" + normalizedPseudo + " " + cssDeclaration + "};";
+    const normalizedPseudo = normalizePseudoSelector(pseudo);
+    cssRule = `${classNameSelector}{${normalizedPseudo} ${cssDeclaration}};`;
 
     if (rtlProperty) {
-      cssRule = cssRule + "; " + rtlClassNameSelector + normalizedPseudo + " " + rtlCSSDeclaration + ";";
+      cssRule = `${cssRule}; ${rtlClassNameSelector}${normalizedPseudo} ${rtlCSSDeclaration};`;
     }
@@ -105,7 +100,7 @@ }
   if (media) {
-    cssRule = "@media " + media + " { " + cssRule + " }";
+    cssRule = `@media ${media} { ${cssRule} }`;
   }
 
   if (support) {
-    cssRule = "@supports " + support + " { " + cssRule + " }";
+    cssRule = `@supports ${support} { ${cssRule} }`;
   }
@@ -112,0 +107,0 @@

lib-commonjs/runtime/compileKeyframeCSS.d.ts

@@ -1,3 +0,3 @@
-import { MakeStyles } from '../types';
-export declare function compileKeyframeRule(keyframeObject: MakeStyles): string;
+import { MakeStylesAnimation } from '../types';
+export declare function compileKeyframeRule(keyframeObject: MakeStylesAnimation): string;
 /**
@@ -4,0 +4,0 @@ * Creates CSS rules for insertion from passed CSS.

lib-commonjs/runtime/compileKeyframeCSS.js

@@ -8,11 +8,11 @@ "use strict";
 
-var stylis_1 = /*#__PURE__*/require("stylis");
+const stylis_1 = /*#__PURE__*/require("stylis");
 
-var cssifyObject_1 = /*#__PURE__*/require("./utils/cssifyObject");
+const cssifyObject_1 = /*#__PURE__*/require("./utils/cssifyObject");
 
 function compileKeyframeRule(keyframeObject) {
-  var css = ''; // eslint-disable-next-line guard-for-in
+  let css = ''; // eslint-disable-next-line guard-for-in
 
-  for (var percentage in keyframeObject) {
-    css += percentage + "{" + cssifyObject_1.cssifyObject(keyframeObject[percentage]) + "}";
+  for (const percentage in keyframeObject) {
+    css += `${percentage}{${cssifyObject_1.cssifyObject(keyframeObject[percentage])}}`;
   }
@@ -29,10 +29,8 @@
 function compileKeyframesCSS(keyframeName, keyframeCSS) {
-  var cssRule = "@keyframes " + keyframeName + " {" + keyframeCSS + "}";
-  var rules = [];
+  const cssRule = `@keyframes ${keyframeName} {${keyframeCSS}}`;
+  const rules = [];
   stylis_1.serialize(stylis_1.compile(cssRule), stylis_1.middleware([stylis_1.prefixer, stylis_1.stringify, // 💡 we are using `.insertRule()` API for DOM operations, which does not support
   // insertion of multiple CSS rules in a single call. `rulesheet` plugin extracts
   // individual rules to be used with this API
-  stylis_1.rulesheet(function (rule) {
-    return rules.push(rule);
-  })]));
+  stylis_1.rulesheet(rule => rules.push(rule))]));
   return rules;
@@ -39,0 +37,0 @@ }

lib-commonjs/runtime/compileStaticCSS.d.ts

@@ -1,2 +0,2 @@
-import { MakeStyles } from '../types';
-export declare function compileStaticCSS(property: string, value: MakeStyles): string;
+import { MakeStaticStylesStyle } from '../types';
+export declare function compileStaticCSS(property: string, value: MakeStaticStylesStyle): string;

lib-commonjs/runtime/compileStaticCSS.js

@@ -8,8 +8,8 @@ "use strict";
 
-var compileCSS_1 = /*#__PURE__*/require("./compileCSS");
+const compileCSS_1 = /*#__PURE__*/require("./compileCSS");
 
-var cssifyObject_1 = /*#__PURE__*/require("./utils/cssifyObject");
+const cssifyObject_1 = /*#__PURE__*/require("./utils/cssifyObject");
 
 function compileStaticCSS(property, value) {
-  var cssRule = property + " {" + cssifyObject_1.cssifyObject(value) + "}";
+  const cssRule = `${property} {${cssifyObject_1.cssifyObject(value)}}`;
   return compileCSS_1.compileCSSRules(cssRule)[0];
@@ -16,0 +16,0 @@ }

lib-commonjs/runtime/createCSSVariablesProxy.js

@@ -7,3 +7,3 @@ "use strict";
 exports.resolveProxyValues = exports.isProxy = exports.createCSSVariablesProxy = void 0;
-var isProxySymbol = '__isProxy__';
+const isProxySymbol = '__isProxy__';
 /**
@@ -16,10 +16,11 @@ * @internal
   function proxyToStr() {
-    return "var(--" + prefix + ")";
+    return `var(--${prefix})`;
   }
 
-  var proxy = new Proxy(proxyToStr, {
-    has: function (_, key) {
+  const proxy = new Proxy(proxyToStr, {
+    has(_, key) {
       return key === isProxySymbol;
     },
-    get: function (target, key) {
+
+    get(target, key) {
       if (key === 'toString' || key === Symbol.toPrimitive) {
@@ -31,2 +32,3 @@ return target;
     }
+
   });
@@ -61,6 +63,6 @@ return proxy;
   if (typeof value === 'object') {
-    var expanded = {}; // eslint-disable-next-line guard-for-in
+    const expanded = {}; // eslint-disable-next-line guard-for-in
 
-    for (var key in value) {
-      var internalValue = value[key];
+    for (const key in value) {
+      const internalValue = value[key];
       expanded[key] = resolveProxyValues(internalValue);
@@ -67,0 +69,0 @@ }

lib-commonjs/runtime/expandShorthand.d.ts

@@ -1,2 +0,2 @@
-import { MakeStyles } from '../types';
+import { MakeStylesStyle } from '../types';
 /**
@@ -6,2 +6,2 @@ * A function that expands longhand properties ("margin", "padding") to their shorthand versions ("margin-left", etc.).
  */
-export declare function expandShorthand(style: MakeStyles, result?: MakeStyles): MakeStyles;
+export declare function expandShorthand(style: MakeStylesStyle, result?: MakeStylesStyle): MakeStylesStyle;

lib-commonjs/runtime/expandShorthand.js

@@ -8,3 +8,3 @@ "use strict";
 
-var inline_style_expand_shorthand_1 = /*#__PURE__*/require("inline-style-expand-shorthand");
+const inline_style_expand_shorthand_1 = /*#__PURE__*/require("inline-style-expand-shorthand");
 /**
@@ -16,13 +16,9 @@ * A function that expands longhand properties ("margin", "padding") to their shorthand versions ("margin-left", etc.).
 
-function expandShorthand(style, result) {
-  if (result === void 0) {
-    result = {};
-  } // eslint-disable-next-line guard-for-in
+function expandShorthand(style, result = {}) {
+  // eslint-disable-next-line guard-for-in
+  for (const property in style) {
+    const value = style[property];
 
-
-  for (var property in style) {
-    var value = style[property];
-
     if (typeof value === 'string' || typeof value === 'number') {
-      var expansion = inline_style_expand_shorthand_1.expandProperty(property, value);
+      const expansion = inline_style_expand_shorthand_1.expandProperty(property, value);
 
@@ -32,3 +28,5 @@ if (expansion) {
       } else {
-        result[property] = value;
+        // Cast to any to avoid "error TS2590: Expression produces a union type that is too complex to represent"
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        result[property] = value; // result[property as keyof MakeStylesStyle] = value;
       } // eslint-disable-next-line eqeqeq
@@ -40,2 +38,3 @@
     } else if (typeof value === 'object') {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       result[property] = expandShorthand(value);
@@ -42,0 +41,0 @@ }

lib-commonjs/runtime/getStyleBucketName.js

@@ -13,3 +13,3 @@ "use strict";
 
-var pseudosMap = {
+const pseudosMap = {
   // :focus-within
@@ -54,3 +54,3 @@ 'us-w': 'w',
 
-  var normalizedPseudo = pseudo.trim();
+  const normalizedPseudo = pseudo.trim();
 
@@ -57,0 +57,0 @@ if (normalizedPseudo.charCodeAt(0) === 58

lib-commonjs/runtime/reduceToClassNameForSlots.js

@@ -8,5 +8,5 @@ "use strict";
 
-var constants_1 = /*#__PURE__*/require("../constants");
+const constants_1 = /*#__PURE__*/require("../constants");
 
-var hashSequence_1 = /*#__PURE__*/require("./utils/hashSequence");
+const hashSequence_1 = /*#__PURE__*/require("./utils/hashSequence");
 /**
@@ -20,9 +20,9 @@ * Reduces a classname map for slot to a classname string. Uses classnames according to text directions.
 function reduceToClassName(classMap, dir) {
-  var className = ''; // eslint-disable-next-line guard-for-in
+  let className = ''; // eslint-disable-next-line guard-for-in
 
-  for (var propertyHash in classMap) {
-    var classNameMapping = classMap[propertyHash];
+  for (const propertyHash in classMap) {
+    const classNameMapping = classMap[propertyHash];
 
     if (classNameMapping) {
-      var hasRTLClassName = Array.isArray(classNameMapping);
+      const hasRTLClassName = Array.isArray(classNameMapping);
 
@@ -49,8 +49,8 @@ if (dir === 'rtl') {
 function reduceToClassNameForSlots(classesMapBySlot, dir) {
-  var classNamesForSlots = {}; // eslint-disable-next-line guard-for-in
+  const classNamesForSlots = {}; // eslint-disable-next-line guard-for-in
 
-  for (var slotName in classesMapBySlot) {
-    var classnamesForSlot = reduceToClassName(classesMapBySlot[slotName], dir);
-    var sequenceHash = hashSequence_1.hashSequence(classnamesForSlot, dir);
-    var resultSlotClasses = sequenceHash + ' ' + classnamesForSlot;
+  for (const slotName in classesMapBySlot) {
+    const classnamesForSlot = reduceToClassName(classesMapBySlot[slotName], dir);
+    const sequenceHash = hashSequence_1.hashSequence(classnamesForSlot, dir);
+    const resultSlotClasses = sequenceHash + ' ' + classnamesForSlot;
     constants_1.DEFINITION_LOOKUP_TABLE[sequenceHash] = [classesMapBySlot[slotName], dir];
@@ -57,0 +57,0 @@ classNamesForSlots[slotName] = resultSlotClasses;

lib-commonjs/runtime/resolveStaticStyleRules.js

@@ -8,16 +8,11 @@ "use strict";
 
-var compileStaticCSS_1 = /*#__PURE__*/require("./compileStaticCSS");
+const compileStaticCSS_1 = /*#__PURE__*/require("./compileStaticCSS");
 
-var compileCSS_1 = /*#__PURE__*/require("./compileCSS");
+const compileCSS_1 = /*#__PURE__*/require("./compileCSS");
 
-function resolveStaticStyleRules(styles, result) {
-  if (result === void 0) {
-    result = {};
-  }
-
+function resolveStaticStyleRules(styles, result = {}) {
   if (typeof styles === 'string') {
-    var cssRules = compileCSS_1.compileCSSRules(styles);
+    const cssRules = compileCSS_1.compileCSSRules(styles);
 
-    for (var _i = 0, cssRules_1 = cssRules; _i < cssRules_1.length; _i++) {
-      var rule = cssRules_1[_i];
+    for (const rule of cssRules) {
       addResolvedStyles(rule, result);
@@ -27,5 +22,5 @@ }
     // eslint-disable-next-line guard-for-in
-    for (var property in styles) {
-      var value = styles[property];
-      var staticCSS = compileStaticCSS_1.compileStaticCSS(property, value);
+    for (const property in styles) {
+      const value = styles[property];
+      const staticCSS = compileStaticCSS_1.compileStaticCSS(property, value);
       addResolvedStyles(staticCSS, result);
@@ -40,8 +35,4 @@ }
 
-function addResolvedStyles(cssRule, result) {
-  if (result === void 0) {
-    result = {};
-  } // 👇 static rules should be inserted into default bucket
-
-
+function addResolvedStyles(cssRule, result = {}) {
+  // 👇 static rules should be inserted into default bucket
   result.d = result.d || [];
@@ -48,0 +39,0 @@ result.d.push(cssRule);

lib-commonjs/runtime/resolveStyleRules.d.ts

@@ -1,2 +0,2 @@
-import { MakeStyles, CSSClassesMap, CSSRulesByBucket } from '../types';
+import { MakeStylesStyle, CSSClassesMap, CSSRulesByBucket } from '../types';
 /**
@@ -7,2 +7,2 @@ * Transforms input styles to classes maps & CSS rules.
  */
-export declare function resolveStyleRules(styles: MakeStyles, unstable_cssPriority?: number): [CSSClassesMap, CSSRulesByBucket];
+export declare function resolveStyleRules(styles: MakeStylesStyle, unstable_cssPriority?: number): [CSSClassesMap, CSSRulesByBucket];

lib-commonjs/runtime/resolveStyleRules.js

@@ -8,36 +8,34 @@ "use strict";
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const hash_1 = /*#__PURE__*/require("@emotion/hash");
 
-var hash_1 = /*#__PURE__*/require("@emotion/hash");
+const core_1 = /*#__PURE__*/require("rtl-css-js/core");
 
-var core_1 = /*#__PURE__*/require("rtl-css-js/core");
+const constants_1 = /*#__PURE__*/require("../constants");
 
-var constants_1 = /*#__PURE__*/require("../constants");
+const compileCSS_1 = /*#__PURE__*/require("./compileCSS");
 
-var compileCSS_1 = /*#__PURE__*/require("./compileCSS");
+const compileKeyframeCSS_1 = /*#__PURE__*/require("./compileKeyframeCSS");
 
-var compileKeyframeCSS_1 = /*#__PURE__*/require("./compileKeyframeCSS");
+const expandShorthand_1 = /*#__PURE__*/require("./expandShorthand");
 
-var expandShorthand_1 = /*#__PURE__*/require("./expandShorthand");
+const generateCombinedMediaQuery_1 = /*#__PURE__*/require("./utils/generateCombinedMediaQuery");
 
-var generateCombinedMediaQuery_1 = /*#__PURE__*/require("./utils/generateCombinedMediaQuery");
+const isMediaQuerySelector_1 = /*#__PURE__*/require("./utils/isMediaQuerySelector");
 
-var isMediaQuerySelector_1 = /*#__PURE__*/require("./utils/isMediaQuerySelector");
+const isNestedSelector_1 = /*#__PURE__*/require("./utils/isNestedSelector");
 
-var isNestedSelector_1 = /*#__PURE__*/require("./utils/isNestedSelector");
+const isSupportQuerySelector_1 = /*#__PURE__*/require("./utils/isSupportQuerySelector");
 
-var isSupportQuerySelector_1 = /*#__PURE__*/require("./utils/isSupportQuerySelector");
+const normalizeNestedProperty_1 = /*#__PURE__*/require("./utils/normalizeNestedProperty");
 
-var normalizeNestedProperty_1 = /*#__PURE__*/require("./utils/normalizeNestedProperty");
+const isObject_1 = /*#__PURE__*/require("./utils/isObject");
 
-var isObject_1 = /*#__PURE__*/require("./utils/isObject");
+const getStyleBucketName_1 = /*#__PURE__*/require("./getStyleBucketName");
 
-var getStyleBucketName_1 = /*#__PURE__*/require("./getStyleBucketName");
+const hashClassName_1 = /*#__PURE__*/require("./utils/hashClassName");
 
-var hashClassName_1 = /*#__PURE__*/require("./utils/hashClassName");
+const createCSSVariablesProxy_1 = /*#__PURE__*/require("./createCSSVariablesProxy");
 
-var createCSSVariablesProxy_1 = /*#__PURE__*/require("./createCSSVariablesProxy");
+const hashPropertyKey_1 = /*#__PURE__*/require("./utils/hashPropertyKey");
 
-var hashPropertyKey_1 = /*#__PURE__*/require("./utils/hashPropertyKey");
-
 function pushToClassesMap(classesMap, propertyKey, ltrClassname, rtlClassname) {
@@ -56,31 +54,7 @@ classesMap[propertyKey] = rtlClassname ? [ltrClassname, rtlClassname] : ltrClassname;
 
-function resolveStyleRulesInner(styles, unstable_cssPriority, pseudo, media, support, cssClassesMap, cssRulesByBucket, rtlValue) {
-  if (unstable_cssPriority === void 0) {
-    unstable_cssPriority = 0;
-  }
+function resolveStyleRulesInner(styles, unstable_cssPriority = 0, pseudo = '', media = '', support = '', cssClassesMap = {}, cssRulesByBucket = {}, rtlValue) {
+  // eslint-disable-next-line guard-for-in
+  for (const property in styles) {
+    const value = styles[property]; // eslint-disable-next-line eqeqeq
 
-  if (pseudo === void 0) {
-    pseudo = '';
-  }
-
-  if (media === void 0) {
-    media = '';
-  }
-
-  if (support === void 0) {
-    support = '';
-  }
-
-  if (cssClassesMap === void 0) {
-    cssClassesMap = {};
-  }
-
-  if (cssRulesByBucket === void 0) {
-    cssRulesByBucket = {};
-  } // eslint-disable-next-line guard-for-in
-
-
-  for (var property in styles) {
-    var value = styles[property]; // eslint-disable-next-line eqeqeq
-
     if (value == null) {
@@ -92,58 +66,54 @@ continue;
       // uniq key based on a hash of property & selector, used for merging later
-      var key = hashPropertyKey_1.hashPropertyKey(pseudo, media, support, property);
-      var className = hashClassName_1.hashClassName({
-        media: media,
+      const key = hashPropertyKey_1.hashPropertyKey(pseudo, media, support, property);
+      const className = hashClassName_1.hashClassName({
+        media,
         value: value.toString(),
-        support: support,
-        pseudo: pseudo,
-        property: property,
-        unstable_cssPriority: unstable_cssPriority
+        support,
+        pseudo,
+        property,
+        unstable_cssPriority
       });
-      var rtlDefinition = rtlValue && {
+      const rtlDefinition = rtlValue && {
         key: property,
         value: rtlValue
       } || core_1.convertProperty(property, value);
-      var flippedInRtl = rtlDefinition.key !== property || rtlDefinition.value !== value;
-      var rtlClassName = flippedInRtl ? hashClassName_1.hashClassName({
+      const flippedInRtl = rtlDefinition.key !== property || rtlDefinition.value !== value;
+      const rtlClassName = flippedInRtl ? hashClassName_1.hashClassName({
         value: rtlDefinition.value.toString(),
         property: rtlDefinition.key,
-        pseudo: pseudo,
-        media: media,
-        support: support,
-        unstable_cssPriority: unstable_cssPriority
+        pseudo,
+        media,
+        support,
+        unstable_cssPriority
       }) : undefined;
-      var rtlCompileOptions = flippedInRtl ? {
-        rtlClassName: rtlClassName,
+      const rtlCompileOptions = flippedInRtl ? {
+        rtlClassName,
         rtlProperty: rtlDefinition.key,
         rtlValue: rtlDefinition.value
       } : undefined;
-      var styleBucketName = getStyleBucketName_1.getStyleBucketName(pseudo, media, support);
-
-      var _a = compileCSS_1.compileCSS(tslib_1.__assign({
-        className: className,
-        media: media,
-        pseudo: pseudo,
-        property: property,
-        support: support,
-        value: value,
-        unstable_cssPriority: unstable_cssPriority
-      }, rtlCompileOptions)),
-          ltrCSS = _a[0],
-          rtlCSS = _a[1];
-
+      const styleBucketName = getStyleBucketName_1.getStyleBucketName(pseudo, media, support);
+      const [ltrCSS, rtlCSS] = compileCSS_1.compileCSS({
+        className,
+        media,
+        pseudo,
+        property,
+        support,
+        value,
+        unstable_cssPriority,
+        ...rtlCompileOptions
+      });
       pushToClassesMap(cssClassesMap, key, className, rtlClassName);
       pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS);
     } else if (property === 'animationName') {
-      var animationNameValue = Array.isArray(value) ? value : [value];
-      var animationNames = [];
-      var rtlAnimationNames = [];
+      const animationNameValue = Array.isArray(value) ? value : [value];
+      const animationNames = [];
+      const rtlAnimationNames = [];
 
-      for (var _i = 0, animationNameValue_1 = animationNameValue; _i < animationNameValue_1.length; _i++) {
-        var keyframeObject = animationNameValue_1[_i];
-        var keyframeCSS = compileKeyframeCSS_1.compileKeyframeRule(keyframeObject);
-        var rtlKeyframeCSS = compileKeyframeCSS_1.compileKeyframeRule(core_1.convert(keyframeObject));
-        var animationName = constants_1.HASH_PREFIX + hash_1.default(keyframeCSS);
-        var rtlAnimationName = void 0;
-        var keyframeRules = compileKeyframeCSS_1.compileKeyframesCSS(animationName, keyframeCSS);
-        var rtlKeyframeRules = [];
+      for (const keyframeObject of animationNameValue) {
+        const keyframeCSS = compileKeyframeCSS_1.compileKeyframeRule(keyframeObject);
+        const rtlKeyframeCSS = compileKeyframeCSS_1.compileKeyframeRule(core_1.convert(keyframeObject));
+        const animationName = constants_1.HASH_PREFIX + hash_1.default(keyframeCSS);
+        let rtlAnimationName;
+        const keyframeRules = compileKeyframeCSS_1.compileKeyframesCSS(animationName, keyframeCSS);
+        let rtlKeyframeRules = [];
 
@@ -158,3 +128,3 @@ if (keyframeCSS === rtlKeyframeCSS) {
 
-        for (var i = 0; i < keyframeRules.length; i++) {
+        for (let i = 0; i < keyframeRules.length; i++) {
           pushToCSSRules(cssRulesByBucket, // keyframes styles should be inserted into own bucket
@@ -175,6 +145,6 @@ 'k', keyframeRules[i], rtlKeyframeRules[i]);
       } else if (isMediaQuerySelector_1.isMediaQuerySelector(property)) {
-        var combinedMediaQuery = generateCombinedMediaQuery_1.generateCombinedQuery(media, property.slice(6).trim());
+        const combinedMediaQuery = generateCombinedMediaQuery_1.generateCombinedQuery(media, property.slice(6).trim());
         resolveStyleRulesInner(value, unstable_cssPriority, pseudo, combinedMediaQuery, support, cssClassesMap, cssRulesByBucket);
       } else if (isSupportQuerySelector_1.isSupportQuerySelector(property)) {
-        var combinedSupportQuery = generateCombinedMediaQuery_1.generateCombinedQuery(support, property.slice(9).trim());
+        const combinedSupportQuery = generateCombinedMediaQuery_1.generateCombinedQuery(support, property.slice(9).trim());
         resolveStyleRulesInner(value, unstable_cssPriority, pseudo, media, combinedSupportQuery, cssClassesMap, cssRulesByBucket);
@@ -184,3 +154,3 @@ } else {
           // eslint-disable-next-line no-console
-          console.error("Please fix the unresolved style rule: \n " + property + " \n " + JSON.stringify(value, null, 2) + "\"");
+          console.error(`Please fix the unresolved style rule: \n ${property} \n ${JSON.stringify(value, null, 2)}"`);
         }
@@ -200,9 +170,5 @@ }
 
-function resolveStyleRules(styles, unstable_cssPriority) {
-  if (unstable_cssPriority === void 0) {
-    unstable_cssPriority = 0;
-  } // expandShorthand() and resolveProxyValues() are recursive functions and should be evaluated once for a style object
-
-
-  var expandedStyles = expandShorthand_1.expandShorthand(createCSSVariablesProxy_1.resolveProxyValues(styles));
+function resolveStyleRules(styles, unstable_cssPriority = 0) {
+  // expandShorthand() and resolveProxyValues() are recursive functions and should be evaluated once for a style object
+  const expandedStyles = expandShorthand_1.expandShorthand(createCSSVariablesProxy_1.resolveProxyValues(styles));
   return resolveStyleRulesInner(expandedStyles, unstable_cssPriority);
@@ -209,0 +175,0 @@ }

lib-commonjs/runtime/utils/cssifyObject.d.ts

@@ -1,2 +0,2 @@
-import { MakeStyles } from '../../types';
-export declare function cssifyObject(style: MakeStyles): string;
+import { MakeStaticStylesStyle, MakeStylesStyle } from '../../types';
+export declare function cssifyObject(style: MakeStylesStyle | MakeStaticStylesStyle): string;

lib-commonjs/runtime/utils/cssifyObject.js

@@ -8,9 +8,9 @@ "use strict";
 
-var hyphenateProperty_1 = /*#__PURE__*/require("./hyphenateProperty");
+const hyphenateProperty_1 = /*#__PURE__*/require("./hyphenateProperty");
 
 function cssifyObject(style) {
-  var css = ''; // eslint-disable-next-line guard-for-in
+  let css = ''; // eslint-disable-next-line guard-for-in
 
-  for (var property in style) {
-    var value = style[property];
+  for (const property in style) {
+    const value = style[property];
 
@@ -17,0 +17,0 @@ if (typeof value !== 'string' && typeof value !== 'number') {

lib-commonjs/runtime/utils/generateCombinedMediaQuery.js

@@ -13,3 +13,3 @@ "use strict";
 
-  return currentMediaQuery + " and " + nestedMediaQuery;
+  return `${currentMediaQuery} and ${nestedMediaQuery}`;
 }
@@ -16,0 +16,0 @@

lib-commonjs/runtime/utils/hashClassName.js

@@ -8,15 +8,16 @@ "use strict";
 
-var hash_1 = /*#__PURE__*/require("@emotion/hash");
+const hash_1 = /*#__PURE__*/require("@emotion/hash");
 
-var constants_1 = /*#__PURE__*/require("../../constants");
+const constants_1 = /*#__PURE__*/require("../../constants");
 
-function hashClassName(_a) {
-  var media = _a.media,
-      property = _a.property,
-      pseudo = _a.pseudo,
-      support = _a.support,
-      value = _a.value,
-      unstable_cssPriority = _a.unstable_cssPriority; // Trimming of value is required to generate consistent hashes
-
-  var classNameHash = hash_1.default(pseudo + media + support + property + value.trim());
+function hashClassName({
+  media,
+  property,
+  pseudo,
+  support,
+  value,
+  unstable_cssPriority
+}) {
+  // Trimming of value is required to generate consistent hashes
+  const classNameHash = hash_1.default(pseudo + media + support + property + value.trim());
   return constants_1.HASH_PREFIX + classNameHash + (unstable_cssPriority === 0 ? '' : unstable_cssPriority);
@@ -23,0 +24,0 @@ }

lib-commonjs/runtime/utils/hashPropertyKey.js

@@ -8,10 +8,10 @@ "use strict";
 
-var hash_1 = /*#__PURE__*/require("@emotion/hash");
+const hash_1 = /*#__PURE__*/require("@emotion/hash");
 
 function hashPropertyKey(pseudo, media, support, property) {
   // uniq key based on property & selector, used for merging later
-  var computedKey = pseudo + media + support + property; // "key" can be really long as it includes selectors, we use hashes to reduce sizes of keys
+  const computedKey = pseudo + media + support + property; // "key" can be really long as it includes selectors, we use hashes to reduce sizes of keys
   // ".foo :hover" => "abcd"
 
-  var hashedKey = hash_1.default(computedKey); // As these hashes are used as object keys in build output we should avoid having numbers as a first character to
+  const hashedKey = hash_1.default(computedKey); // As these hashes are used as object keys in build output we should avoid having numbers as a first character to
   // avoid having quotes:
@@ -23,4 +23,4 @@ // {
 
-  var firstCharCode = hashedKey.charCodeAt(0);
-  var startsWithNumber = firstCharCode >= 48 && firstCharCode <= 57;
+  const firstCharCode = hashedKey.charCodeAt(0);
+  const startsWithNumber = firstCharCode >= 48 && firstCharCode <= 57;
 
@@ -27,0 +27,0 @@ if (startsWithNumber) {

lib-commonjs/runtime/utils/hashSequence.js

@@ -8,8 +8,8 @@ "use strict";
 
-var hash_1 = /*#__PURE__*/require("@emotion/hash");
+const hash_1 = /*#__PURE__*/require("@emotion/hash");
 
-var constants_1 = /*#__PURE__*/require("../../constants");
+const constants_1 = /*#__PURE__*/require("../../constants");
 
 function padEndHash(value) {
-  var hashLength = value.length;
+  const hashLength = value.length;
 
@@ -20,3 +20,3 @@ if (hashLength === constants_1.SEQUENCE_HASH_LENGTH) {
 
-  for (var i = hashLength; i < constants_1.SEQUENCE_HASH_LENGTH; i++) {
+  for (let i = hashLength; i < constants_1.SEQUENCE_HASH_LENGTH; i++) {
     value += '0';
@@ -23,0 +23,0 @@ }

lib-commonjs/runtime/utils/hyphenateProperty.js

@@ -7,5 +7,5 @@ "use strict";
 exports.hyphenateProperty = void 0;
-var uppercasePattern = /[A-Z]/g;
-var msPattern = /^ms-/;
-var cache = {};
+const uppercasePattern = /[A-Z]/g;
+const msPattern = /^ms-/;
+const cache = {};
 
@@ -25,3 +25,3 @@ function toHyphenLower(match) {
 
-  var hName = name.replace(uppercasePattern, toHyphenLower);
+  const hName = name.replace(uppercasePattern, toHyphenLower);
   return cache[name] = msPattern.test(hName) ? '-' + hName : hName;
@@ -28,0 +28,0 @@ }

lib-commonjs/runtime/utils/isNestedSelector.js

@@ -7,3 +7,3 @@ "use strict";
 exports.isNestedSelector = void 0;
-var regex = /^(:|\[|>|&)/;
+const regex = /^(:|\[|>|&)/;
 
@@ -10,0 +10,0 @@ function isNestedSelector(property) {

lib-commonjs/types.d.ts

@@ -1,8 +0,19 @@
-import { Properties as CSSProperties } from 'csstype';
-export interface MakeStyles extends Omit<CSSProperties, 'animationName'> {
-    [key: string]: any;
-    animationName?: object | string;
-}
-export declare type MakeStylesStyleFunctionRule<Tokens> = (tokens: Tokens) => MakeStyles;
-export declare type MakeStylesStyleRule<Tokens> = MakeStyles | MakeStylesStyleFunctionRule<Tokens>;
+import * as CSS from 'csstype';
+export declare type MakeStylesCSSValue = string | 0;
+declare type MakeStylesCSSProperties = Omit<CSS.Properties<MakeStylesCSSValue>, 'animationName'>;
+export declare type MakeStylesStrictCSSObject = MakeStylesCSSProperties & MakeStylesCSSPseudos & {
+    animationName?: MakeStylesAnimation | MakeStylesAnimation[] | CSS.AnimationProperty;
+};
+declare type MakeStylesCSSObjectCustom = {
+    [Property: string]: MakeStylesStyle | string | 0;
+};
+declare type MakeStylesCSSPseudos = {
+    [Property in CSS.Pseudos]?: MakeStylesStrictCSSObject & {
+        content?: string;
+    };
+};
+export declare type MakeStylesAnimation = Record<'from' | 'to' | string, MakeStylesCSSObjectCustom>;
+export declare type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustom;
+export declare type MakeStylesStyleFunctionRule<Tokens> = (tokens: Tokens) => MakeStylesStyle;
+export declare type MakeStylesStyleRule<Tokens> = MakeStylesStyle | MakeStylesStyleFunctionRule<Tokens>;
 export interface MakeStylesOptions {
@@ -12,4 +23,4 @@ dir: 'ltr' | 'rtl';
 }
-export declare type MakeStaticStyles = ({
-    [key: string]: CSSProperties & Record<string, any>;
+export declare type MakeStaticStylesStyle = {
+    [key: string]: CSS.Properties & Record<string, any>;
 } & {
@@ -27,3 +38,4 @@ '@font-face'?: {
     };
-}) | string;
+};
+export declare type MakeStaticStyles = MakeStaticStylesStyle | string;
 export interface MakeStaticStylesOptions {
@@ -59,1 +71,2 @@ renderer: MakeStylesRenderer;
 export declare type LookupItem = [/* definitions */ CSSClassesMap, /* dir */ /* dir */ 'rtl' | 'ltr'];
+export {};

lib/__styles.js

@@ -9,12 +9,14 @@ import { reduceToClassNameForSlots } from './runtime/reduceToClassNameForSlots';
 export function __styles(classesMapBySlot, cssRules) {
-  var insertionCache = {};
-  var ltrClassNamesForSlots = null;
-  var rtlClassNamesForSlots = null;
+  const insertionCache = {};
+  let ltrClassNamesForSlots = null;
+  let rtlClassNamesForSlots = null;
 
   function computeClasses(options) {
-    var dir = options.dir,
-        renderer = options.renderer;
-    var isLTR = dir === 'ltr'; // As RTL classes are different they should have a different cache key for insertion
+    const {
+      dir,
+      renderer
+    } = options;
+    const isLTR = dir === 'ltr'; // As RTL classes are different they should have a different cache key for insertion
 
-    var rendererId = isLTR ? renderer.id : renderer.id + 'r';
+    const rendererId = isLTR ? renderer.id : renderer.id + 'r';
 
@@ -21,0 +23,0 @@ if (isLTR) {

lib/constants.js

 /** @internal */
-export var HASH_PREFIX = 'f';
+export const HASH_PREFIX = 'f';
 /** @internal */
 
-export var SEQUENCE_HASH_LENGTH = 7;
+export const SEQUENCE_HASH_LENGTH = 7;
 /** @internal */
 
-export var SEQUENCE_PREFIX = '___';
+export const SEQUENCE_PREFIX = '___';
 /** @internal */
 
-export var DEFINITION_LOOKUP_TABLE = {}; // indexes for values in LookupItem tuple
+export const DEFINITION_LOOKUP_TABLE = {}; // indexes for values in LookupItem tuple
 
 /** @internal */
 
-export var LOOKUP_DEFINITIONS_INDEX = 0;
+export const LOOKUP_DEFINITIONS_INDEX = 0;
 /** @internal */
 
-export var LOOKUP_DIR_INDEX = 1;
+export const LOOKUP_DIR_INDEX = 1;
 //# sourceMappingURL=constants.js.map

lib/index.d.ts

@@ -0,2 +1,19 @@
+import { border, borderLeft, borderBottom, borderRight, borderTop, borderColor, borderStyle, borderRadius, borderWidth, gap, margin, padding, overflow } from './shorthands/index';
+export declare const shorthands: {
+    border: typeof border;
+    borderLeft: typeof borderLeft;
+    borderBottom: typeof borderBottom;
+    borderRight: typeof borderRight;
+    borderTop: typeof borderTop;
+    borderColor: typeof borderColor;
+    borderStyle: typeof borderStyle;
+    borderRadius: typeof borderRadius;
+    borderWidth: typeof borderWidth;
+    gap: typeof gap;
+    margin: typeof margin;
+    padding: typeof padding;
+    overflow: typeof overflow;
+};
 export { createDOMRenderer } from './renderer/createDOMRenderer';
+export type { CreateDOMRendererOptions } from './renderer/createDOMRenderer';
 export { styleBucketOrdering } from './renderer/getStyleSheetForBucket';
@@ -11,3 +28,3 @@ export { rehydrateRendererCache } from './renderer/rehydrateRendererCache';
 export { __styles } from './__styles';
-export * from './types';
 export * from './constants';
+export type { MakeStaticStylesStyle, MakeStaticStyles, MakeStylesAnimation, MakeStylesStyle, MakeStylesStyleRule, MakeStylesStyleFunctionRule, CSSClasses, CSSClassesMapBySlot, CSSRulesByBucket, StyleBucketName, MakeStaticStylesOptions, MakeStylesOptions, MakeStylesRenderer, } from './types';

lib/index.js

@@ -0,1 +1,19 @@
+// This should be just "export * as shorthands from "
+// https://github.com/microsoft/fluentui/issues/20694
+import { border, borderLeft, borderBottom, borderRight, borderTop, borderColor, borderStyle, borderRadius, borderWidth, gap, margin, padding, overflow } from './shorthands/index';
+export const shorthands = {
+  border,
+  borderLeft,
+  borderBottom,
+  borderRight,
+  borderTop,
+  borderColor,
+  borderStyle,
+  borderRadius,
+  borderWidth,
+  gap,
+  margin,
+  padding,
+  overflow
+};
 export { createDOMRenderer } from './renderer/createDOMRenderer';
@@ -12,4 +30,3 @@ export { styleBucketOrdering } from './renderer/getStyleSheetForBucket';
 export { __styles } from './__styles';
-export * from './types';
 export * from './constants';
 //# sourceMappingURL=index.js.map

lib/makeStaticStyles.js

@@ -8,7 +8,7 @@ import { resolveStaticStyleRules } from './runtime/resolveStaticStyleRules';
 export function makeStaticStyles(styles) {
-  var styleCache = {};
-  var stylesSet = Array.isArray(styles) ? styles : [styles];
+  const styleCache = {};
+  const stylesSet = Array.isArray(styles) ? styles : [styles];
 
   function useStaticStyles(options) {
-    var cacheKey = options.renderer.id;
+    const cacheKey = options.renderer.id;
 
@@ -19,4 +19,3 @@ if (styleCache[cacheKey]) {
 
-    for (var _i = 0, stylesSet_1 = stylesSet; _i < stylesSet_1.length; _i++) {
-      var styleRules = stylesSet_1[_i];
+    for (const styleRules of stylesSet) {
       options.renderer.insertCSSRules(resolveStaticStyleRules(styleRules));
@@ -23,0 +22,0 @@ }

lib/makeStyles.js

 import { reduceToClassNameForSlots } from './runtime/reduceToClassNameForSlots';
 import { resolveStyleRulesForSlots } from './resolveStyleRulesForSlots';
-export function makeStyles(stylesBySlots, unstable_cssPriority) {
-  if (unstable_cssPriority === void 0) {
-    unstable_cssPriority = 0;
-  }
+export function makeStyles(stylesBySlots, unstable_cssPriority = 0) {
+  const insertionCache = {};
+  let classesMapBySlot = null;
+  let cssRules = null;
+  let ltrClassNamesForSlots = null;
+  let rtlClassNamesForSlots = null;
 
-  var insertionCache = {};
-  var classesMapBySlot = null;
-  var cssRules = null;
-  var ltrClassNamesForSlots = null;
-  var rtlClassNamesForSlots = null;
-
   function computeClasses(options) {
-    var _a;
+    const {
+      dir,
+      renderer
+    } = options;
 
-    var dir = options.dir,
-        renderer = options.renderer;
-
     if (classesMapBySlot === null) {
-      _a = resolveStyleRulesForSlots(stylesBySlots, unstable_cssPriority), classesMapBySlot = _a[0], cssRules = _a[1];
+      [classesMapBySlot, cssRules] = resolveStyleRulesForSlots(stylesBySlots, unstable_cssPriority);
     }
 
-    var isLTR = dir === 'ltr'; // As RTL classes are different they should have a different cache key for insertion
+    const isLTR = dir === 'ltr'; // As RTL classes are different they should have a different cache key for insertion
 
-    var rendererId = isLTR ? renderer.id : renderer.id + 'r';
+    const rendererId = isLTR ? renderer.id : renderer.id + 'r';
 
@@ -28,0 +24,0 @@ if (isLTR) {

lib/mergeClasses.js

@@ -5,16 +5,16 @@ import { DEFINITION_LOOKUP_TABLE, LOOKUP_DEFINITIONS_INDEX, LOOKUP_DIR_INDEX, SEQUENCE_HASH_LENGTH, SEQUENCE_PREFIX } from './constants';
 
-var mergeClassesCachedResults = {};
-var SEQUENCE_SIZE = SEQUENCE_PREFIX.length + SEQUENCE_HASH_LENGTH;
+const mergeClassesCachedResults = {};
+const SEQUENCE_SIZE = SEQUENCE_PREFIX.length + SEQUENCE_HASH_LENGTH;
 export function mergeClasses() {
   // arguments are parsed manually to avoid double loops as TS & Babel transforms rest via an additional loop
   // @see https://babeljs.io/docs/en/babel-plugin-transform-parameters
-  var dir = null;
-  var resultClassName = ''; // Is used as a cache key to avoid object merging
+  let dir = null;
+  let resultClassName = ''; // Is used as a cache key to avoid object merging
 
-  var sequenceMatch = '';
-  var sequenceMappings = [];
+  let sequenceMatch = '';
+  const sequenceMappings = [];
 
-  for (var i = 0; i < arguments.length; i++) {
+  for (let i = 0; i < arguments.length; i++) {
     // eslint-disable-next-line prefer-rest-params
-    var className = arguments[i];
+    const className = arguments[i];
 
@@ -24,3 +24,3 @@ if (typeof className === 'string') {
       // without parsing each className in a string
-      var sequenceIndex = className.indexOf(SEQUENCE_PREFIX);
+      const sequenceIndex = className.indexOf(SEQUENCE_PREFIX);
 
@@ -30,4 +30,4 @@ if (sequenceIndex === -1) {
       } else {
-        var sequenceId = className.slice(sequenceIndex, sequenceIndex + SEQUENCE_SIZE);
-        var sequenceMapping = DEFINITION_LOOKUP_TABLE[sequenceId]; // Handles a case with mixed classnames, i.e. "ui-button ATOMIC_CLASSES"
+        const sequenceId = className.slice(sequenceIndex, sequenceIndex + SEQUENCE_SIZE);
+        const sequenceMapping = DEFINITION_LOOKUP_TABLE[sequenceId]; // Handles a case with mixed classnames, i.e. "ui-button ATOMIC_CLASSES"
 
@@ -45,3 +45,3 @@ if (sequenceIndex > 0) {
               // eslint-disable-next-line no-console
-              console.error("mergeClasses(): a passed string contains an identifier (" + sequenceId + ") that has different direction " + ("(dir=\"" + (sequenceMapping[1] ? 'rtl' : 'ltr') + "\") setting than other classes. This is not supported. ") + ("Source string: " + className));
+              console.error(`mergeClasses(): a passed string contains an identifier (${sequenceId}) that has different direction ` + `(dir="${sequenceMapping[1] ? 'rtl' : 'ltr'}") setting than other classes. This is not supported. ` + `Source string: ${className}`);
             }
@@ -54,3 +54,3 @@ }
             // eslint-disable-next-line no-console
-            console.error("mergeClasses(): a passed string contains an identifier (" + sequenceId + ") that does not match any entry " + ("in cache. Source string: " + className));
+            console.error(`mergeClasses(): a passed string contains an identifier (${sequenceId}) that does not match any entry ` + `in cache. Source string: ${className}`);
           }
@@ -63,3 +63,3 @@ }
           // eslint-disable-next-line no-console
-          console.error('mergeClasses(): a passed string contains multiple identifiers of atomic classes (classes that start ' + ("with \"" + SEQUENCE_PREFIX + "\"), it's possible that passed classes were concatenated in a wrong way. ") + ("Source string: " + className));
+          console.error('mergeClasses(): a passed string contains multiple identifiers of atomic classes (classes that start ' + `with "${SEQUENCE_PREFIX}"), it's possible that passed classes were concatenated in a wrong way. ` + `Source string: ${className}`);
         }
@@ -78,3 +78,3 @@ }
 
-  var mergeClassesResult = mergeClassesCachedResults[sequenceMatch];
+  const mergeClassesResult = mergeClassesCachedResults[sequenceMatch];
 
@@ -86,7 +86,7 @@ if (mergeClassesResult !== undefined) {
 
-  var resultDefinitions = Object.assign.apply(Object, // .assign() mutates the first object, we can't mutate mappings as it will produce invalid results later
+  const resultDefinitions = Object.assign.apply(Object, // .assign() mutates the first object, we can't mutate mappings as it will produce invalid results later
   [{}].concat(sequenceMappings));
-  var atomicClassNames = reduceToClassName(resultDefinitions, dir); // Each merge of classes generates a new sequence of atomic classes that needs to be registered
+  let atomicClassNames = reduceToClassName(resultDefinitions, dir); // Each merge of classes generates a new sequence of atomic classes that needs to be registered
 
-  var newSequenceHash = hashSequence(atomicClassNames, dir);
+  const newSequenceHash = hashSequence(atomicClassNames, dir);
   atomicClassNames = newSequenceHash + ' ' + atomicClassNames;
@@ -93,0 +93,0 @@ mergeClassesCachedResults[sequenceMatch] = atomicClassNames;

lib/renderer/createDOMRenderer.d.ts

 import { MakeStylesRenderer } from '../types';
+export interface CreateDOMRendererOptions {
+    /**
+     * A filter run before css rule insertion to systematically remove css rules at render time.
+     * This can be used to forbid specific rules from being written to the style sheet at run time without
+     * affecting build time styles.
+     *
+     * ⚠️ Keep the filter as performant as possible to avoid negative performance impacts to your application.
+     * ⚠️ This API is unstable and can be removed from the library at any time.
+     */
+    unstable_filterCSSRule?: (cssRule: string) => boolean;
+}
 /**
@@ -7,2 +18,2 @@ * Creates a new instances of a renderer.
  */
-export declare function createDOMRenderer(target?: Document | undefined): MakeStylesRenderer;
+export declare function createDOMRenderer(target?: Document | undefined, options?: CreateDOMRendererOptions): MakeStylesRenderer;

lib/renderer/createDOMRenderer.js

 import { getStyleSheetForBucket } from './getStyleSheetForBucket';
-var lastIndex = 0;
+let lastIndex = 0;
 /**
@@ -9,19 +9,19 @@ * Creates a new instances of a renderer.
 
-export function createDOMRenderer(target) {
-  if (target === void 0) {
-    target = typeof document === 'undefined' ? undefined : document;
-  }
-
-  var renderer = {
+export function createDOMRenderer(target = typeof document === 'undefined' ? undefined : document, options = {}) {
+  const {
+    unstable_filterCSSRule
+  } = options;
+  const renderer = {
     insertionCache: {},
     styleElements: {},
-    id: "d" + lastIndex++,
-    insertCSSRules: function (cssRules) {
+    id: `d${lastIndex++}`,
+
+    insertCSSRules(cssRules) {
       // eslint-disable-next-line guard-for-in
-      for (var styleBucketName in cssRules) {
-        var cssRulesForBucket = cssRules[styleBucketName];
-        var sheet = target && getStyleSheetForBucket(styleBucketName, target, renderer); // This is a hot path in rendering styles: ".length" is cached in "l" var to avoid accesses the property
+      for (const styleBucketName in cssRules) {
+        const cssRulesForBucket = cssRules[styleBucketName];
+        const sheet = target && getStyleSheetForBucket(styleBucketName, target, renderer); // This is a hot path in rendering styles: ".length" is cached in "l" var to avoid accesses the property
 
-        for (var i = 0, l = cssRulesForBucket.length; i < l; i++) {
-          var ruleCSS = cssRulesForBucket[i];
+        for (let i = 0, l = cssRulesForBucket.length; i < l; i++) {
+          const ruleCSS = cssRulesForBucket[i];
 
@@ -36,3 +36,9 @@ if (renderer.insertionCache[ruleCSS]) {
             try {
-              sheet.insertRule(ruleCSS, sheet.cssRules.length);
+              if (unstable_filterCSSRule) {
+                if (unstable_filterCSSRule(ruleCSS)) {
+                  sheet.insertRule(ruleCSS, sheet.cssRules.length);
+                }
+              } else {
+                sheet.insertRule(ruleCSS, sheet.cssRules.length);
+              }
             } catch (e) {
@@ -42,3 +48,3 @@ // We've disabled these warnings due to false-positive errors with browser prefixes
                 // eslint-disable-next-line no-console
-                console.error("There was a problem inserting the following rule: \"" + ruleCSS + "\"", e);
+                console.error(`There was a problem inserting the following rule: "${ruleCSS}"`, e);
               }
@@ -50,2 +56,3 @@ }
     }
+
   };
@@ -58,4 +65,4 @@ return renderer;
 
-var ignoreSuffixes = /*#__PURE__*/['-moz-placeholder', '-moz-focus-inner', '-moz-focusring', '-ms-input-placeholder', '-moz-read-write', '-moz-read-only'].join('|');
-var ignoreSuffixesRegex = /*#__PURE__*/new RegExp(":(" + ignoreSuffixes + ")");
+const ignoreSuffixes = /*#__PURE__*/['-moz-placeholder', '-moz-focus-inner', '-moz-focusring', '-ms-input-placeholder', '-moz-read-write', '-moz-read-only'].join('|');
+const ignoreSuffixesRegex = /*#__PURE__*/new RegExp(`:(${ignoreSuffixes})`);
 //# sourceMappingURL=createDOMRenderer.js.map

lib/renderer/getStyleSheetForBucket.js

@@ -6,3 +6,3 @@ /**
  */
-export var styleBucketOrdering = [// catch-all
+export const styleBucketOrdering = [// catch-all
 'd', // link
@@ -24,7 +24,7 @@ 'l', // visited
   if (!renderer.styleElements[bucketName]) {
-    var currentBucketIndex = styleBucketOrdering.indexOf(bucketName) + 1;
-    var nextBucketFromCache = null; // Find the next bucket which we will add our new style bucket before.
+    let currentBucketIndex = styleBucketOrdering.indexOf(bucketName) + 1;
+    let nextBucketFromCache = null; // Find the next bucket which we will add our new style bucket before.
 
     for (; currentBucketIndex < styleBucketOrdering.length; currentBucketIndex++) {
-      var nextBucket = renderer.styleElements[styleBucketOrdering[currentBucketIndex]];
+      const nextBucket = renderer.styleElements[styleBucketOrdering[currentBucketIndex]];
 
@@ -37,3 +37,3 @@ if (nextBucket) {
 
-    var tag = target.createElement('style');
+    const tag = target.createElement('style');
     tag.dataset.makeStylesBucket = bucketName;
@@ -40,0 +40,0 @@ renderer.styleElements[bucketName] = tag;

lib/renderer/rehydrateRendererCache.js

 // Regexps to extract names of classes and animations
 // https://github.com/styletron/styletron/blob/e0fcae826744eb00ce679ac613a1b10d44256660/packages/styletron-engine-atomic/src/client/client.js#L8
-// eslint-disable-next-line @fluentui/max-len
-var KEYFRAMES_HYDRATOR = /@(-webkit-)?keyframes ([^{]+){((?:(?:from|to|(?:\d+\.?\d*%))\{(?:[^}])*})*)}/g;
-var AT_RULES_HYDRATOR = /@(media|supports)[^{]+\{([\s\S]+?})\s*}/g;
-var STYLES_HYDRATOR = /\.([^{:]+)(:[^{]+)?{(?:[^}]*;)?([^}]*?)}/g;
-var regexps = {
+const KEYFRAMES_HYDRATOR = /@(-webkit-)?keyframes ([^{]+){((?:(?:from|to|(?:\d+\.?\d*%))\{(?:[^}])*})*)}/g;
+const AT_RULES_HYDRATOR = /@(media|supports)[^{]+\{([\s\S]+?})\s*}/g;
+const STYLES_HYDRATOR = /\.([^{:]+)(:[^{]+)?{(?:[^}]*;)?([^}]*?)}/g;
+const regexps = {
   k: KEYFRAMES_HYDRATOR,
@@ -18,12 +17,8 @@ t: AT_RULES_HYDRATOR
 
-export function rehydrateRendererCache(renderer, target) {
-  if (target === void 0) {
-    target = typeof document === 'undefined' ? undefined : document;
-  }
-
+export function rehydrateRendererCache(renderer, target = typeof document === 'undefined' ? undefined : document) {
   if (target) {
-    var styleElements = target.querySelectorAll('[data-make-styles-bucket]');
-    styleElements.forEach(function (styleElement) {
-      var bucketName = styleElement.dataset.makeStylesBucket;
-      var regex = regexps[bucketName] || STYLES_HYDRATOR; // 👇 If some elements are not created yet, we will register them in renderer
+    const styleElements = target.querySelectorAll('[data-make-styles-bucket]');
+    styleElements.forEach(styleElement => {
+      const bucketName = styleElement.dataset.makeStylesBucket;
+      const regex = regexps[bucketName] || STYLES_HYDRATOR; // 👇 If some elements are not created yet, we will register them in renderer
 
@@ -34,7 +29,7 @@ if (!renderer.styleElements[bucketName]) {
 
-      var match;
+      let match;
 
       while (match = regex.exec(styleElement.textContent)) {
         // "cacheKey" is either a class name or an animation name
-        var cssRule = match[0];
+        const [cssRule] = match;
         renderer.insertionCache[cssRule] = bucketName;
@@ -41,0 +36,0 @@ }

lib/resolveStyleRulesForSlots.js

@@ -13,22 +13,13 @@ import { createCSSVariablesProxy } from './runtime/createCSSVariablesProxy';
 export function resolveStyleRulesForSlots(stylesBySlots, unstable_cssPriority) {
-  var tokensProxy = createCSSVariablesProxy();
-  var classesMapBySlot = {};
-  var cssRules = {};
+  const tokensProxy = createCSSVariablesProxy();
+  const classesMapBySlot = {};
+  const cssRules = {}; // eslint-disable-next-line guard-for-in
 
-  var _loop_1 = function (slotName) {
-    var slotStyles = typeof stylesBySlots[slotName] === 'function' ? stylesBySlots[slotName](tokensProxy) : stylesBySlots[slotName];
-
-    var _a = resolveStyleRules(slotStyles, unstable_cssPriority),
-        cssClassMap = _a[0],
-        cssRulesByBucket = _a[1];
-
+  for (const slotName in stylesBySlots) {
+    const slotStyles = typeof stylesBySlots[slotName] === 'function' ? stylesBySlots[slotName](tokensProxy) : stylesBySlots[slotName];
+    const [cssClassMap, cssRulesByBucket] = resolveStyleRules(slotStyles, unstable_cssPriority);
     classesMapBySlot[slotName] = cssClassMap;
-    Object.keys(cssRulesByBucket).forEach(function (styleBucketName) {
+    Object.keys(cssRulesByBucket).forEach(styleBucketName => {
       cssRules[styleBucketName] = (cssRules[styleBucketName] || []).concat(cssRulesByBucket[styleBucketName]);
     });
-  }; // eslint-disable-next-line guard-for-in
-
-
-  for (var slotName in stylesBySlots) {
-    _loop_1(slotName);
   }
@@ -35,0 +26,0 @@

lib/runtime/compileCSS.js

 import { compile, middleware, prefixer, rulesheet, serialize, stringify } from 'stylis';
 import { hyphenateProperty } from './utils/hyphenateProperty';
 import { normalizeNestedProperty } from './utils/normalizeNestedProperty';
-var PSEUDO_SELECTOR_REGEX = /,( *[^ &])/g;
+const PSEUDO_SELECTOR_REGEX = /,( *[^ &])/g;
 
@@ -26,33 +26,33 @@ function repeatSelector(selector, times) {
 export function compileCSSRules(cssRules) {
-  var rules = [];
+  const rules = [];
   serialize(compile(cssRules), middleware([prefixer, stringify, // 💡 we are using `.insertRule()` API for DOM operations, which does not support
   // insertion of multiple CSS rules in a single call. `rulesheet` plugin extracts
   // individual rules to be used with this API
-  rulesheet(function (rule) {
-    return rules.push(rule);
-  })]));
+  rulesheet(rule => rules.push(rule))]));
   return rules;
 }
 export function compileCSS(options) {
-  var className = options.className,
-      media = options.media,
-      pseudo = options.pseudo,
-      support = options.support,
-      property = options.property,
-      rtlClassName = options.rtlClassName,
-      rtlProperty = options.rtlProperty,
-      rtlValue = options.rtlValue,
-      value = options.value,
-      unstable_cssPriority = options.unstable_cssPriority;
-  var classNameSelector = repeatSelector("." + className, unstable_cssPriority);
-  var cssDeclaration = "{ " + hyphenateProperty(property) + ": " + value + "; }";
-  var rtlClassNameSelector = null;
-  var rtlCSSDeclaration = null;
+  const {
+    className,
+    media,
+    pseudo,
+    support,
+    property,
+    rtlClassName,
+    rtlProperty,
+    rtlValue,
+    value,
+    unstable_cssPriority
+  } = options;
+  const classNameSelector = repeatSelector(`.${className}`, unstable_cssPriority);
+  const cssDeclaration = `{ ${hyphenateProperty(property)}: ${value}; }`;
+  let rtlClassNameSelector = null;
+  let rtlCSSDeclaration = null;
 
   if (rtlProperty && rtlClassName) {
-    rtlClassNameSelector = repeatSelector("." + rtlClassName, unstable_cssPriority);
-    rtlCSSDeclaration = "{ " + hyphenateProperty(rtlProperty) + ": " + rtlValue + "; }";
+    rtlClassNameSelector = repeatSelector(`.${rtlClassName}`, unstable_cssPriority);
+    rtlCSSDeclaration = `{ ${hyphenateProperty(rtlProperty)}: ${rtlValue}; }`;
   }
 
-  var cssRule = ''; // Should be handled by namespace plugin of Stylis, is buggy now
+  let cssRule = ''; // Should be handled by namespace plugin of Stylis, is buggy now
   // Issues are reported:
@@ -64,20 +64,15 @@ // https://github.com/thysultan/stylis.js/issues/253
     // 👇 :global(GROUP_1)GROUP_2
-    var GLOBAL_PSEUDO_REGEX = /global\((.+)\)(.+)?/;
+    const GLOBAL_PSEUDO_REGEX = /global\((.+)\)(.+)?/;
+    const [, globalSelector, restPseudo = ''] = GLOBAL_PSEUDO_REGEX.exec(pseudo); // should be normalized to handle ":global(SELECTOR) &"
 
-    var _a = GLOBAL_PSEUDO_REGEX.exec(pseudo),
-        globalSelector = _a[1],
-        _b = _a[2],
-        restPseudo = _b === void 0 ? '' : _b; // should be normalized to handle ":global(SELECTOR) &"
-
-
-    var normalizedPseudo = normalizeNestedProperty(restPseudo.trim());
-    var ltrRule = "" + classNameSelector + normalizedPseudo + " " + cssDeclaration;
-    var rtlRule = rtlProperty ? "" + rtlClassNameSelector + normalizedPseudo + " " + rtlCSSDeclaration : '';
-    cssRule = globalSelector + " { " + ltrRule + "; " + rtlRule + " }";
+    const normalizedPseudo = normalizeNestedProperty(restPseudo.trim());
+    const ltrRule = `${classNameSelector}${normalizedPseudo} ${cssDeclaration}`;
+    const rtlRule = rtlProperty ? `${rtlClassNameSelector}${normalizedPseudo} ${rtlCSSDeclaration}` : '';
+    cssRule = `${globalSelector} { ${ltrRule}; ${rtlRule} }`;
   } else {
-    var normalizedPseudo = normalizePseudoSelector(pseudo);
-    cssRule = classNameSelector + "{" + normalizedPseudo + " " + cssDeclaration + "};";
+    const normalizedPseudo = normalizePseudoSelector(pseudo);
+    cssRule = `${classNameSelector}{${normalizedPseudo} ${cssDeclaration}};`;
 
     if (rtlProperty) {
-      cssRule = cssRule + "; " + rtlClassNameSelector + normalizedPseudo + " " + rtlCSSDeclaration + ";";
+      cssRule = `${cssRule}; ${rtlClassNameSelector}${normalizedPseudo} ${rtlCSSDeclaration};`;
     }
@@ -87,7 +82,7 @@ }
   if (media) {
-    cssRule = "@media " + media + " { " + cssRule + " }";
+    cssRule = `@media ${media} { ${cssRule} }`;
   }
 
   if (support) {
-    cssRule = "@supports " + support + " { " + cssRule + " }";
+    cssRule = `@supports ${support} { ${cssRule} }`;
   }
@@ -94,0 +89,0 @@

lib/runtime/compileKeyframeCSS.d.ts

@@ -1,3 +0,3 @@
-import { MakeStyles } from '../types';
-export declare function compileKeyframeRule(keyframeObject: MakeStyles): string;
+import { MakeStylesAnimation } from '../types';
+export declare function compileKeyframeRule(keyframeObject: MakeStylesAnimation): string;
 /**
@@ -4,0 +4,0 @@ * Creates CSS rules for insertion from passed CSS.

lib/runtime/compileKeyframeCSS.js

 import { compile, middleware, serialize, rulesheet, stringify, prefixer } from 'stylis';
 import { cssifyObject } from './utils/cssifyObject';
 export function compileKeyframeRule(keyframeObject) {
-  var css = ''; // eslint-disable-next-line guard-for-in
+  let css = ''; // eslint-disable-next-line guard-for-in
 
-  for (var percentage in keyframeObject) {
-    css += percentage + "{" + cssifyObject(keyframeObject[percentage]) + "}";
+  for (const percentage in keyframeObject) {
+    css += `${percentage}{${cssifyObject(keyframeObject[percentage])}}`;
   }
@@ -17,12 +17,10 @@
 export function compileKeyframesCSS(keyframeName, keyframeCSS) {
-  var cssRule = "@keyframes " + keyframeName + " {" + keyframeCSS + "}";
-  var rules = [];
+  const cssRule = `@keyframes ${keyframeName} {${keyframeCSS}}`;
+  const rules = [];
   serialize(compile(cssRule), middleware([prefixer, stringify, // 💡 we are using `.insertRule()` API for DOM operations, which does not support
   // insertion of multiple CSS rules in a single call. `rulesheet` plugin extracts
   // individual rules to be used with this API
-  rulesheet(function (rule) {
-    return rules.push(rule);
-  })]));
+  rulesheet(rule => rules.push(rule))]));
   return rules;
 }
 //# sourceMappingURL=compileKeyframeCSS.js.map

lib/runtime/compileStaticCSS.d.ts

@@ -1,2 +0,2 @@
-import { MakeStyles } from '../types';
-export declare function compileStaticCSS(property: string, value: MakeStyles): string;
+import { MakeStaticStylesStyle } from '../types';
+export declare function compileStaticCSS(property: string, value: MakeStaticStylesStyle): string;

lib/runtime/compileStaticCSS.js

 import { compileCSSRules } from './compileCSS';
 import { cssifyObject } from './utils/cssifyObject';
 export function compileStaticCSS(property, value) {
-  var cssRule = property + " {" + cssifyObject(value) + "}";
+  const cssRule = `${property} {${cssifyObject(value)}}`;
   return compileCSSRules(cssRule)[0];
 }
 //# sourceMappingURL=compileStaticCSS.js.map

lib/runtime/createCSSVariablesProxy.js

@@ -1,2 +0,2 @@
-var isProxySymbol = '__isProxy__';
+const isProxySymbol = '__isProxy__';
 /**
@@ -9,10 +9,11 @@ * @internal
   function proxyToStr() {
-    return "var(--" + prefix + ")";
+    return `var(--${prefix})`;
   }
 
-  var proxy = new Proxy(proxyToStr, {
-    has: function (_, key) {
+  const proxy = new Proxy(proxyToStr, {
+    has(_, key) {
       return key === isProxySymbol;
     },
-    get: function (target, key) {
+
+    get(target, key) {
       if (key === 'toString' || key === Symbol.toPrimitive) {
@@ -24,2 +25,3 @@ return target;
     }
+
   });
@@ -49,6 +51,6 @@ return proxy;
   if (typeof value === 'object') {
-    var expanded = {}; // eslint-disable-next-line guard-for-in
+    const expanded = {}; // eslint-disable-next-line guard-for-in
 
-    for (var key in value) {
-      var internalValue = value[key];
+    for (const key in value) {
+      const internalValue = value[key];
       expanded[key] = resolveProxyValues(internalValue);
@@ -55,0 +57,0 @@ }

lib/runtime/expandShorthand.d.ts

@@ -1,2 +0,2 @@
-import { MakeStyles } from '../types';
+import { MakeStylesStyle } from '../types';
 /**
@@ -6,2 +6,2 @@ * A function that expands longhand properties ("margin", "padding") to their shorthand versions ("margin-left", etc.).
  */
-export declare function expandShorthand(style: MakeStyles, result?: MakeStyles): MakeStyles;
+export declare function expandShorthand(style: MakeStylesStyle, result?: MakeStylesStyle): MakeStylesStyle;

lib/runtime/expandShorthand.js

@@ -7,13 +7,9 @@ import { expandProperty } from 'inline-style-expand-shorthand';
 
-export function expandShorthand(style, result) {
-  if (result === void 0) {
-    result = {};
-  } // eslint-disable-next-line guard-for-in
+export function expandShorthand(style, result = {}) {
+  // eslint-disable-next-line guard-for-in
+  for (const property in style) {
+    const value = style[property];
 
-
-  for (var property in style) {
-    var value = style[property];
-
     if (typeof value === 'string' || typeof value === 'number') {
-      var expansion = expandProperty(property, value);
+      const expansion = expandProperty(property, value);
 
@@ -23,3 +19,5 @@ if (expansion) {
       } else {
-        result[property] = value;
+        // Cast to any to avoid "error TS2590: Expression produces a union type that is too complex to represent"
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        result[property] = value; // result[property as keyof MakeStylesStyle] = value;
       } // eslint-disable-next-line eqeqeq
@@ -31,2 +29,3 @@
     } else if (typeof value === 'object') {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       result[property] = expandShorthand(value);
@@ -33,0 +32,0 @@ }

lib/runtime/getStyleBucketName.js

@@ -6,3 +6,3 @@ /**
  */
-var pseudosMap = {
+const pseudosMap = {
   // :focus-within
@@ -47,3 +47,3 @@ 'us-w': 'w',
 
-  var normalizedPseudo = pseudo.trim();
+  const normalizedPseudo = pseudo.trim();
 
@@ -50,0 +50,0 @@ if (normalizedPseudo.charCodeAt(0) === 58

lib/runtime/reduceToClassNameForSlots.js

@@ -10,9 +10,9 @@ import { DEFINITION_LOOKUP_TABLE } from '../constants';
 export function reduceToClassName(classMap, dir) {
-  var className = ''; // eslint-disable-next-line guard-for-in
+  let className = ''; // eslint-disable-next-line guard-for-in
 
-  for (var propertyHash in classMap) {
-    var classNameMapping = classMap[propertyHash];
+  for (const propertyHash in classMap) {
+    const classNameMapping = classMap[propertyHash];
 
     if (classNameMapping) {
-      var hasRTLClassName = Array.isArray(classNameMapping);
+      const hasRTLClassName = Array.isArray(classNameMapping);
 
@@ -37,8 +37,8 @@ if (dir === 'rtl') {
 export function reduceToClassNameForSlots(classesMapBySlot, dir) {
-  var classNamesForSlots = {}; // eslint-disable-next-line guard-for-in
+  const classNamesForSlots = {}; // eslint-disable-next-line guard-for-in
 
-  for (var slotName in classesMapBySlot) {
-    var classnamesForSlot = reduceToClassName(classesMapBySlot[slotName], dir);
-    var sequenceHash = hashSequence(classnamesForSlot, dir);
-    var resultSlotClasses = sequenceHash + ' ' + classnamesForSlot;
+  for (const slotName in classesMapBySlot) {
+    const classnamesForSlot = reduceToClassName(classesMapBySlot[slotName], dir);
+    const sequenceHash = hashSequence(classnamesForSlot, dir);
+    const resultSlotClasses = sequenceHash + ' ' + classnamesForSlot;
     DEFINITION_LOOKUP_TABLE[sequenceHash] = [classesMapBySlot[slotName], dir];
@@ -45,0 +45,0 @@ classNamesForSlots[slotName] = resultSlotClasses;

lib/runtime/resolveStaticStyleRules.js

 import { compileStaticCSS } from './compileStaticCSS';
 import { compileCSSRules } from './compileCSS';
-export function resolveStaticStyleRules(styles, result) {
-  if (result === void 0) {
-    result = {};
-  }
-
+export function resolveStaticStyleRules(styles, result = {}) {
   if (typeof styles === 'string') {
-    var cssRules = compileCSSRules(styles);
+    const cssRules = compileCSSRules(styles);
 
-    for (var _i = 0, cssRules_1 = cssRules; _i < cssRules_1.length; _i++) {
-      var rule = cssRules_1[_i];
+    for (const rule of cssRules) {
       addResolvedStyles(rule, result);
@@ -17,5 +12,5 @@ }
     // eslint-disable-next-line guard-for-in
-    for (var property in styles) {
-      var value = styles[property];
-      var staticCSS = compileStaticCSS(property, value);
+    for (const property in styles) {
+      const value = styles[property];
+      const staticCSS = compileStaticCSS(property, value);
       addResolvedStyles(staticCSS, result);
@@ -28,8 +23,4 @@ }
 
-function addResolvedStyles(cssRule, result) {
-  if (result === void 0) {
-    result = {};
-  } // 👇 static rules should be inserted into default bucket
-
-
+function addResolvedStyles(cssRule, result = {}) {
+  // 👇 static rules should be inserted into default bucket
   result.d = result.d || [];
@@ -36,0 +27,0 @@ result.d.push(cssRule);

lib/runtime/resolveStyleRules.d.ts

@@ -1,2 +0,2 @@
-import { MakeStyles, CSSClassesMap, CSSRulesByBucket } from '../types';
+import { MakeStylesStyle, CSSClassesMap, CSSRulesByBucket } from '../types';
 /**
@@ -7,2 +7,2 @@ * Transforms input styles to classes maps & CSS rules.
  */
-export declare function resolveStyleRules(styles: MakeStyles, unstable_cssPriority?: number): [CSSClassesMap, CSSRulesByBucket];
+export declare function resolveStyleRules(styles: MakeStylesStyle, unstable_cssPriority?: number): [CSSClassesMap, CSSRulesByBucket];

lib/runtime/resolveStyleRules.js

@@ -1,2 +0,1 @@
-import { __assign } from "tslib";
 import hashString from '@emotion/hash';
@@ -32,31 +31,7 @@ import { convert, convertProperty } from 'rtl-css-js/core';
 
-function resolveStyleRulesInner(styles, unstable_cssPriority, pseudo, media, support, cssClassesMap, cssRulesByBucket, rtlValue) {
-  if (unstable_cssPriority === void 0) {
-    unstable_cssPriority = 0;
-  }
+function resolveStyleRulesInner(styles, unstable_cssPriority = 0, pseudo = '', media = '', support = '', cssClassesMap = {}, cssRulesByBucket = {}, rtlValue) {
+  // eslint-disable-next-line guard-for-in
+  for (const property in styles) {
+    const value = styles[property]; // eslint-disable-next-line eqeqeq
 
-  if (pseudo === void 0) {
-    pseudo = '';
-  }
-
-  if (media === void 0) {
-    media = '';
-  }
-
-  if (support === void 0) {
-    support = '';
-  }
-
-  if (cssClassesMap === void 0) {
-    cssClassesMap = {};
-  }
-
-  if (cssRulesByBucket === void 0) {
-    cssRulesByBucket = {};
-  } // eslint-disable-next-line guard-for-in
-
-
-  for (var property in styles) {
-    var value = styles[property]; // eslint-disable-next-line eqeqeq
-
     if (value == null) {
@@ -68,58 +43,54 @@ continue;
       // uniq key based on a hash of property & selector, used for merging later
-      var key = hashPropertyKey(pseudo, media, support, property);
-      var className = hashClassName({
-        media: media,
+      const key = hashPropertyKey(pseudo, media, support, property);
+      const className = hashClassName({
+        media,
         value: value.toString(),
-        support: support,
-        pseudo: pseudo,
-        property: property,
-        unstable_cssPriority: unstable_cssPriority
+        support,
+        pseudo,
+        property,
+        unstable_cssPriority
       });
-      var rtlDefinition = rtlValue && {
+      const rtlDefinition = rtlValue && {
         key: property,
         value: rtlValue
       } || convertProperty(property, value);
-      var flippedInRtl = rtlDefinition.key !== property || rtlDefinition.value !== value;
-      var rtlClassName = flippedInRtl ? hashClassName({
+      const flippedInRtl = rtlDefinition.key !== property || rtlDefinition.value !== value;
+      const rtlClassName = flippedInRtl ? hashClassName({
         value: rtlDefinition.value.toString(),
         property: rtlDefinition.key,
-        pseudo: pseudo,
-        media: media,
-        support: support,
-        unstable_cssPriority: unstable_cssPriority
+        pseudo,
+        media,
+        support,
+        unstable_cssPriority
       }) : undefined;
-      var rtlCompileOptions = flippedInRtl ? {
-        rtlClassName: rtlClassName,
+      const rtlCompileOptions = flippedInRtl ? {
+        rtlClassName,
         rtlProperty: rtlDefinition.key,
         rtlValue: rtlDefinition.value
       } : undefined;
-      var styleBucketName = getStyleBucketName(pseudo, media, support);
-
-      var _a = compileCSS(__assign({
-        className: className,
-        media: media,
-        pseudo: pseudo,
-        property: property,
-        support: support,
-        value: value,
-        unstable_cssPriority: unstable_cssPriority
-      }, rtlCompileOptions)),
-          ltrCSS = _a[0],
-          rtlCSS = _a[1];
-
+      const styleBucketName = getStyleBucketName(pseudo, media, support);
+      const [ltrCSS, rtlCSS] = compileCSS({
+        className,
+        media,
+        pseudo,
+        property,
+        support,
+        value,
+        unstable_cssPriority,
+        ...rtlCompileOptions
+      });
       pushToClassesMap(cssClassesMap, key, className, rtlClassName);
       pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS);
     } else if (property === 'animationName') {
-      var animationNameValue = Array.isArray(value) ? value : [value];
-      var animationNames = [];
-      var rtlAnimationNames = [];
+      const animationNameValue = Array.isArray(value) ? value : [value];
+      const animationNames = [];
+      const rtlAnimationNames = [];
 
-      for (var _i = 0, animationNameValue_1 = animationNameValue; _i < animationNameValue_1.length; _i++) {
-        var keyframeObject = animationNameValue_1[_i];
-        var keyframeCSS = compileKeyframeRule(keyframeObject);
-        var rtlKeyframeCSS = compileKeyframeRule(convert(keyframeObject));
-        var animationName = HASH_PREFIX + hashString(keyframeCSS);
-        var rtlAnimationName = void 0;
-        var keyframeRules = compileKeyframesCSS(animationName, keyframeCSS);
-        var rtlKeyframeRules = [];
+      for (const keyframeObject of animationNameValue) {
+        const keyframeCSS = compileKeyframeRule(keyframeObject);
+        const rtlKeyframeCSS = compileKeyframeRule(convert(keyframeObject));
+        const animationName = HASH_PREFIX + hashString(keyframeCSS);
+        let rtlAnimationName;
+        const keyframeRules = compileKeyframesCSS(animationName, keyframeCSS);
+        let rtlKeyframeRules = [];
 
@@ -134,3 +105,3 @@ if (keyframeCSS === rtlKeyframeCSS) {
 
-        for (var i = 0; i < keyframeRules.length; i++) {
+        for (let i = 0; i < keyframeRules.length; i++) {
           pushToCSSRules(cssRulesByBucket, // keyframes styles should be inserted into own bucket
@@ -151,6 +122,6 @@ 'k', keyframeRules[i], rtlKeyframeRules[i]);
       } else if (isMediaQuerySelector(property)) {
-        var combinedMediaQuery = generateCombinedQuery(media, property.slice(6).trim());
+        const combinedMediaQuery = generateCombinedQuery(media, property.slice(6).trim());
         resolveStyleRulesInner(value, unstable_cssPriority, pseudo, combinedMediaQuery, support, cssClassesMap, cssRulesByBucket);
       } else if (isSupportQuerySelector(property)) {
-        var combinedSupportQuery = generateCombinedQuery(support, property.slice(9).trim());
+        const combinedSupportQuery = generateCombinedQuery(support, property.slice(9).trim());
         resolveStyleRulesInner(value, unstable_cssPriority, pseudo, media, combinedSupportQuery, cssClassesMap, cssRulesByBucket);
@@ -160,3 +131,3 @@ } else {
           // eslint-disable-next-line no-console
-          console.error("Please fix the unresolved style rule: \n " + property + " \n " + JSON.stringify(value, null, 2) + "\"");
+          console.error(`Please fix the unresolved style rule: \n ${property} \n ${JSON.stringify(value, null, 2)}"`);
         }
@@ -176,11 +147,7 @@ }
 
-export function resolveStyleRules(styles, unstable_cssPriority) {
-  if (unstable_cssPriority === void 0) {
-    unstable_cssPriority = 0;
-  } // expandShorthand() and resolveProxyValues() are recursive functions and should be evaluated once for a style object
-
-
-  var expandedStyles = expandShorthand(resolveProxyValues(styles));
+export function resolveStyleRules(styles, unstable_cssPriority = 0) {
+  // expandShorthand() and resolveProxyValues() are recursive functions and should be evaluated once for a style object
+  const expandedStyles = expandShorthand(resolveProxyValues(styles));
   return resolveStyleRulesInner(expandedStyles, unstable_cssPriority);
 }
 //# sourceMappingURL=resolveStyleRules.js.map

lib/runtime/utils/cssifyObject.d.ts

@@ -1,2 +0,2 @@
-import { MakeStyles } from '../../types';
-export declare function cssifyObject(style: MakeStyles): string;
+import { MakeStaticStylesStyle, MakeStylesStyle } from '../../types';
+export declare function cssifyObject(style: MakeStylesStyle | MakeStaticStylesStyle): string;

lib/runtime/utils/cssifyObject.js

 import { hyphenateProperty } from './hyphenateProperty';
 export function cssifyObject(style) {
-  var css = ''; // eslint-disable-next-line guard-for-in
+  let css = ''; // eslint-disable-next-line guard-for-in
 
-  for (var property in style) {
-    var value = style[property];
+  for (const property in style) {
+    const value = style[property];
 
@@ -8,0 +8,0 @@ if (typeof value !== 'string' && typeof value !== 'number') {

lib/runtime/utils/generateCombinedMediaQuery.js

@@ -6,4 +6,4 @@ export function generateCombinedQuery(currentMediaQuery, nestedMediaQuery) {
 
-  return currentMediaQuery + " and " + nestedMediaQuery;
+  return `${currentMediaQuery} and ${nestedMediaQuery}`;
 }
 //# sourceMappingURL=generateCombinedMediaQuery.js.map

lib/runtime/utils/hashClassName.js

 import hashString from '@emotion/hash';
 import { HASH_PREFIX } from '../../constants';
-export function hashClassName(_a) {
-  var media = _a.media,
-      property = _a.property,
-      pseudo = _a.pseudo,
-      support = _a.support,
-      value = _a.value,
-      unstable_cssPriority = _a.unstable_cssPriority; // Trimming of value is required to generate consistent hashes
-
-  var classNameHash = hashString(pseudo + media + support + property + value.trim());
+export function hashClassName({
+  media,
+  property,
+  pseudo,
+  support,
+  value,
+  unstable_cssPriority
+}) {
+  // Trimming of value is required to generate consistent hashes
+  const classNameHash = hashString(pseudo + media + support + property + value.trim());
   return HASH_PREFIX + classNameHash + (unstable_cssPriority === 0 ? '' : unstable_cssPriority);
 }
 //# sourceMappingURL=hashClassName.js.map

lib/runtime/utils/hashPropertyKey.js

 import hash from '@emotion/hash';
 export function hashPropertyKey(pseudo, media, support, property) {
   // uniq key based on property & selector, used for merging later
-  var computedKey = pseudo + media + support + property; // "key" can be really long as it includes selectors, we use hashes to reduce sizes of keys
+  const computedKey = pseudo + media + support + property; // "key" can be really long as it includes selectors, we use hashes to reduce sizes of keys
   // ".foo :hover" => "abcd"
 
-  var hashedKey = hash(computedKey); // As these hashes are used as object keys in build output we should avoid having numbers as a first character to
+  const hashedKey = hash(computedKey); // As these hashes are used as object keys in build output we should avoid having numbers as a first character to
   // avoid having quotes:
@@ -14,4 +14,4 @@ // {
 
-  var firstCharCode = hashedKey.charCodeAt(0);
-  var startsWithNumber = firstCharCode >= 48 && firstCharCode <= 57;
+  const firstCharCode = hashedKey.charCodeAt(0);
+  const startsWithNumber = firstCharCode >= 48 && firstCharCode <= 57;
 
@@ -18,0 +18,0 @@ if (startsWithNumber) {

lib/runtime/utils/hashSequence.js

@@ -5,3 +5,3 @@ import hash from '@emotion/hash';
 function padEndHash(value) {
-  var hashLength = value.length;
+  const hashLength = value.length;
 
@@ -12,3 +12,3 @@ if (hashLength === SEQUENCE_HASH_LENGTH) {
 
-  for (var i = hashLength; i < SEQUENCE_HASH_LENGTH; i++) {
+  for (let i = hashLength; i < SEQUENCE_HASH_LENGTH; i++) {
     value += '0';
@@ -15,0 +15,0 @@ }

lib/runtime/utils/hyphenateProperty.js

@@ -1,4 +0,4 @@
-var uppercasePattern = /[A-Z]/g;
-var msPattern = /^ms-/;
-var cache = {};
+const uppercasePattern = /[A-Z]/g;
+const msPattern = /^ms-/;
+const cache = {};
 
@@ -18,5 +18,5 @@ function toHyphenLower(match) {
 
-  var hName = name.replace(uppercasePattern, toHyphenLower);
+  const hName = name.replace(uppercasePattern, toHyphenLower);
   return cache[name] = msPattern.test(hName) ? '-' + hName : hName;
 }
 //# sourceMappingURL=hyphenateProperty.js.map

lib/runtime/utils/isNestedSelector.js

@@ -1,2 +0,2 @@
-var regex = /^(:|\[|>|&)/;
+const regex = /^(:|\[|>|&)/;
 export function isNestedSelector(property) {
@@ -3,0 +3,0 @@ return regex.test(property);

lib/types.d.ts

@@ -1,8 +0,19 @@
-import { Properties as CSSProperties } from 'csstype';
-export interface MakeStyles extends Omit<CSSProperties, 'animationName'> {
-    [key: string]: any;
-    animationName?: object | string;
-}
-export declare type MakeStylesStyleFunctionRule<Tokens> = (tokens: Tokens) => MakeStyles;
-export declare type MakeStylesStyleRule<Tokens> = MakeStyles | MakeStylesStyleFunctionRule<Tokens>;
+import * as CSS from 'csstype';
+export declare type MakeStylesCSSValue = string | 0;
+declare type MakeStylesCSSProperties = Omit<CSS.Properties<MakeStylesCSSValue>, 'animationName'>;
+export declare type MakeStylesStrictCSSObject = MakeStylesCSSProperties & MakeStylesCSSPseudos & {
+    animationName?: MakeStylesAnimation | MakeStylesAnimation[] | CSS.AnimationProperty;
+};
+declare type MakeStylesCSSObjectCustom = {
+    [Property: string]: MakeStylesStyle | string | 0;
+};
+declare type MakeStylesCSSPseudos = {
+    [Property in CSS.Pseudos]?: MakeStylesStrictCSSObject & {
+        content?: string;
+    };
+};
+export declare type MakeStylesAnimation = Record<'from' | 'to' | string, MakeStylesCSSObjectCustom>;
+export declare type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustom;
+export declare type MakeStylesStyleFunctionRule<Tokens> = (tokens: Tokens) => MakeStylesStyle;
+export declare type MakeStylesStyleRule<Tokens> = MakeStylesStyle | MakeStylesStyleFunctionRule<Tokens>;
 export interface MakeStylesOptions {
@@ -12,4 +23,4 @@ dir: 'ltr' | 'rtl';
 }
-export declare type MakeStaticStyles = ({
-    [key: string]: CSSProperties & Record<string, any>;
+export declare type MakeStaticStylesStyle = {
+    [key: string]: CSS.Properties & Record<string, any>;
 } & {
@@ -27,3 +38,4 @@ '@font-face'?: {
     };
-}) | string;
+};
+export declare type MakeStaticStyles = MakeStaticStylesStyle | string;
 export interface MakeStaticStylesOptions {
@@ -59,1 +71,2 @@ renderer: MakeStylesRenderer;
 export declare type LookupItem = [/* definitions */ CSSClassesMap, /* dir */ /* dir */ 'rtl' | 'ltr'];
+export {};

package.json

 {
   "name": "@fluentui/make-styles",
-  "version": "0.0.0-nightly57a9843f2620211119.1",
+  "version": "0.0.0-nightly58c310891320211216.1",
   "description": "Experimental utility for creating css styles/classes.",
@@ -22,3 +22,4 @@ "main": "lib-commonjs/index.js",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/ && yarn docs"
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/make-styles/src && yarn docs",
+    "type-check": "tsc -b tsconfig.json"
   },
@@ -25,0 +26,0 @@ "devDependencies": {

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

311323

increased by24.1%

Number of package files

283

increased by42.21%

Lines of code

5104

increased by26.78%

No dependency changes