@fluentui/make-styles - npm Package Compare versions

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

CHANGELOG.json

@@ -5,5 +5,5 @@ {
     {
-      "date": "Thu, 16 Dec 2021 04:14:52 GMT",
-      "tag": "@fluentui/make-styles_v0.0.0-nightly58c310891320211216.1",
-      "version": "0.0.0-nightly58c310891320211216.1",
+      "date": "Fri, 14 Jan 2022 04:15:05 GMT",
+      "tag": "@fluentui/make-styles_v0.0.0-nightly5ab766c40f20220114.1",
+      "version": "0.0.0-nightly5ab766c40f20220114.1",
       "comments": {
@@ -14,6 +14,18 @@ "prerelease": [
             "package": "@fluentui/make-styles",
-            "commit": "919f08a1b25cd5045dc729d44a65f64f7838f4dc",
+            "commit": "afbf0defba27d6180bd53e24443fff8da633f9dd",
             "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]",
@@ -33,2 +45,8 @@ "package": "@fluentui/make-styles",
             "package": "@fluentui/make-styles",
+            "commit": "fc9a2a47c786ebd58c0b33406281485268e7a77a",
+            "comment": "breaking: remove \"unstable_cssPriority\" from makeStyles()"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/make-styles",
             "commit": "add7efae6339cc0fa85ccc37fea4371bc26074e1",
@@ -38,2 +56,8 @@ "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]",
@@ -40,0 +64,0 @@ "package": "@fluentui/make-styles",

CHANGELOG.md

 # Change Log - @fluentui/make-styles
 
-This log was last generated on Thu, 16 Dec 2021 04:14:52 GMT and should not be manually modified.
+This log was last generated on Fri, 14 Jan 2022 04:15:05 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly58c310891320211216.1](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v0.0.0-nightly58c310891320211216.1)
+## [0.0.0-nightly5ab766c40f20220114.1](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v0.0.0-nightly5ab766c40f20220114.1)
 
-Thu, 16 Dec 2021 04:14:52 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v9.0.0-beta.3..@fluentui/make-styles_v0.0.0-nightly58c310891320211216.1)
+Fri, 14 Jan 2022 04:15:05 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v9.0.0-beta.3..@fluentui/make-styles_v0.0.0-nightly5ab766c40f20220114.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/919f08a1b25cd5045dc729d44a65f64f7838f4dc) by email not defined)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/afbf0defba27d6180bd53e24443fff8da633f9dd) 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])
 - 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])
@@ -19,0 +23,0 @@

dist/make-styles.d.ts

@@ -187,16 +187,34 @@ import type { BorderColorProperty } from 'csstype';
 
-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;
+    });
 };
@@ -229,10 +247,52 @@
     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;
@@ -310,3 +370,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];
 
@@ -317,7 +377,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];
 
@@ -360,4 +419,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

@@ -29,2 +29,2 @@ import { border, borderLeft, borderBottom, borderRight, borderTop, borderColor, borderStyle, borderRadius, borderWidth, gap, margin, padding, overflow } from './shorthands/index';
 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/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/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/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

@@ -29,2 +29,2 @@ import { border, borderLeft, borderBottom, borderRight, borderTop, borderColor, borderStyle, borderRadius, borderWidth, gap, margin, padding, overflow } from './shorthands/index';
 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/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/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/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-nightly58c310891320211216.1",
+  "version": "0.0.0-nightly5ab766c40f20220114.1",
   "description": "Experimental utility for creating css styles/classes.",
@@ -33,3 +33,2 @@ "main": "lib-commonjs/index.js",
     "csstype": "^2.6.7",
-    "inline-style-expand-shorthand": "^1.2.0",
     "rtl-css-js": "^1.14.5",
@@ -36,0 +35,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

Dependency count

5

decreased by-16.67%

Lines of code

5180

increased by1.49%

Worsened metrics

Total package byte prevSize

307672

decreased by-1.17%

Number of package files

277

decreased by-2.12%

Dependency changes

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

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