@fluentui/make-styles - npm Package Compare versions

Comparing version 0.0.0-nightlyd3bf09bf8120211201.1 to 0.0.0-nightlydd0f007b3f20220119.1

CHANGELOG.json

@@ -5,5 +5,5 @@ {
     {
-      "date": "Wed, 01 Dec 2021 04:25:41 GMT",
-      "tag": "@fluentui/make-styles_v0.0.0-nightlyd3bf09bf8120211201.1",
-      "version": "0.0.0-nightlyd3bf09bf8120211201.1",
+      "date": "Wed, 19 Jan 2022 04:16:33 GMT",
+      "tag": "@fluentui/make-styles_v0.0.0-nightlydd0f007b3f20220119.1",
+      "version": "0.0.0-nightlydd0f007b3f20220119.1",
       "comments": {
@@ -14,8 +14,32 @@ "prerelease": [
             "package": "@fluentui/make-styles",
-            "commit": "40bec5fdab524f928e775fb2ed002822255eb2a7",
+            "commit": "6044506cc626a9a155e0df40645426ddcc080c55",
             "comment": "Release nightly v9"
           },
           {
+            "author": "[e-mail]",
+            "package": "@fluentui/make-styles",
+            "commit": "6c32d0180e89674a46daf795de69e5dc6ca71ef7",
+            "comment": "BREAKING: remove functions support from makeStyles()"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/make-styles",
+            "commit": "00a5d945904c896a0664de6ba72c145a255f0848",
+            "comment": "Making it so that fontWeight can handle string as a type in makeStyles calls."
+          },
+          {
             "author": "[e-mail]",
             "package": "@fluentui/make-styles",
+            "commit": "dafe45bf9859ac830556e1c6930730ddeefa21ad",
+            "comment": "perf: rework mergeClasses() to compute cache key faster"
+          },
+          {
+            "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",
@@ -27,4 +51,28 @@ "comment": "improve types, add new types"
             "package": "@fluentui/make-styles",
+            "commit": "fc9a2a47c786ebd58c0b33406281485268e7a77a",
+            "comment": "breaking: remove \"unstable_cssPriority\" from makeStyles()"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/make-styles",
             "commit": "add7efae6339cc0fa85ccc37fea4371bc26074e1",
             "comment": "Add shorthand functions for styles"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/make-styles",
+            "commit": "39bddb7a1da57bb1e7073c7eacabb706e25587a5",
+            "comment": "block usage of CSS shorthands in typings, remove CSS shorthands expansion"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/make-styles",
+            "commit": "dea36b70172522ea1d9da527ae961226ab2c847c",
+            "comment": "Add `unstable_filterCSSRule` option to default `createDOMRenderer`"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/make-styles",
+            "commit": "5e128714ba386902c0650ce61dfdeedee71ec0c8",
+            "comment": "refactor: remove unused theme-proxy functionality"
           }
@@ -38,2 +86,20 @@ ],
             "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"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/make-styles",
+            "commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
+            "comment": "chore: use storybook runner for all vNext packages"
           }
@@ -40,0 +106,0 @@ ]

CHANGELOG.md

 # Change Log - @fluentui/make-styles
 
-This log was last generated on Wed, 01 Dec 2021 04:25:41 GMT and should not be manually modified.
+This log was last generated on Wed, 19 Jan 2022 04:16:33 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightlyd3bf09bf8120211201.1](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v0.0.0-nightlyd3bf09bf8120211201.1)
+## [0.0.0-nightlydd0f007b3f20220119.1](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v0.0.0-nightlydd0f007b3f20220119.1)
 
-Wed, 01 Dec 2021 04:25:41 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v9.0.0-beta.3..@fluentui/make-styles_v0.0.0-nightlyd3bf09bf8120211201.1)
+Wed, 19 Jan 2022 04:16:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v9.0.0-beta.3..@fluentui/make-styles_v0.0.0-nightlydd0f007b3f20220119.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/40bec5fdab524f928e775fb2ed002822255eb2a7) by email not defined)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/6044506cc626a9a155e0df40645426ddcc080c55) by email not defined)
+- BREAKING: remove functions support from makeStyles() ([PR #21239](https://github.com/microsoft/fluentui/pull/21239) by [e-mail])
+- Making it so that fontWeight can handle string as a type in makeStyles calls. ([PR #21217](https://github.com/microsoft/fluentui/pull/21217) by [e-mail])
+- perf: rework mergeClasses() to compute cache key faster ([PR #21288](https://github.com/microsoft/fluentui/pull/21288) by [e-mail])
+- 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])
+- breaking: remove "unstable_cssPriority" from makeStyles() ([PR #21263](https://github.com/microsoft/fluentui/pull/21263) by [e-mail])
 - Add shorthand functions for styles ([PR #20628](https://github.com/microsoft/fluentui/pull/20628) by [e-mail])
+- block usage of CSS shorthands in typings, remove CSS shorthands expansion ([PR #20539](https://github.com/microsoft/fluentui/pull/20539) by [e-mail])
+- Add `unstable_filterCSSRule` option to default `createDOMRenderer` ([PR #20827](https://github.com/microsoft/fluentui/pull/20827) by [e-mail])
+- refactor: remove unused theme-proxy functionality ([PR #21274](https://github.com/microsoft/fluentui/pull/21274) by [e-mail])
 
@@ -18,0 +26,0 @@ ## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v9.0.0-beta.3)

dist/make-styles.d.ts

@@ -14,28 +14,34 @@ import type { BorderColorProperty } from 'csstype';
 
-declare function border(width: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
+declare function border(width: BorderWidthProperty<MakeStylesCSSValue>): BorderStyle;
 
-declare function border(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): MakeStylesStrictCSSObject;
+declare function border(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): BorderStyle;
 
-declare function border(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): MakeStylesStrictCSSObject;
+declare function border(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): BorderStyle;
 
-declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
+declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>): BorderBottomStyle;
 
-declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): MakeStylesStrictCSSObject;
+declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): BorderBottomStyle;
 
-declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): MakeStylesStrictCSSObject;
+declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): BorderBottomStyle;
 
-declare function borderColor(all: BorderColorProperty): MakeStylesStrictCSSObject;
+declare type BorderBottomStyle = Pick<MakeStylesStrictCSSObject, 'borderBottomWidth' | 'borderBottomStyle' | 'borderBottomColor'>;
 
-declare function borderColor(vertical: BorderColorProperty, horizontal: BorderColorProperty): MakeStylesStrictCSSObject;
+declare function borderColor(all: BorderColorProperty): BorderColorStyle;
 
-declare function borderColor(top: BorderColorProperty, horizontal: BorderColorProperty, bottom: BorderColorProperty): MakeStylesStrictCSSObject;
+declare function borderColor(vertical: BorderColorProperty, horizontal: BorderColorProperty): BorderColorStyle;
 
-declare function borderColor(top: BorderColorProperty, right: BorderColorProperty, bottom: BorderColorProperty, left: BorderColorProperty): MakeStylesStrictCSSObject;
+declare function borderColor(top: BorderColorProperty, horizontal: BorderColorProperty, bottom: BorderColorProperty): BorderColorStyle;
 
-declare function borderLeft(width: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
+declare function borderColor(top: BorderColorProperty, right: BorderColorProperty, bottom: BorderColorProperty, left: BorderColorProperty): BorderColorStyle;
 
-declare function borderLeft(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): MakeStylesStrictCSSObject;
+declare type BorderColorStyle = Pick<MakeStylesStrictCSSObject, 'borderTopColor' | 'borderRightColor' | 'borderBottomColor' | 'borderLeftColor'>;
 
-declare function borderLeft(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): MakeStylesStrictCSSObject;
+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'>;
+
 /**
@@ -53,37 +59,44 @@ * A function that implements CSS spec conformant expansion for "borderRadius". "/" is not supported, please use CSS
  */
-declare function borderRadius(value1: MakeStylesCSSValue, value2?: MakeStylesCSSValue, value3?: MakeStylesCSSValue, value4?: MakeStylesCSSValue): MakeStylesStrictCSSObject;
+declare function borderRadius(value1: MakeStylesCSSValue, value2?: MakeStylesCSSValue, value3?: MakeStylesCSSValue, value4?: MakeStylesCSSValue): BorderRadiusStyle;
 
-declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
+declare type BorderRadiusStyle = Pick<MakeStylesStrictCSSObject, 'borderBottomRightRadius' | 'borderBottomLeftRadius' | 'borderTopRightRadius' | 'borderTopLeftRadius'>;
 
-declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): MakeStylesStrictCSSObject;
+declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>): BorderRightStyle;
 
-declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): MakeStylesStrictCSSObject;
+declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): BorderRightStyle;
 
-declare function borderStyle(all: BorderStyleProperty): MakeStylesStrictCSSObject;
+declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): BorderRightStyle;
 
-declare function borderStyle(vertical: BorderStyleProperty, horizontal: BorderStyleProperty): MakeStylesStrictCSSObject;
+declare type BorderRightStyle = Pick<MakeStylesStrictCSSObject, 'borderRightWidth' | 'borderRightStyle' | 'borderRightColor'>;
 
-declare function borderStyle(top: BorderStyleProperty, horizontal: BorderStyleProperty, bottom: BorderStyleProperty): MakeStylesStrictCSSObject;
+declare type BorderStyle = Pick<MakeStylesStrictCSSObject, 'borderTopColor' | 'borderTopStyle' | 'borderTopWidth' | 'borderRightColor' | 'borderRightStyle' | 'borderRightWidth' | 'borderBottomColor' | 'borderBottomStyle' | 'borderBottomWidth' | 'borderLeftColor' | 'borderLeftStyle' | 'borderLeftWidth'>;
 
-declare function borderStyle(top: BorderStyleProperty, right: BorderStyleProperty, bottom: BorderStyleProperty, left: BorderStyleProperty): MakeStylesStrictCSSObject;
+declare function borderStyle(all: BorderStyleProperty): BorderStyleStyle;
 
-declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
+declare function borderStyle(vertical: BorderStyleProperty, horizontal: BorderStyleProperty): BorderStyleStyle;
 
-declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): MakeStylesStrictCSSObject;
+declare function borderStyle(top: BorderStyleProperty, horizontal: BorderStyleProperty, bottom: BorderStyleProperty): BorderStyleStyle;
 
-declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): MakeStylesStrictCSSObject;
+declare function borderStyle(top: BorderStyleProperty, right: BorderStyleProperty, bottom: BorderStyleProperty, left: BorderStyleProperty): BorderStyleStyle;
 
-declare function borderWidth(all: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
+declare type BorderStyleStyle = Pick<MakeStylesStrictCSSObject, 'borderTopStyle' | 'borderRightStyle' | 'borderBottomStyle' | 'borderLeftStyle'>;
 
-declare function borderWidth(vertical: BorderWidthProperty<MakeStylesCSSValue>, horizontal: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
+declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>): BorderTopStyle;
 
-declare function borderWidth(top: BorderWidthProperty<MakeStylesCSSValue>, horizontal: BorderWidthProperty<MakeStylesCSSValue>, bottom: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
+declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): BorderTopStyle;
 
-declare function borderWidth(top: BorderWidthProperty<MakeStylesCSSValue>, right: BorderWidthProperty<MakeStylesCSSValue>, bottom: BorderWidthProperty<MakeStylesCSSValue>, left: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
+declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): BorderTopStyle;
 
-/**
- * @internal
- */
-export declare function createCSSVariablesProxy(prefix?: string): unknown;
+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'>;
+
 /**
@@ -94,4 +107,16 @@ * 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;
 
+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];
@@ -117,4 +142,6 @@
  */
-declare function gap(columnGap: MakeStylesCSSValue, rowGap?: MakeStylesCSSValue): MakeStylesStrictCSSObject;
+declare function gap(columnGap: MakeStylesCSSValue, rowGap?: MakeStylesCSSValue): GapStyle;
 
+declare type GapStyle = Pick<MakeStylesStrictCSSObject, 'columnGap' | 'rowGap'>;
+
 /** @internal */
@@ -159,16 +186,34 @@ export declare const HASH_PREFIX = "f";
 
-export declare function makeStyles<Slots extends string | number, Tokens>(stylesBySlots: StylesBySlots<Slots, Tokens>, unstable_cssPriority?: number): (options: MakeStylesOptions) => Record<Slots, string>;
+export declare function makeStyles<Slots extends string | number>(stylesBySlots: StylesBySlots<Slots>): (options: MakeStylesOptions) => Record<Slots, string>;
 
-export declare type MakeStylesAnimation = Record<'from' | 'to' | string, MakeStylesCSSObjectCustom>;
+export declare type MakeStylesAnimation = Record<'from' | 'to' | string, MakeStylesCSSObjectCustomL1>;
 
-declare type MakeStylesCSSObjectCustom = {
-    [Property: string]: MakeStylesStyle | string | 0;
-};
+declare type MakeStylesCSSObjectCustomL1 = {
+    [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL2;
+} & MakeStylesStrictCSSObject;
 
-declare type MakeStylesCSSProperties = Omit<CSS_2.Properties<MakeStylesCSSValue>, 'animationName'>;
+declare type MakeStylesCSSObjectCustomL2 = {
+    [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL3;
+} & MakeStylesStrictCSSObject;
 
+declare type MakeStylesCSSObjectCustomL3 = {
+    [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL4;
+} & MakeStylesStrictCSSObject;
+
+declare type MakeStylesCSSObjectCustomL4 = {
+    [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL5;
+} & MakeStylesStrictCSSObject;
+
+declare type MakeStylesCSSObjectCustomL5 = {
+    [Property: string]: MakeStylesCSSValue | undefined;
+} & MakeStylesStrictCSSObject;
+
+declare type MakeStylesCSSProperties = Omit<CSS_2.Properties<MakeStylesCSSValue>, 'animationName' | 'fontWeight'> & MakeStylesUnsupportedCSSProperties;
+
 declare type MakeStylesCSSPseudos = {
-    [Property in CSS_2.Pseudos]?: MakeStylesStrictCSSObject & {
+    [Property in CSS_2.Pseudos]?: (MakeStylesStrictCSSObject & {
         content?: string;
-    };
+    }) | (MakeStylesCSSObjectCustomL1 & {
+        content?: string;
+    });
 };
@@ -201,17 +246,61 @@
     animationName?: MakeStylesAnimation | MakeStylesAnimation[] | CSS_2.AnimationProperty;
+    fontWeight?: CSS_2.Properties['fontWeight'] | string;
 };
 
-export declare type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustom;
+export declare type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustomL1;
 
-export declare type MakeStylesStyleFunctionRule<Tokens> = (tokens: Tokens) => MakeStylesStyle;
+declare type MakeStylesUnsupportedCSSProperties = {
+    animation?: never;
+    background?: never;
+    border?: never;
+    borderBlock?: never;
+    borderBlockEnd?: never;
+    borderBlockStart?: never;
+    borderBottom?: never;
+    borderColor?: never;
+    borderImage?: never;
+    borderInline?: never;
+    borderInlineEnd?: never;
+    borderInlineStart?: never;
+    borderLeft?: never;
+    borderRadius?: never;
+    borderRight?: never;
+    borderStyle?: never;
+    borderTop?: never;
+    borderWidth?: never;
+    columnRule?: never;
+    flex?: never;
+    flexFlow?: never;
+    font?: never;
+    gap?: never;
+    grid?: never;
+    gridArea?: never;
+    gridColumn?: never;
+    gridGap?: never;
+    gridRow?: never;
+    gridTemplate?: never;
+    listStyle?: never;
+    margin?: never;
+    mask?: never;
+    maskBorder?: never;
+    offset?: never;
+    outline?: never;
+    overflow?: never;
+    padding?: never;
+    placeItems?: never;
+    placeSelf?: never;
+    textDecoration?: never;
+    textEmphasis?: never;
+    transition?: never;
+};
 
-export declare type MakeStylesStyleRule<Tokens> = MakeStylesStyle | MakeStylesStyleFunctionRule<Tokens>;
+declare function margin(all: MakeStylesCSSValue): MarginStyle;
 
-declare function margin(all: MakeStylesCSSValue): MakeStylesStrictCSSObject;
+declare function margin(vertical: MakeStylesCSSValue, horizontal: MakeStylesCSSValue): MarginStyle;
 
-declare function margin(vertical: MakeStylesCSSValue, horizontal: MakeStylesCSSValue): MakeStylesStrictCSSObject;
+declare function margin(top: MakeStylesCSSValue, horizontal: MakeStylesCSSValue, bottom: MakeStylesCSSValue): MarginStyle;
 
-declare function margin(top: MakeStylesCSSValue, horizontal: MakeStylesCSSValue, bottom: MakeStylesCSSValue): MakeStylesStrictCSSObject;
+declare function margin(top: MakeStylesCSSValue, right: MakeStylesCSSValue, bottom: MakeStylesCSSValue, left: MakeStylesCSSValue): MarginStyle;
 
-declare function margin(top: MakeStylesCSSValue, right: MakeStylesCSSValue, bottom: MakeStylesCSSValue, left: MakeStylesCSSValue): MakeStylesStrictCSSObject;
+declare type MarginStyle = Pick<MakeStylesStrictCSSObject, 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft'>;
 
@@ -246,12 +335,16 @@ /**
  */
-declare function overflow(overflowX: OverflowProperty, overflowY?: OverflowProperty): MakeStylesStrictCSSObject;
+declare function overflow(overflowX: OverflowProperty, overflowY?: OverflowProperty): OverflowStyle;
 
-declare function padding(all: MakeStylesCSSValue): MakeStylesStrictCSSObject;
+declare type OverflowStyle = Pick<MakeStylesStrictCSSObject, 'overflowX' | 'overflowY'>;
 
-declare function padding(vertical: MakeStylesCSSValue, horizontal: MakeStylesCSSValue): MakeStylesStrictCSSObject;
+declare function padding(all: MakeStylesCSSValue): PaddingStyle;
 
-declare function padding(top: MakeStylesCSSValue, horizontal: MakeStylesCSSValue, bottom: MakeStylesCSSValue): MakeStylesStrictCSSObject;
+declare function padding(vertical: MakeStylesCSSValue, horizontal: MakeStylesCSSValue): PaddingStyle;
 
-declare function padding(top: MakeStylesCSSValue, right: MakeStylesCSSValue, bottom: MakeStylesCSSValue, left: MakeStylesCSSValue): MakeStylesStrictCSSObject;
+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;
@@ -268,7 +361,2 @@
 /**
- * @internal
- */
-export declare function resolveProxyValues<T>(value: T): T;
-
-/**
  * Transforms input styles to classes maps & CSS rules.
@@ -278,3 +366,3 @@ *
  */
-export declare function resolveStyleRules(styles: MakeStylesStyle, unstable_cssPriority?: number): [CSSClassesMap, CSSRulesByBucket];
+export declare function resolveStyleRules(styles: MakeStylesStyle, pseudo?: string, media?: string, support?: string, cssClassesMap?: CSSClassesMap, cssRulesByBucket?: CSSRulesByBucket, rtlValue?: string): [CSSClassesMap, CSSRulesByBucket];
 
@@ -285,7 +373,6 @@ /**
  * @param stylesBySlots - An object with makeStyles rules where a key is a slot name
- * @param unstable_cssPriority - Defines priority for selectors of generated CSS rules
  *
  * @return - A tuple with an object classnames mapping where a key is a slot name and an array with CSS rules
  */
-export declare function resolveStyleRulesForSlots<Slots extends string | number, Tokens>(stylesBySlots: StylesBySlots<Slots, Tokens>, unstable_cssPriority: number): [CSSClassesMapBySlot<Slots>, CSSRulesByBucket];
+export declare function resolveStyleRulesForSlots<Slots extends string | number>(stylesBySlots: StylesBySlots<Slots>): [CSSClassesMapBySlot<Slots>, CSSRulesByBucket];
 
@@ -328,4 +415,4 @@ /** @internal */
 
-declare type StylesBySlots<Slots extends string | number, Tokens> = Record<Slots, MakeStylesStyleRule<Tokens>>;
+declare type StylesBySlots<Slots extends string | number> = Record<Slots, MakeStylesStyle>;
 
 export { }

lib-commonjs/index.d.ts

@@ -18,2 +18,3 @@ import { border, borderLeft, borderBottom, borderRight, borderTop, borderColor, borderStyle, borderRadius, borderWidth, gap, margin, padding, overflow } from './shorthands/index';
 export { createDOMRenderer } from './renderer/createDOMRenderer';
+export type { CreateDOMRendererOptions } from './renderer/createDOMRenderer';
 export { styleBucketOrdering } from './renderer/getStyleSheetForBucket';
@@ -25,6 +26,5 @@ export { rehydrateRendererCache } from './renderer/rehydrateRendererCache';
 export { resolveStyleRulesForSlots } from './resolveStyleRulesForSlots';
-export { createCSSVariablesProxy, resolveProxyValues } from './runtime/createCSSVariablesProxy';
 export { resolveStyleRules } from './runtime/resolveStyleRules';
 export { __styles } from './__styles';
 export * from './constants';
-export type { MakeStaticStylesStyle, MakeStaticStyles, MakeStylesAnimation, MakeStylesStyle, MakeStylesStyleRule, MakeStylesStyleFunctionRule, CSSClasses, CSSClassesMapBySlot, CSSRulesByBucket, StyleBucketName, MakeStaticStylesOptions, MakeStylesOptions, MakeStylesRenderer, } from './types';
+export type { MakeStaticStylesStyle, MakeStaticStyles, MakeStylesAnimation, MakeStylesStyle, CSSClasses, CSSClassesMapBySlot, CSSRulesByBucket, StyleBucketName, MakeStaticStylesOptions, MakeStylesOptions, MakeStylesRenderer, } from './types';

lib-commonjs/index.js

@@ -6,3 +6,3 @@ "use strict";
 });
-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;
+exports.__styles = exports.resolveStyleRules = exports.resolveStyleRulesForSlots = exports.makeStyles = exports.makeStaticStyles = exports.mergeClasses = exports.rehydrateRendererCache = exports.styleBucketOrdering = exports.createDOMRenderer = exports.shorthands = void 0;
 
@@ -94,17 +94,2 @@ const tslib_1 = /*#__PURE__*/require("tslib"); // This should be just "export * as shorthands from "
 
-var createCSSVariablesProxy_1 = /*#__PURE__*/require("./runtime/createCSSVariablesProxy");
-
-Object.defineProperty(exports, "createCSSVariablesProxy", {
-  enumerable: true,
-  get: function () {
-    return createCSSVariablesProxy_1.createCSSVariablesProxy;
-  }
-});
-Object.defineProperty(exports, "resolveProxyValues", {
-  enumerable: true,
-  get: function () {
-    return createCSSVariablesProxy_1.resolveProxyValues;
-  }
-});
-
 var resolveStyleRules_1 = /*#__PURE__*/require("./runtime/resolveStyleRules");
@@ -111,0 +96,0 @@

lib-commonjs/makeStyles.d.ts

 import { MakeStylesOptions, StylesBySlots } from './types';
-export declare function makeStyles<Slots extends string | number, Tokens>(stylesBySlots: StylesBySlots<Slots, Tokens>, unstable_cssPriority?: number): (options: MakeStylesOptions) => Record<Slots, string>;
+export declare function makeStyles<Slots extends string | number>(stylesBySlots: StylesBySlots<Slots>): (options: MakeStylesOptions) => Record<Slots, string>;

lib-commonjs/makeStyles.js

@@ -12,3 +12,3 @@ "use strict";
 
-function makeStyles(stylesBySlots, unstable_cssPriority = 0) {
+function makeStyles(stylesBySlots) {
   const insertionCache = {};
@@ -27,3 +27,3 @@ let classesMapBySlot = null;
     if (classesMapBySlot === null) {
-      [classesMapBySlot, cssRules] = resolveStyleRulesForSlots_1.resolveStyleRulesForSlots(stylesBySlots, unstable_cssPriority);
+      [classesMapBySlot, cssRules] = resolveStyleRulesForSlots_1.resolveStyleRulesForSlots(stylesBySlots);
     }
@@ -30,0 +30,0 @@

lib-commonjs/mergeClasses.js

@@ -21,2 +21,4 @@ "use strict";
   // @see https://babeljs.io/docs/en/babel-plugin-transform-parameters
+
+  /* eslint-disable prefer-rest-params */
   let dir = null;
@@ -26,6 +28,5 @@ let resultClassName = ''; // Is used as a cache key to avoid object merging
   let sequenceMatch = '';
-  const sequenceMappings = [];
+  const sequencesIds = new Array(arguments.length);
 
   for (let i = 0; i < arguments.length; i++) {
-    // eslint-disable-next-line prefer-rest-params
     const className = arguments[i];
@@ -41,4 +42,3 @@
       } else {
-        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"
+        const sequenceId = className.substr(sequenceIndex, SEQUENCE_SIZE); // Handles a case with mixed classnames, i.e. "ui-button ATOMIC_CLASSES"
 
@@ -49,20 +49,4 @@ if (sequenceIndex > 0) {
 
-        if (sequenceMapping) {
-          sequenceMatch += sequenceId;
-          sequenceMappings.push(sequenceMapping[constants_1.LOOKUP_DEFINITIONS_INDEX]);
-
-          if (process.env.NODE_ENV !== 'production') {
-            if (dir !== null && dir !== sequenceMapping[constants_1.LOOKUP_DIR_INDEX]) {
-              // 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}`);
-            }
-          }
-
-          dir = sequenceMapping[constants_1.LOOKUP_DIR_INDEX];
-        } else {
-          if (process.env.NODE_ENV !== 'production') {
-            // 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}`);
-          }
-        }
+        sequenceMatch += sequenceId;
+        sequencesIds[i] = sequenceId;
       }
@@ -91,2 +75,27 @@
     return resultClassName + mergeClassesResult;
+  }
+
+  const sequenceMappings = [];
+
+  for (let i = 0; i < arguments.length; i++) {
+    const sequenceId = sequencesIds[i];
+    const sequenceMapping = sequenceId ? constants_1.DEFINITION_LOOKUP_TABLE[sequenceId] : undefined;
+
+    if (sequenceMapping) {
+      sequenceMappings.push(sequenceMapping[constants_1.LOOKUP_DEFINITIONS_INDEX]);
+
+      if (process.env.NODE_ENV !== 'production') {
+        if (dir !== null && dir !== sequenceMapping[constants_1.LOOKUP_DIR_INDEX]) {
+          // 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: ${arguments[i]}`);
+        }
+      }
+
+      dir = sequenceMapping[constants_1.LOOKUP_DIR_INDEX];
+    } else {
+      if (process.env.NODE_ENV !== 'production') {
+        // 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: ${arguments[i]}`);
+      }
+    }
   } // eslint-disable-next-line prefer-spread
@@ -93,0 +102,0 @@

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

@@ -17,3 +17,6 @@ "use strict";
 
-function createDOMRenderer(target = typeof document === 'undefined' ? undefined : document) {
+function createDOMRenderer(target = typeof document === 'undefined' ? undefined : document, options = {}) {
+  const {
+    unstable_filterCSSRule
+  } = options;
   const renderer = {
@@ -41,3 +44,9 @@ insertionCache: {},
             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) {
@@ -44,0 +53,0 @@ // We've disabled these warnings due to false-positive errors with browser prefixes

lib-commonjs/resolveStyleRulesForSlots.d.ts

@@ -6,6 +6,5 @@ import { CSSClassesMapBySlot, CSSRulesByBucket, StylesBySlots } from './types';
  * @param stylesBySlots - An object with makeStyles rules where a key is a slot name
- * @param unstable_cssPriority - Defines priority for selectors of generated CSS rules
  *
  * @return - A tuple with an object classnames mapping where a key is a slot name and an array with CSS rules
  */
-export declare function resolveStyleRulesForSlots<Slots extends string | number, Tokens>(stylesBySlots: StylesBySlots<Slots, Tokens>, unstable_cssPriority: number): [CSSClassesMapBySlot<Slots>, CSSRulesByBucket];
+export declare function resolveStyleRulesForSlots<Slots extends string | number>(stylesBySlots: StylesBySlots<Slots>): [CSSClassesMapBySlot<Slots>, CSSRulesByBucket];

lib-commonjs/resolveStyleRulesForSlots.js

@@ -8,4 +8,2 @@ "use strict";
 
-const createCSSVariablesProxy_1 = /*#__PURE__*/require("./runtime/createCSSVariablesProxy");
-
 const resolveStyleRules_1 = /*#__PURE__*/require("./runtime/resolveStyleRules");
@@ -16,3 +14,2 @@ /**
  * @param stylesBySlots - An object with makeStyles rules where a key is a slot name
- * @param unstable_cssPriority - Defines priority for selectors of generated CSS rules
  *
@@ -23,4 +20,3 @@ * @return - A tuple with an object classnames mapping where a key is a slot name and an array with CSS rules
 
-function resolveStyleRulesForSlots(stylesBySlots, unstable_cssPriority) {
-  const tokensProxy = createCSSVariablesProxy_1.createCSSVariablesProxy();
+function resolveStyleRulesForSlots(stylesBySlots) {
   const classesMapBySlot = {};
@@ -30,4 +26,4 @@ const cssRules = {}; // eslint-disable-next-line guard-for-in
   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);
+    const slotStyles = stylesBySlots[slotName];
+    const [cssClassMap, cssRulesByBucket] = resolveStyleRules_1.resolveStyleRules(slotStyles);
     classesMapBySlot[slotName] = cssClassMap;
@@ -34,0 +30,0 @@ Object.keys(cssRulesByBucket).forEach(styleBucketName => {

lib-commonjs/runtime/compileCSS.d.ts

@@ -8,3 +8,2 @@ export interface CompileCSSOptions {
     value: number | string;
-    unstable_cssPriority: number;
     rtlClassName?: string;
@@ -11,0 +10,0 @@ rtlProperty?: string;

lib-commonjs/runtime/compileCSS.js

@@ -15,6 +15,2 @@ "use strict";
 const PSEUDO_SELECTOR_REGEX = /,( *[^ &])/g;
-
-function repeatSelector(selector, times) {
-  return new Array(times + 2).join(selector);
-}
 /**
@@ -30,3 +26,2 @@ * Normalizes pseudo selectors to always contain &, requires to work properly with comma-separated selectors.
 
-
 function normalizePseudoSelector(pseudoSelector) {
@@ -61,6 +56,5 @@ return '&' + normalizeNestedProperty_1.normalizeNestedProperty( // Regex there replaces a comma, spaces and an ampersand if it's present with comma and an ampersand.
     rtlValue,
-    value,
-    unstable_cssPriority
+    value
   } = options;
-  const classNameSelector = repeatSelector(`.${className}`, unstable_cssPriority);
+  const classNameSelector = `.${className}`;
   const cssDeclaration = `{ ${hyphenateProperty_1.hyphenateProperty(property)}: ${value}; }`;
@@ -71,3 +65,3 @@ let rtlClassNameSelector = null;
   if (rtlProperty && rtlClassName) {
-    rtlClassNameSelector = repeatSelector(`.${rtlClassName}`, unstable_cssPriority);
+    rtlClassNameSelector = `.${rtlClassName}`;
     rtlCSSDeclaration = `{ ${hyphenateProperty_1.hyphenateProperty(rtlProperty)}: ${rtlValue}; }`;
@@ -74,0 +68,0 @@ }

lib-commonjs/runtime/resolveStyleRules.d.ts

@@ -7,2 +7,2 @@ import { MakeStylesStyle, CSSClassesMap, CSSRulesByBucket } from '../types';
  */
-export declare function resolveStyleRules(styles: MakeStylesStyle, unstable_cssPriority?: number): [CSSClassesMap, CSSRulesByBucket];
+export declare function resolveStyleRules(styles: MakeStylesStyle, pseudo?: string, media?: string, support?: string, cssClassesMap?: CSSClassesMap, cssRulesByBucket?: CSSRulesByBucket, rtlValue?: string): [CSSClassesMap, CSSRulesByBucket];

lib-commonjs/runtime/resolveStyleRules.js

@@ -18,4 +18,2 @@ "use strict";
 
-const expandShorthand_1 = /*#__PURE__*/require("./expandShorthand");
-
 const generateCombinedMediaQuery_1 = /*#__PURE__*/require("./utils/generateCombinedMediaQuery");
@@ -37,4 +35,2 @@
 
-const createCSSVariablesProxy_1 = /*#__PURE__*/require("./createCSSVariablesProxy");
-
 const hashPropertyKey_1 = /*#__PURE__*/require("./utils/hashPropertyKey");
@@ -54,4 +50,10 @@
 }
+/**
+ * Transforms input styles to classes maps & CSS rules.
+ *
+ * @internal
+ */
 
-function resolveStyleRulesInner(styles, unstable_cssPriority = 0, pseudo = '', media = '', support = '', cssClassesMap = {}, cssRulesByBucket = {}, rtlValue) {
+
+function resolveStyleRules(styles, pseudo = '', media = '', support = '', cssClassesMap = {}, cssRulesByBucket = {}, rtlValue) {
   // eslint-disable-next-line guard-for-in
@@ -73,4 +75,3 @@ for (const property in styles) {
         pseudo,
-        property,
-        unstable_cssPriority
+        property
       });
@@ -87,4 +88,3 @@ const rtlDefinition = rtlValue && {
         media,
-        support,
-        unstable_cssPriority
+        support
       }) : undefined;
@@ -104,3 +104,2 @@ const rtlCompileOptions = flippedInRtl ? {
         value,
-        unstable_cssPriority,
         ...rtlCompileOptions
@@ -140,14 +139,14 @@ });
 
-      resolveStyleRulesInner({
+      resolveStyleRules({
         animationName: animationNames.join(', ')
-      }, unstable_cssPriority, pseudo, media, support, cssClassesMap, cssRulesByBucket, rtlAnimationNames.join(', '));
+      }, pseudo, media, support, cssClassesMap, cssRulesByBucket, rtlAnimationNames.join(', '));
     } else if (isObject_1.isObject(value)) {
       if (isNestedSelector_1.isNestedSelector(property)) {
-        resolveStyleRulesInner(value, unstable_cssPriority, pseudo + normalizeNestedProperty_1.normalizeNestedProperty(property), media, support, cssClassesMap, cssRulesByBucket);
+        resolveStyleRules(value, pseudo + normalizeNestedProperty_1.normalizeNestedProperty(property), media, support, cssClassesMap, cssRulesByBucket);
       } else if (isMediaQuerySelector_1.isMediaQuerySelector(property)) {
         const combinedMediaQuery = generateCombinedMediaQuery_1.generateCombinedQuery(media, property.slice(6).trim());
-        resolveStyleRulesInner(value, unstable_cssPriority, pseudo, combinedMediaQuery, support, cssClassesMap, cssRulesByBucket);
+        resolveStyleRules(value, pseudo, combinedMediaQuery, support, cssClassesMap, cssRulesByBucket);
       } else if (isSupportQuerySelector_1.isSupportQuerySelector(property)) {
         const combinedSupportQuery = generateCombinedMediaQuery_1.generateCombinedQuery(support, property.slice(9).trim());
-        resolveStyleRulesInner(value, unstable_cssPriority, pseudo, media, combinedSupportQuery, cssClassesMap, cssRulesByBucket);
+        resolveStyleRules(value, pseudo, media, combinedSupportQuery, cssClassesMap, cssRulesByBucket);
       } else {
@@ -164,16 +163,4 @@ if (process.env.NODE_ENV !== 'production') {
 }
-/**
- * Transforms input styles to classes maps & CSS rules.
- *
- * @internal
- */
 
-
-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);
-}
-
 exports.resolveStyleRules = resolveStyleRules;
 //# sourceMappingURL=resolveStyleRules.js.map

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

@@ -7,4 +7,3 @@ export interface HashedClassNameParts {
     support: string;
-    unstable_cssPriority: number;
 }
-export declare function hashClassName({ media, property, pseudo, support, value, unstable_cssPriority, }: HashedClassNameParts): string;
+export declare function hashClassName({ media, property, pseudo, support, value }: HashedClassNameParts): string;

lib-commonjs/runtime/utils/hashClassName.js

@@ -17,8 +17,7 @@ "use strict";
   support,
-  value,
-  unstable_cssPriority
+  value
 }) {
   // 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);
+  return constants_1.HASH_PREFIX + classNameHash;
 }
@@ -25,0 +24,0 @@

lib-commonjs/shorthands/border.d.ts

 import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype';
 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
-export declare function border(width: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
-export declare function border(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): MakeStylesStrictCSSObject;
-export declare function border(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): MakeStylesStrictCSSObject;
+declare type BorderStyle = Pick<MakeStylesStrictCSSObject, 'borderTopColor' | 'borderTopStyle' | 'borderTopWidth' | 'borderRightColor' | 'borderRightStyle' | 'borderRightWidth' | 'borderBottomColor' | 'borderBottomStyle' | 'borderBottomWidth' | 'borderLeftColor' | 'borderLeftStyle' | 'borderLeftWidth'>;
+export declare function border(width: BorderWidthProperty<MakeStylesCSSValue>): BorderStyle;
+export declare function border(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): BorderStyle;
+export declare function border(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): BorderStyle;
+export {};

lib-commonjs/shorthands/borderBottom.d.ts

 import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype';
 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
-export declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
-export declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): MakeStylesStrictCSSObject;
-export declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): MakeStylesStrictCSSObject;
+declare type BorderBottomStyle = Pick<MakeStylesStrictCSSObject, 'borderBottomWidth' | 'borderBottomStyle' | 'borderBottomColor'>;
+export declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>): BorderBottomStyle;
+export declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): BorderBottomStyle;
+export declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): BorderBottomStyle;
+export {};

lib-commonjs/shorthands/borderColor.d.ts

 import type { BorderColorProperty } from 'csstype';
 import type { MakeStylesStrictCSSObject } from '../types';
-export declare function borderColor(all: BorderColorProperty): MakeStylesStrictCSSObject;
-export declare function borderColor(vertical: BorderColorProperty, horizontal: BorderColorProperty): MakeStylesStrictCSSObject;
-export declare function borderColor(top: BorderColorProperty, horizontal: BorderColorProperty, bottom: BorderColorProperty): MakeStylesStrictCSSObject;
-export declare function borderColor(top: BorderColorProperty, right: BorderColorProperty, bottom: BorderColorProperty, left: BorderColorProperty): MakeStylesStrictCSSObject;
+declare type BorderColorStyle = Pick<MakeStylesStrictCSSObject, 'borderTopColor' | 'borderRightColor' | 'borderBottomColor' | 'borderLeftColor'>;
+export declare function borderColor(all: BorderColorProperty): BorderColorStyle;
+export declare function borderColor(vertical: BorderColorProperty, horizontal: BorderColorProperty): BorderColorStyle;
+export declare function borderColor(top: BorderColorProperty, horizontal: BorderColorProperty, bottom: BorderColorProperty): BorderColorStyle;
+export declare function borderColor(top: BorderColorProperty, right: BorderColorProperty, bottom: BorderColorProperty, left: BorderColorProperty): BorderColorStyle;
+export {};

lib-commonjs/shorthands/borderLeft.d.ts

 import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype';
 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
-export declare function borderLeft(width: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
-export declare function borderLeft(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): MakeStylesStrictCSSObject;
-export declare function borderLeft(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): MakeStylesStrictCSSObject;
+declare type BorderLeftStyle = Pick<MakeStylesStrictCSSObject, 'borderLeftColor' | 'borderLeftStyle' | 'borderLeftWidth'>;
+export declare function borderLeft(width: BorderWidthProperty<MakeStylesCSSValue>): BorderLeftStyle;
+export declare function borderLeft(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): BorderLeftStyle;
+export declare function borderLeft(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): BorderLeftStyle;
+export {};

lib-commonjs/shorthands/borderRadius.d.ts

 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
+declare type BorderRadiusStyle = Pick<MakeStylesStrictCSSObject, 'borderBottomRightRadius' | 'borderBottomLeftRadius' | 'borderTopRightRadius' | 'borderTopLeftRadius'>;
 /**
@@ -14,2 +15,3 @@ * A function that implements CSS spec conformant expansion for "borderRadius". "/" is not supported, please use CSS
  */
-export declare function borderRadius(value1: MakeStylesCSSValue, value2?: MakeStylesCSSValue, value3?: MakeStylesCSSValue, value4?: MakeStylesCSSValue): MakeStylesStrictCSSObject;
+export declare function borderRadius(value1: MakeStylesCSSValue, value2?: MakeStylesCSSValue, value3?: MakeStylesCSSValue, value4?: MakeStylesCSSValue): BorderRadiusStyle;
+export {};

lib-commonjs/shorthands/borderRight.d.ts

 import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype';
 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
-export declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
-export declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): MakeStylesStrictCSSObject;
-export declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): MakeStylesStrictCSSObject;
+declare type BorderRightStyle = Pick<MakeStylesStrictCSSObject, 'borderRightWidth' | 'borderRightStyle' | 'borderRightColor'>;
+export declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>): BorderRightStyle;
+export declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): BorderRightStyle;
+export declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): BorderRightStyle;
+export {};

lib-commonjs/shorthands/borderStyle.d.ts

 import type { BorderStyleProperty } from 'csstype';
 import type { MakeStylesStrictCSSObject } from '../types';
-export declare function borderStyle(all: BorderStyleProperty): MakeStylesStrictCSSObject;
-export declare function borderStyle(vertical: BorderStyleProperty, horizontal: BorderStyleProperty): MakeStylesStrictCSSObject;
-export declare function borderStyle(top: BorderStyleProperty, horizontal: BorderStyleProperty, bottom: BorderStyleProperty): MakeStylesStrictCSSObject;
-export declare function borderStyle(top: BorderStyleProperty, right: BorderStyleProperty, bottom: BorderStyleProperty, left: BorderStyleProperty): MakeStylesStrictCSSObject;
+declare type BorderStyleStyle = Pick<MakeStylesStrictCSSObject, 'borderTopStyle' | 'borderRightStyle' | 'borderBottomStyle' | 'borderLeftStyle'>;
+export declare function borderStyle(all: BorderStyleProperty): BorderStyleStyle;
+export declare function borderStyle(vertical: BorderStyleProperty, horizontal: BorderStyleProperty): BorderStyleStyle;
+export declare function borderStyle(top: BorderStyleProperty, horizontal: BorderStyleProperty, bottom: BorderStyleProperty): BorderStyleStyle;
+export declare function borderStyle(top: BorderStyleProperty, right: BorderStyleProperty, bottom: BorderStyleProperty, left: BorderStyleProperty): BorderStyleStyle;
+export {};

lib-commonjs/shorthands/borderTop.d.ts

 import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype';
 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
-export declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
-export declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): MakeStylesStrictCSSObject;
-export declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): MakeStylesStrictCSSObject;
+declare type BorderTopStyle = Pick<MakeStylesStrictCSSObject, 'borderTopWidth' | 'borderTopStyle' | 'borderTopColor'>;
+export declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>): BorderTopStyle;
+export declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): BorderTopStyle;
+export declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): BorderTopStyle;
+export {};

lib-commonjs/shorthands/borderWidth.d.ts

 import type { BorderWidthProperty } from 'csstype';
 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
-export declare function borderWidth(all: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
-export declare function borderWidth(vertical: BorderWidthProperty<MakeStylesCSSValue>, horizontal: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
-export declare function borderWidth(top: BorderWidthProperty<MakeStylesCSSValue>, horizontal: BorderWidthProperty<MakeStylesCSSValue>, bottom: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
-export declare function borderWidth(top: BorderWidthProperty<MakeStylesCSSValue>, right: BorderWidthProperty<MakeStylesCSSValue>, bottom: BorderWidthProperty<MakeStylesCSSValue>, left: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
+declare type BorderWidthStyle = Pick<MakeStylesStrictCSSObject, 'borderTopStyle' | 'borderRightStyle' | 'borderBottomStyle' | 'borderLeftStyle'>;
+export declare function borderWidth(all: BorderWidthProperty<MakeStylesCSSValue>): BorderWidthStyle;
+export declare function borderWidth(vertical: BorderWidthProperty<MakeStylesCSSValue>, horizontal: BorderWidthProperty<MakeStylesCSSValue>): BorderWidthStyle;
+export declare function borderWidth(top: BorderWidthProperty<MakeStylesCSSValue>, horizontal: BorderWidthProperty<MakeStylesCSSValue>, bottom: BorderWidthProperty<MakeStylesCSSValue>): BorderWidthStyle;
+export declare function borderWidth(top: BorderWidthProperty<MakeStylesCSSValue>, right: BorderWidthProperty<MakeStylesCSSValue>, bottom: BorderWidthProperty<MakeStylesCSSValue>, left: BorderWidthProperty<MakeStylesCSSValue>): BorderWidthStyle;
+export {};

lib-commonjs/shorthands/gap.d.ts

 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
+declare type GapStyle = Pick<MakeStylesStrictCSSObject, 'columnGap' | 'rowGap'>;
 /**
@@ -11,2 +12,3 @@ * A function that implements CSS spec conformant expansion for "gap"
  */
-export declare function gap(columnGap: MakeStylesCSSValue, rowGap?: MakeStylesCSSValue): MakeStylesStrictCSSObject;
+export declare function gap(columnGap: MakeStylesCSSValue, rowGap?: MakeStylesCSSValue): GapStyle;
+export {};

lib-commonjs/shorthands/margin.d.ts

 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
-export declare function margin(all: MakeStylesCSSValue): MakeStylesStrictCSSObject;
-export declare function margin(vertical: MakeStylesCSSValue, horizontal: MakeStylesCSSValue): MakeStylesStrictCSSObject;
-export declare function margin(top: MakeStylesCSSValue, horizontal: MakeStylesCSSValue, bottom: MakeStylesCSSValue): MakeStylesStrictCSSObject;
-export declare function margin(top: MakeStylesCSSValue, right: MakeStylesCSSValue, bottom: MakeStylesCSSValue, left: MakeStylesCSSValue): MakeStylesStrictCSSObject;
+declare type MarginStyle = Pick<MakeStylesStrictCSSObject, 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft'>;
+export declare function margin(all: MakeStylesCSSValue): MarginStyle;
+export declare function margin(vertical: MakeStylesCSSValue, horizontal: MakeStylesCSSValue): MarginStyle;
+export declare function margin(top: MakeStylesCSSValue, horizontal: MakeStylesCSSValue, bottom: MakeStylesCSSValue): MarginStyle;
+export declare function margin(top: MakeStylesCSSValue, right: MakeStylesCSSValue, bottom: MakeStylesCSSValue, left: MakeStylesCSSValue): MarginStyle;
+export {};

lib-commonjs/shorthands/overflow.d.ts

 import type { OverflowProperty } from 'csstype';
 import type { MakeStylesStrictCSSObject } from '../types';
+declare type OverflowStyle = Pick<MakeStylesStrictCSSObject, 'overflowX' | 'overflowY'>;
 /**
@@ -12,2 +13,3 @@ * A function that implements CSS spec conformant expansion for "overflow"
  */
-export declare function overflow(overflowX: OverflowProperty, overflowY?: OverflowProperty): MakeStylesStrictCSSObject;
+export declare function overflow(overflowX: OverflowProperty, overflowY?: OverflowProperty): OverflowStyle;
+export {};

lib-commonjs/shorthands/padding.d.ts

 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
-export declare function padding(all: MakeStylesCSSValue): MakeStylesStrictCSSObject;
-export declare function padding(vertical: MakeStylesCSSValue, horizontal: MakeStylesCSSValue): MakeStylesStrictCSSObject;
-export declare function padding(top: MakeStylesCSSValue, horizontal: MakeStylesCSSValue, bottom: MakeStylesCSSValue): MakeStylesStrictCSSObject;
-export declare function padding(top: MakeStylesCSSValue, right: MakeStylesCSSValue, bottom: MakeStylesCSSValue, left: MakeStylesCSSValue): MakeStylesStrictCSSObject;
+declare type PaddingStyle = Pick<MakeStylesStrictCSSObject, 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft'>;
+export declare function padding(all: MakeStylesCSSValue): PaddingStyle;
+export declare function padding(vertical: MakeStylesCSSValue, horizontal: MakeStylesCSSValue): PaddingStyle;
+export declare function padding(top: MakeStylesCSSValue, horizontal: MakeStylesCSSValue, bottom: MakeStylesCSSValue): PaddingStyle;
+export declare function padding(top: MakeStylesCSSValue, right: MakeStylesCSSValue, bottom: MakeStylesCSSValue, left: MakeStylesCSSValue): PaddingStyle;
+export {};

lib-commonjs/types.d.ts

 import * as CSS from 'csstype';
 export declare type MakeStylesCSSValue = string | 0;
-declare type MakeStylesCSSProperties = Omit<CSS.Properties<MakeStylesCSSValue>, 'animationName'>;
+declare type MakeStylesUnsupportedCSSProperties = {
+    animation?: never;
+    background?: never;
+    border?: never;
+    borderBlock?: never;
+    borderBlockEnd?: never;
+    borderBlockStart?: never;
+    borderBottom?: never;
+    borderColor?: never;
+    borderImage?: never;
+    borderInline?: never;
+    borderInlineEnd?: never;
+    borderInlineStart?: never;
+    borderLeft?: never;
+    borderRadius?: never;
+    borderRight?: never;
+    borderStyle?: never;
+    borderTop?: never;
+    borderWidth?: never;
+    columnRule?: never;
+    flex?: never;
+    flexFlow?: never;
+    font?: never;
+    gap?: never;
+    grid?: never;
+    gridArea?: never;
+    gridColumn?: never;
+    gridGap?: never;
+    gridRow?: never;
+    gridTemplate?: never;
+    listStyle?: never;
+    margin?: never;
+    mask?: never;
+    maskBorder?: never;
+    offset?: never;
+    outline?: never;
+    overflow?: never;
+    padding?: never;
+    placeItems?: never;
+    placeSelf?: never;
+    textDecoration?: never;
+    textEmphasis?: never;
+    transition?: never;
+};
+declare type MakeStylesCSSProperties = Omit<CSS.Properties<MakeStylesCSSValue>, 'animationName' | 'fontWeight'> & MakeStylesUnsupportedCSSProperties;
 export declare type MakeStylesStrictCSSObject = MakeStylesCSSProperties & MakeStylesCSSPseudos & {
     animationName?: MakeStylesAnimation | MakeStylesAnimation[] | CSS.AnimationProperty;
+    fontWeight?: CSS.Properties['fontWeight'] | string;
 };
-declare type MakeStylesCSSObjectCustom = {
-    [Property: string]: MakeStylesStyle | string | 0;
-};
 declare type MakeStylesCSSPseudos = {
-    [Property in CSS.Pseudos]?: MakeStylesStrictCSSObject & {
+    [Property in CSS.Pseudos]?: (MakeStylesStrictCSSObject & {
         content?: string;
-    };
+    }) | (MakeStylesCSSObjectCustomL1 & {
+        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>;
+declare type MakeStylesCSSObjectCustomL1 = {
+    [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL2;
+} & MakeStylesStrictCSSObject;
+declare type MakeStylesCSSObjectCustomL2 = {
+    [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL3;
+} & MakeStylesStrictCSSObject;
+declare type MakeStylesCSSObjectCustomL3 = {
+    [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL4;
+} & MakeStylesStrictCSSObject;
+declare type MakeStylesCSSObjectCustomL4 = {
+    [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL5;
+} & MakeStylesStrictCSSObject;
+declare type MakeStylesCSSObjectCustomL5 = {
+    [Property: string]: MakeStylesCSSValue | undefined;
+} & MakeStylesStrictCSSObject;
+export declare type MakeStylesAnimation = Record<'from' | 'to' | string, MakeStylesCSSObjectCustomL1>;
+export declare type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustomL1;
 export interface MakeStylesOptions {
@@ -67,4 +124,4 @@ dir: 'ltr' | 'rtl';
 export declare type CSSRulesByBucket = Partial<Record<StyleBucketName, string[]>>;
-export declare type StylesBySlots<Slots extends string | number, Tokens> = Record<Slots, MakeStylesStyleRule<Tokens>>;
+export declare type StylesBySlots<Slots extends string | number> = Record<Slots, MakeStylesStyle>;
 export declare type LookupItem = [/* definitions */ CSSClassesMap, /* dir */ /* dir */ 'rtl' | 'ltr'];
 export {};

lib/index.d.ts

@@ -18,2 +18,3 @@ import { border, borderLeft, borderBottom, borderRight, borderTop, borderColor, borderStyle, borderRadius, borderWidth, gap, margin, padding, overflow } from './shorthands/index';
 export { createDOMRenderer } from './renderer/createDOMRenderer';
+export type { CreateDOMRendererOptions } from './renderer/createDOMRenderer';
 export { styleBucketOrdering } from './renderer/getStyleSheetForBucket';
@@ -25,6 +26,5 @@ export { rehydrateRendererCache } from './renderer/rehydrateRendererCache';
 export { resolveStyleRulesForSlots } from './resolveStyleRulesForSlots';
-export { createCSSVariablesProxy, resolveProxyValues } from './runtime/createCSSVariablesProxy';
 export { resolveStyleRules } from './runtime/resolveStyleRules';
 export { __styles } from './__styles';
 export * from './constants';
-export type { MakeStaticStylesStyle, MakeStaticStyles, MakeStylesAnimation, MakeStylesStyle, MakeStylesStyleRule, MakeStylesStyleFunctionRule, CSSClasses, CSSClassesMapBySlot, CSSRulesByBucket, StyleBucketName, MakeStaticStylesOptions, MakeStylesOptions, MakeStylesRenderer, } from './types';
+export type { MakeStaticStylesStyle, MakeStaticStyles, MakeStylesAnimation, MakeStylesStyle, CSSClasses, CSSClassesMapBySlot, CSSRulesByBucket, StyleBucketName, MakeStaticStylesOptions, MakeStylesOptions, MakeStylesRenderer, } from './types';

lib/index.js

@@ -27,3 +27,2 @@ // This should be just "export * as shorthands from "
 
-export { createCSSVariablesProxy, resolveProxyValues } from './runtime/createCSSVariablesProxy';
 export { resolveStyleRules } from './runtime/resolveStyleRules';
@@ -30,0 +29,0 @@ export { __styles } from './__styles';

lib/makeStyles.d.ts

 import { MakeStylesOptions, StylesBySlots } from './types';
-export declare function makeStyles<Slots extends string | number, Tokens>(stylesBySlots: StylesBySlots<Slots, Tokens>, unstable_cssPriority?: number): (options: MakeStylesOptions) => Record<Slots, string>;
+export declare function makeStyles<Slots extends string | number>(stylesBySlots: StylesBySlots<Slots>): (options: MakeStylesOptions) => Record<Slots, string>;

lib/makeStyles.js

 import { reduceToClassNameForSlots } from './runtime/reduceToClassNameForSlots';
 import { resolveStyleRulesForSlots } from './resolveStyleRulesForSlots';
-export function makeStyles(stylesBySlots, unstable_cssPriority = 0) {
+export function makeStyles(stylesBySlots) {
   const insertionCache = {};
@@ -17,3 +17,3 @@ let classesMapBySlot = null;
     if (classesMapBySlot === null) {
-      [classesMapBySlot, cssRules] = resolveStyleRulesForSlots(stylesBySlots, unstable_cssPriority);
+      [classesMapBySlot, cssRules] = resolveStyleRulesForSlots(stylesBySlots);
     }
@@ -20,0 +20,0 @@

lib/mergeClasses.js

@@ -10,2 +10,4 @@ import { DEFINITION_LOOKUP_TABLE, LOOKUP_DEFINITIONS_INDEX, LOOKUP_DIR_INDEX, SEQUENCE_HASH_LENGTH, SEQUENCE_PREFIX } from './constants';
   // @see https://babeljs.io/docs/en/babel-plugin-transform-parameters
+
+  /* eslint-disable prefer-rest-params */
   let dir = null;
@@ -15,6 +17,5 @@ let resultClassName = ''; // Is used as a cache key to avoid object merging
   let sequenceMatch = '';
-  const sequenceMappings = [];
+  const sequencesIds = new Array(arguments.length);
 
   for (let i = 0; i < arguments.length; i++) {
-    // eslint-disable-next-line prefer-rest-params
     const className = arguments[i];
@@ -30,4 +31,3 @@
       } else {
-        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"
+        const sequenceId = className.substr(sequenceIndex, SEQUENCE_SIZE); // Handles a case with mixed classnames, i.e. "ui-button ATOMIC_CLASSES"
 
@@ -38,20 +38,4 @@ if (sequenceIndex > 0) {
 
-        if (sequenceMapping) {
-          sequenceMatch += sequenceId;
-          sequenceMappings.push(sequenceMapping[LOOKUP_DEFINITIONS_INDEX]);
-
-          if (process.env.NODE_ENV !== 'production') {
-            if (dir !== null && dir !== sequenceMapping[LOOKUP_DIR_INDEX]) {
-              // 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}`);
-            }
-          }
-
-          dir = sequenceMapping[LOOKUP_DIR_INDEX];
-        } else {
-          if (process.env.NODE_ENV !== 'production') {
-            // 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}`);
-          }
-        }
+        sequenceMatch += sequenceId;
+        sequencesIds[i] = sequenceId;
       }
@@ -80,2 +64,27 @@
     return resultClassName + mergeClassesResult;
+  }
+
+  const sequenceMappings = [];
+
+  for (let i = 0; i < arguments.length; i++) {
+    const sequenceId = sequencesIds[i];
+    const sequenceMapping = sequenceId ? DEFINITION_LOOKUP_TABLE[sequenceId] : undefined;
+
+    if (sequenceMapping) {
+      sequenceMappings.push(sequenceMapping[LOOKUP_DEFINITIONS_INDEX]);
+
+      if (process.env.NODE_ENV !== 'production') {
+        if (dir !== null && dir !== sequenceMapping[LOOKUP_DIR_INDEX]) {
+          // 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: ${arguments[i]}`);
+        }
+      }
+
+      dir = sequenceMapping[LOOKUP_DIR_INDEX];
+    } else {
+      if (process.env.NODE_ENV !== 'production') {
+        // 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: ${arguments[i]}`);
+      }
+    }
   } // eslint-disable-next-line prefer-spread
@@ -82,0 +91,0 @@

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

@@ -9,3 +9,6 @@ import { getStyleSheetForBucket } from './getStyleSheetForBucket';
 
-export function createDOMRenderer(target = typeof document === 'undefined' ? undefined : document) {
+export function createDOMRenderer(target = typeof document === 'undefined' ? undefined : document, options = {}) {
+  const {
+    unstable_filterCSSRule
+  } = options;
   const renderer = {
@@ -33,3 +36,9 @@ insertionCache: {},
             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) {
@@ -36,0 +45,0 @@ // We've disabled these warnings due to false-positive errors with browser prefixes

lib/resolveStyleRulesForSlots.d.ts

@@ -6,6 +6,5 @@ import { CSSClassesMapBySlot, CSSRulesByBucket, StylesBySlots } from './types';
  * @param stylesBySlots - An object with makeStyles rules where a key is a slot name
- * @param unstable_cssPriority - Defines priority for selectors of generated CSS rules
  *
  * @return - A tuple with an object classnames mapping where a key is a slot name and an array with CSS rules
  */
-export declare function resolveStyleRulesForSlots<Slots extends string | number, Tokens>(stylesBySlots: StylesBySlots<Slots, Tokens>, unstable_cssPriority: number): [CSSClassesMapBySlot<Slots>, CSSRulesByBucket];
+export declare function resolveStyleRulesForSlots<Slots extends string | number>(stylesBySlots: StylesBySlots<Slots>): [CSSClassesMapBySlot<Slots>, CSSRulesByBucket];

lib/resolveStyleRulesForSlots.js

@@ -1,2 +0,1 @@
-import { createCSSVariablesProxy } from './runtime/createCSSVariablesProxy';
 import { resolveStyleRules } from './runtime/resolveStyleRules';
@@ -7,3 +6,2 @@ /**
  * @param stylesBySlots - An object with makeStyles rules where a key is a slot name
- * @param unstable_cssPriority - Defines priority for selectors of generated CSS rules
  *
@@ -13,4 +11,3 @@ * @return - A tuple with an object classnames mapping where a key is a slot name and an array with CSS rules
 
-export function resolveStyleRulesForSlots(stylesBySlots, unstable_cssPriority) {
-  const tokensProxy = createCSSVariablesProxy();
+export function resolveStyleRulesForSlots(stylesBySlots) {
   const classesMapBySlot = {};
@@ -20,4 +17,4 @@ const cssRules = {}; // eslint-disable-next-line guard-for-in
   for (const slotName in stylesBySlots) {
-    const slotStyles = typeof stylesBySlots[slotName] === 'function' ? stylesBySlots[slotName](tokensProxy) : stylesBySlots[slotName];
-    const [cssClassMap, cssRulesByBucket] = resolveStyleRules(slotStyles, unstable_cssPriority);
+    const slotStyles = stylesBySlots[slotName];
+    const [cssClassMap, cssRulesByBucket] = resolveStyleRules(slotStyles);
     classesMapBySlot[slotName] = cssClassMap;
@@ -24,0 +21,0 @@ Object.keys(cssRulesByBucket).forEach(styleBucketName => {

lib/runtime/compileCSS.d.ts

@@ -8,3 +8,2 @@ export interface CompileCSSOptions {
     value: number | string;
-    unstable_cssPriority: number;
     rtlClassName?: string;
@@ -11,0 +10,0 @@ rtlProperty?: string;

lib/runtime/compileCSS.js

@@ -5,6 +5,2 @@ import { compile, middleware, prefixer, rulesheet, serialize, stringify } from 'stylis';
 const PSEUDO_SELECTOR_REGEX = /,( *[^ &])/g;
-
-function repeatSelector(selector, times) {
-  return new Array(times + 2).join(selector);
-}
 /**
@@ -20,3 +16,2 @@ * Normalizes pseudo selectors to always contain &, requires to work properly with comma-separated selectors.
 
-
 export function normalizePseudoSelector(pseudoSelector) {
@@ -45,6 +40,5 @@ return '&' + normalizeNestedProperty( // Regex there replaces a comma, spaces and an ampersand if it's present with comma and an ampersand.
     rtlValue,
-    value,
-    unstable_cssPriority
+    value
   } = options;
-  const classNameSelector = repeatSelector(`.${className}`, unstable_cssPriority);
+  const classNameSelector = `.${className}`;
   const cssDeclaration = `{ ${hyphenateProperty(property)}: ${value}; }`;
@@ -55,3 +49,3 @@ let rtlClassNameSelector = null;
   if (rtlProperty && rtlClassName) {
-    rtlClassNameSelector = repeatSelector(`.${rtlClassName}`, unstable_cssPriority);
+    rtlClassNameSelector = `.${rtlClassName}`;
     rtlCSSDeclaration = `{ ${hyphenateProperty(rtlProperty)}: ${rtlValue}; }`;
@@ -58,0 +52,0 @@ }

lib/runtime/resolveStyleRules.d.ts

@@ -7,2 +7,2 @@ import { MakeStylesStyle, CSSClassesMap, CSSRulesByBucket } from '../types';
  */
-export declare function resolveStyleRules(styles: MakeStylesStyle, unstable_cssPriority?: number): [CSSClassesMap, CSSRulesByBucket];
+export declare function resolveStyleRules(styles: MakeStylesStyle, pseudo?: string, media?: string, support?: string, cssClassesMap?: CSSClassesMap, cssRulesByBucket?: CSSRulesByBucket, rtlValue?: string): [CSSClassesMap, CSSRulesByBucket];

lib/runtime/resolveStyleRules.js

@@ -6,3 +6,2 @@ import hashString from '@emotion/hash';
 import { compileKeyframeRule, compileKeyframesCSS } from './compileKeyframeCSS';
-import { expandShorthand } from './expandShorthand';
 import { generateCombinedQuery } from './utils/generateCombinedMediaQuery';
@@ -16,3 +15,2 @@ import { isMediaQuerySelector } from './utils/isMediaQuerySelector';
 import { hashClassName } from './utils/hashClassName';
-import { resolveProxyValues } from './createCSSVariablesProxy';
 import { hashPropertyKey } from './utils/hashPropertyKey';
@@ -32,4 +30,10 @@
 }
+/**
+ * Transforms input styles to classes maps & CSS rules.
+ *
+ * @internal
+ */
 
-function resolveStyleRulesInner(styles, unstable_cssPriority = 0, pseudo = '', media = '', support = '', cssClassesMap = {}, cssRulesByBucket = {}, rtlValue) {
+
+export function resolveStyleRules(styles, pseudo = '', media = '', support = '', cssClassesMap = {}, cssRulesByBucket = {}, rtlValue) {
   // eslint-disable-next-line guard-for-in
@@ -51,4 +55,3 @@ for (const property in styles) {
         pseudo,
-        property,
-        unstable_cssPriority
+        property
       });
@@ -65,4 +68,3 @@ const rtlDefinition = rtlValue && {
         media,
-        support,
-        unstable_cssPriority
+        support
       }) : undefined;
@@ -82,3 +84,2 @@ const rtlCompileOptions = flippedInRtl ? {
         value,
-        unstable_cssPriority,
         ...rtlCompileOptions
@@ -118,14 +119,14 @@ });
 
-      resolveStyleRulesInner({
+      resolveStyleRules({
         animationName: animationNames.join(', ')
-      }, unstable_cssPriority, pseudo, media, support, cssClassesMap, cssRulesByBucket, rtlAnimationNames.join(', '));
+      }, pseudo, media, support, cssClassesMap, cssRulesByBucket, rtlAnimationNames.join(', '));
     } else if (isObject(value)) {
       if (isNestedSelector(property)) {
-        resolveStyleRulesInner(value, unstable_cssPriority, pseudo + normalizeNestedProperty(property), media, support, cssClassesMap, cssRulesByBucket);
+        resolveStyleRules(value, pseudo + normalizeNestedProperty(property), media, support, cssClassesMap, cssRulesByBucket);
       } else if (isMediaQuerySelector(property)) {
         const combinedMediaQuery = generateCombinedQuery(media, property.slice(6).trim());
-        resolveStyleRulesInner(value, unstable_cssPriority, pseudo, combinedMediaQuery, support, cssClassesMap, cssRulesByBucket);
+        resolveStyleRules(value, pseudo, combinedMediaQuery, support, cssClassesMap, cssRulesByBucket);
       } else if (isSupportQuerySelector(property)) {
         const combinedSupportQuery = generateCombinedQuery(support, property.slice(9).trim());
-        resolveStyleRulesInner(value, unstable_cssPriority, pseudo, media, combinedSupportQuery, cssClassesMap, cssRulesByBucket);
+        resolveStyleRules(value, pseudo, media, combinedSupportQuery, cssClassesMap, cssRulesByBucket);
       } else {
@@ -142,14 +143,2 @@ if (process.env.NODE_ENV !== 'production') {
 }
-/**
- * Transforms input styles to classes maps & CSS rules.
- *
- * @internal
- */
-
-
-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/hashClassName.d.ts

@@ -7,4 +7,3 @@ export interface HashedClassNameParts {
     support: string;
-    unstable_cssPriority: number;
 }
-export declare function hashClassName({ media, property, pseudo, support, value, unstable_cssPriority, }: HashedClassNameParts): string;
+export declare function hashClassName({ media, property, pseudo, support, value }: HashedClassNameParts): string;

lib/runtime/utils/hashClassName.js

@@ -8,9 +8,8 @@ import hashString from '@emotion/hash';
   support,
-  value,
-  unstable_cssPriority
+  value
 }) {
   // 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);
+  return HASH_PREFIX + classNameHash;
 }
 //# sourceMappingURL=hashClassName.js.map

lib/shorthands/border.d.ts

 import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype';
 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
-export declare function border(width: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
-export declare function border(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): MakeStylesStrictCSSObject;
-export declare function border(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): MakeStylesStrictCSSObject;
+declare type BorderStyle = Pick<MakeStylesStrictCSSObject, 'borderTopColor' | 'borderTopStyle' | 'borderTopWidth' | 'borderRightColor' | 'borderRightStyle' | 'borderRightWidth' | 'borderBottomColor' | 'borderBottomStyle' | 'borderBottomWidth' | 'borderLeftColor' | 'borderLeftStyle' | 'borderLeftWidth'>;
+export declare function border(width: BorderWidthProperty<MakeStylesCSSValue>): BorderStyle;
+export declare function border(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): BorderStyle;
+export declare function border(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): BorderStyle;
+export {};

lib/shorthands/borderBottom.d.ts

 import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype';
 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
-export declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
-export declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): MakeStylesStrictCSSObject;
-export declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): MakeStylesStrictCSSObject;
+declare type BorderBottomStyle = Pick<MakeStylesStrictCSSObject, 'borderBottomWidth' | 'borderBottomStyle' | 'borderBottomColor'>;
+export declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>): BorderBottomStyle;
+export declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): BorderBottomStyle;
+export declare function borderBottom(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): BorderBottomStyle;
+export {};

lib/shorthands/borderColor.d.ts

 import type { BorderColorProperty } from 'csstype';
 import type { MakeStylesStrictCSSObject } from '../types';
-export declare function borderColor(all: BorderColorProperty): MakeStylesStrictCSSObject;
-export declare function borderColor(vertical: BorderColorProperty, horizontal: BorderColorProperty): MakeStylesStrictCSSObject;
-export declare function borderColor(top: BorderColorProperty, horizontal: BorderColorProperty, bottom: BorderColorProperty): MakeStylesStrictCSSObject;
-export declare function borderColor(top: BorderColorProperty, right: BorderColorProperty, bottom: BorderColorProperty, left: BorderColorProperty): MakeStylesStrictCSSObject;
+declare type BorderColorStyle = Pick<MakeStylesStrictCSSObject, 'borderTopColor' | 'borderRightColor' | 'borderBottomColor' | 'borderLeftColor'>;
+export declare function borderColor(all: BorderColorProperty): BorderColorStyle;
+export declare function borderColor(vertical: BorderColorProperty, horizontal: BorderColorProperty): BorderColorStyle;
+export declare function borderColor(top: BorderColorProperty, horizontal: BorderColorProperty, bottom: BorderColorProperty): BorderColorStyle;
+export declare function borderColor(top: BorderColorProperty, right: BorderColorProperty, bottom: BorderColorProperty, left: BorderColorProperty): BorderColorStyle;
+export {};

lib/shorthands/borderLeft.d.ts

 import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype';
 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
-export declare function borderLeft(width: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
-export declare function borderLeft(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): MakeStylesStrictCSSObject;
-export declare function borderLeft(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): MakeStylesStrictCSSObject;
+declare type BorderLeftStyle = Pick<MakeStylesStrictCSSObject, 'borderLeftColor' | 'borderLeftStyle' | 'borderLeftWidth'>;
+export declare function borderLeft(width: BorderWidthProperty<MakeStylesCSSValue>): BorderLeftStyle;
+export declare function borderLeft(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): BorderLeftStyle;
+export declare function borderLeft(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): BorderLeftStyle;
+export {};

lib/shorthands/borderRadius.d.ts

 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
+declare type BorderRadiusStyle = Pick<MakeStylesStrictCSSObject, 'borderBottomRightRadius' | 'borderBottomLeftRadius' | 'borderTopRightRadius' | 'borderTopLeftRadius'>;
 /**
@@ -14,2 +15,3 @@ * A function that implements CSS spec conformant expansion for "borderRadius". "/" is not supported, please use CSS
  */
-export declare function borderRadius(value1: MakeStylesCSSValue, value2?: MakeStylesCSSValue, value3?: MakeStylesCSSValue, value4?: MakeStylesCSSValue): MakeStylesStrictCSSObject;
+export declare function borderRadius(value1: MakeStylesCSSValue, value2?: MakeStylesCSSValue, value3?: MakeStylesCSSValue, value4?: MakeStylesCSSValue): BorderRadiusStyle;
+export {};

lib/shorthands/borderRight.d.ts

 import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype';
 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
-export declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
-export declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): MakeStylesStrictCSSObject;
-export declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): MakeStylesStrictCSSObject;
+declare type BorderRightStyle = Pick<MakeStylesStrictCSSObject, 'borderRightWidth' | 'borderRightStyle' | 'borderRightColor'>;
+export declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>): BorderRightStyle;
+export declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): BorderRightStyle;
+export declare function borderRight(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): BorderRightStyle;
+export {};

lib/shorthands/borderStyle.d.ts

 import type { BorderStyleProperty } from 'csstype';
 import type { MakeStylesStrictCSSObject } from '../types';
-export declare function borderStyle(all: BorderStyleProperty): MakeStylesStrictCSSObject;
-export declare function borderStyle(vertical: BorderStyleProperty, horizontal: BorderStyleProperty): MakeStylesStrictCSSObject;
-export declare function borderStyle(top: BorderStyleProperty, horizontal: BorderStyleProperty, bottom: BorderStyleProperty): MakeStylesStrictCSSObject;
-export declare function borderStyle(top: BorderStyleProperty, right: BorderStyleProperty, bottom: BorderStyleProperty, left: BorderStyleProperty): MakeStylesStrictCSSObject;
+declare type BorderStyleStyle = Pick<MakeStylesStrictCSSObject, 'borderTopStyle' | 'borderRightStyle' | 'borderBottomStyle' | 'borderLeftStyle'>;
+export declare function borderStyle(all: BorderStyleProperty): BorderStyleStyle;
+export declare function borderStyle(vertical: BorderStyleProperty, horizontal: BorderStyleProperty): BorderStyleStyle;
+export declare function borderStyle(top: BorderStyleProperty, horizontal: BorderStyleProperty, bottom: BorderStyleProperty): BorderStyleStyle;
+export declare function borderStyle(top: BorderStyleProperty, right: BorderStyleProperty, bottom: BorderStyleProperty, left: BorderStyleProperty): BorderStyleStyle;
+export {};

lib/shorthands/borderTop.d.ts

 import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype';
 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
-export declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
-export declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): MakeStylesStrictCSSObject;
-export declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): MakeStylesStrictCSSObject;
+declare type BorderTopStyle = Pick<MakeStylesStrictCSSObject, 'borderTopWidth' | 'borderTopStyle' | 'borderTopColor'>;
+export declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>): BorderTopStyle;
+export declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty): BorderTopStyle;
+export declare function borderTop(width: BorderWidthProperty<MakeStylesCSSValue>, style: BorderStyleProperty, color: BorderColorProperty): BorderTopStyle;
+export {};

lib/shorthands/borderWidth.d.ts

 import type { BorderWidthProperty } from 'csstype';
 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
-export declare function borderWidth(all: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
-export declare function borderWidth(vertical: BorderWidthProperty<MakeStylesCSSValue>, horizontal: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
-export declare function borderWidth(top: BorderWidthProperty<MakeStylesCSSValue>, horizontal: BorderWidthProperty<MakeStylesCSSValue>, bottom: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
-export declare function borderWidth(top: BorderWidthProperty<MakeStylesCSSValue>, right: BorderWidthProperty<MakeStylesCSSValue>, bottom: BorderWidthProperty<MakeStylesCSSValue>, left: BorderWidthProperty<MakeStylesCSSValue>): MakeStylesStrictCSSObject;
+declare type BorderWidthStyle = Pick<MakeStylesStrictCSSObject, 'borderTopStyle' | 'borderRightStyle' | 'borderBottomStyle' | 'borderLeftStyle'>;
+export declare function borderWidth(all: BorderWidthProperty<MakeStylesCSSValue>): BorderWidthStyle;
+export declare function borderWidth(vertical: BorderWidthProperty<MakeStylesCSSValue>, horizontal: BorderWidthProperty<MakeStylesCSSValue>): BorderWidthStyle;
+export declare function borderWidth(top: BorderWidthProperty<MakeStylesCSSValue>, horizontal: BorderWidthProperty<MakeStylesCSSValue>, bottom: BorderWidthProperty<MakeStylesCSSValue>): BorderWidthStyle;
+export declare function borderWidth(top: BorderWidthProperty<MakeStylesCSSValue>, right: BorderWidthProperty<MakeStylesCSSValue>, bottom: BorderWidthProperty<MakeStylesCSSValue>, left: BorderWidthProperty<MakeStylesCSSValue>): BorderWidthStyle;
+export {};

lib/shorthands/gap.d.ts

 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
+declare type GapStyle = Pick<MakeStylesStrictCSSObject, 'columnGap' | 'rowGap'>;
 /**
@@ -11,2 +12,3 @@ * A function that implements CSS spec conformant expansion for "gap"
  */
-export declare function gap(columnGap: MakeStylesCSSValue, rowGap?: MakeStylesCSSValue): MakeStylesStrictCSSObject;
+export declare function gap(columnGap: MakeStylesCSSValue, rowGap?: MakeStylesCSSValue): GapStyle;
+export {};

lib/shorthands/margin.d.ts

 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
-export declare function margin(all: MakeStylesCSSValue): MakeStylesStrictCSSObject;
-export declare function margin(vertical: MakeStylesCSSValue, horizontal: MakeStylesCSSValue): MakeStylesStrictCSSObject;
-export declare function margin(top: MakeStylesCSSValue, horizontal: MakeStylesCSSValue, bottom: MakeStylesCSSValue): MakeStylesStrictCSSObject;
-export declare function margin(top: MakeStylesCSSValue, right: MakeStylesCSSValue, bottom: MakeStylesCSSValue, left: MakeStylesCSSValue): MakeStylesStrictCSSObject;
+declare type MarginStyle = Pick<MakeStylesStrictCSSObject, 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft'>;
+export declare function margin(all: MakeStylesCSSValue): MarginStyle;
+export declare function margin(vertical: MakeStylesCSSValue, horizontal: MakeStylesCSSValue): MarginStyle;
+export declare function margin(top: MakeStylesCSSValue, horizontal: MakeStylesCSSValue, bottom: MakeStylesCSSValue): MarginStyle;
+export declare function margin(top: MakeStylesCSSValue, right: MakeStylesCSSValue, bottom: MakeStylesCSSValue, left: MakeStylesCSSValue): MarginStyle;
+export {};

lib/shorthands/overflow.d.ts

 import type { OverflowProperty } from 'csstype';
 import type { MakeStylesStrictCSSObject } from '../types';
+declare type OverflowStyle = Pick<MakeStylesStrictCSSObject, 'overflowX' | 'overflowY'>;
 /**
@@ -12,2 +13,3 @@ * A function that implements CSS spec conformant expansion for "overflow"
  */
-export declare function overflow(overflowX: OverflowProperty, overflowY?: OverflowProperty): MakeStylesStrictCSSObject;
+export declare function overflow(overflowX: OverflowProperty, overflowY?: OverflowProperty): OverflowStyle;
+export {};

lib/shorthands/padding.d.ts

 import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types';
-export declare function padding(all: MakeStylesCSSValue): MakeStylesStrictCSSObject;
-export declare function padding(vertical: MakeStylesCSSValue, horizontal: MakeStylesCSSValue): MakeStylesStrictCSSObject;
-export declare function padding(top: MakeStylesCSSValue, horizontal: MakeStylesCSSValue, bottom: MakeStylesCSSValue): MakeStylesStrictCSSObject;
-export declare function padding(top: MakeStylesCSSValue, right: MakeStylesCSSValue, bottom: MakeStylesCSSValue, left: MakeStylesCSSValue): MakeStylesStrictCSSObject;
+declare type PaddingStyle = Pick<MakeStylesStrictCSSObject, 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft'>;
+export declare function padding(all: MakeStylesCSSValue): PaddingStyle;
+export declare function padding(vertical: MakeStylesCSSValue, horizontal: MakeStylesCSSValue): PaddingStyle;
+export declare function padding(top: MakeStylesCSSValue, horizontal: MakeStylesCSSValue, bottom: MakeStylesCSSValue): PaddingStyle;
+export declare function padding(top: MakeStylesCSSValue, right: MakeStylesCSSValue, bottom: MakeStylesCSSValue, left: MakeStylesCSSValue): PaddingStyle;
+export {};

lib/types.d.ts

 import * as CSS from 'csstype';
 export declare type MakeStylesCSSValue = string | 0;
-declare type MakeStylesCSSProperties = Omit<CSS.Properties<MakeStylesCSSValue>, 'animationName'>;
+declare type MakeStylesUnsupportedCSSProperties = {
+    animation?: never;
+    background?: never;
+    border?: never;
+    borderBlock?: never;
+    borderBlockEnd?: never;
+    borderBlockStart?: never;
+    borderBottom?: never;
+    borderColor?: never;
+    borderImage?: never;
+    borderInline?: never;
+    borderInlineEnd?: never;
+    borderInlineStart?: never;
+    borderLeft?: never;
+    borderRadius?: never;
+    borderRight?: never;
+    borderStyle?: never;
+    borderTop?: never;
+    borderWidth?: never;
+    columnRule?: never;
+    flex?: never;
+    flexFlow?: never;
+    font?: never;
+    gap?: never;
+    grid?: never;
+    gridArea?: never;
+    gridColumn?: never;
+    gridGap?: never;
+    gridRow?: never;
+    gridTemplate?: never;
+    listStyle?: never;
+    margin?: never;
+    mask?: never;
+    maskBorder?: never;
+    offset?: never;
+    outline?: never;
+    overflow?: never;
+    padding?: never;
+    placeItems?: never;
+    placeSelf?: never;
+    textDecoration?: never;
+    textEmphasis?: never;
+    transition?: never;
+};
+declare type MakeStylesCSSProperties = Omit<CSS.Properties<MakeStylesCSSValue>, 'animationName' | 'fontWeight'> & MakeStylesUnsupportedCSSProperties;
 export declare type MakeStylesStrictCSSObject = MakeStylesCSSProperties & MakeStylesCSSPseudos & {
     animationName?: MakeStylesAnimation | MakeStylesAnimation[] | CSS.AnimationProperty;
+    fontWeight?: CSS.Properties['fontWeight'] | string;
 };
-declare type MakeStylesCSSObjectCustom = {
-    [Property: string]: MakeStylesStyle | string | 0;
-};
 declare type MakeStylesCSSPseudos = {
-    [Property in CSS.Pseudos]?: MakeStylesStrictCSSObject & {
+    [Property in CSS.Pseudos]?: (MakeStylesStrictCSSObject & {
         content?: string;
-    };
+    }) | (MakeStylesCSSObjectCustomL1 & {
+        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>;
+declare type MakeStylesCSSObjectCustomL1 = {
+    [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL2;
+} & MakeStylesStrictCSSObject;
+declare type MakeStylesCSSObjectCustomL2 = {
+    [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL3;
+} & MakeStylesStrictCSSObject;
+declare type MakeStylesCSSObjectCustomL3 = {
+    [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL4;
+} & MakeStylesStrictCSSObject;
+declare type MakeStylesCSSObjectCustomL4 = {
+    [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL5;
+} & MakeStylesStrictCSSObject;
+declare type MakeStylesCSSObjectCustomL5 = {
+    [Property: string]: MakeStylesCSSValue | undefined;
+} & MakeStylesStrictCSSObject;
+export declare type MakeStylesAnimation = Record<'from' | 'to' | string, MakeStylesCSSObjectCustomL1>;
+export declare type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustomL1;
 export interface MakeStylesOptions {
@@ -67,4 +124,4 @@ dir: 'ltr' | 'rtl';
 export declare type CSSRulesByBucket = Partial<Record<StyleBucketName, string[]>>;
-export declare type StylesBySlots<Slots extends string | number, Tokens> = Record<Slots, MakeStylesStyleRule<Tokens>>;
+export declare type StylesBySlots<Slots extends string | number> = Record<Slots, MakeStylesStyle>;
 export declare type LookupItem = [/* definitions */ CSSClassesMap, /* dir */ /* dir */ 'rtl' | 'ltr'];
 export {};

package.json

 {
   "name": "@fluentui/make-styles",
-  "version": "0.0.0-nightlyd3bf09bf8120211201.1",
+  "version": "0.0.0-nightlydd0f007b3f20220119.1",
   "description": "Experimental utility for creating css styles/classes.",
@@ -20,3 +20,3 @@ "main": "lib-commonjs/index.js",
     "lint": "just-scripts lint",
-    "test": "jest",
+    "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
@@ -34,3 +34,2 @@ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/make-styles/src && yarn docs",
     "csstype": "^2.6.7",
-    "inline-style-expand-shorthand": "^1.2.0",
     "rtl-css-js": "^1.14.5",
@@ -37,0 +36,0 @@ "stylis": "^4.0.6",

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

302326

increased by0.21%

Dependency count

5

decreased by-16.67%

Lines of code

5061

increased by2.18%

Worsened metrics

Number of package files

271

decreased by-4.24%

Dependency changes

• - Removedinline-style-expand-shorthand@^1.2.0

• - Removedinline-style-expand-shorthand@1.6.0(transitive)