@fluentui/make-styles - npm Package Compare versions

Comparing version 0.0.0-nightly8c37bdfa2420220107.1 to 0.0.0-nightly8dfa71215620220118.1

CHANGELOG.json

@@ -5,5 +5,5 @@ {
     {
-      "date": "Fri, 07 Jan 2022 04:18:13 GMT",
-      "tag": "@fluentui/make-styles_v0.0.0-nightly8c37bdfa2420220107.1",
-      "version": "0.0.0-nightly8c37bdfa2420220107.1",
+      "date": "Tue, 18 Jan 2022 04:14:43 GMT",
+      "tag": "@fluentui/make-styles_v0.0.0-nightly8dfa71215620220118.1",
+      "version": "0.0.0-nightly8dfa71215620220118.1",
       "comments": {
@@ -14,8 +14,26 @@ "prerelease": [
             "package": "@fluentui/make-styles",
-            "commit": "a20e14c113697b61a1d2c17539c4e1e708ca7d44",
+            "commit": "88cddfc0c80b8e37df557740279661f628c46698",
             "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",
@@ -33,2 +51,8 @@ "comment": "fix: improve return types for shorthand functions"
             "package": "@fluentui/make-styles",
+            "commit": "fc9a2a47c786ebd58c0b33406281485268e7a77a",
+            "comment": "breaking: remove \"unstable_cssPriority\" from makeStyles()"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/make-styles",
             "commit": "add7efae6339cc0fa85ccc37fea4371bc26074e1",
@@ -48,2 +72,8 @@ "comment": "Add shorthand functions for styles"
             "comment": "Add `unstable_filterCSSRule` option to default `createDOMRenderer`"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/make-styles",
+            "commit": "5e128714ba386902c0650ce61dfdeedee71ec0c8",
+            "comment": "refactor: remove unused theme-proxy functionality"
           }
@@ -69,2 +99,8 @@ ],
             "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"
           }
@@ -71,0 +107,0 @@ ]

CHANGELOG.md

 # Change Log - @fluentui/make-styles
 
-This log was last generated on Fri, 07 Jan 2022 04:18:13 GMT and should not be manually modified.
+This log was last generated on Tue, 18 Jan 2022 04:14:43 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly8c37bdfa2420220107.1](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v0.0.0-nightly8c37bdfa2420220107.1)
+## [0.0.0-nightly8dfa71215620220118.1](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v0.0.0-nightly8dfa71215620220118.1)
 
-Fri, 07 Jan 2022 04:18:13 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v9.0.0-beta.3..@fluentui/make-styles_v0.0.0-nightly8c37bdfa2420220107.1)
+Tue, 18 Jan 2022 04:14:43 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v9.0.0-beta.3..@fluentui/make-styles_v0.0.0-nightly8dfa71215620220118.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/a20e14c113697b61a1d2c17539c4e1e708ca7d44) by email not defined)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/88cddfc0c80b8e37df557740279661f628c46698) 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])
 
@@ -21,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

@@ -101,7 +101,2 @@ import type { BorderColorProperty } from 'csstype';
 /**
- * @internal
- */
-export declare function createCSSVariablesProxy(prefix?: string): unknown;
-
-/**
  * Creates a new instances of a renderer.
@@ -188,3 +183,3 @@ *
 
-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>;
 
@@ -213,3 +208,3 @@ export declare type MakeStylesAnimation = Record<'from' | 'to' | string, MakeStylesCSSObjectCustomL1>;
 
-declare type MakeStylesCSSProperties = Omit<CSS_2.Properties<MakeStylesCSSValue>, 'animationName'> & MakeStylesUnsupportedCSSProperties;
+declare type MakeStylesCSSProperties = Omit<CSS_2.Properties<MakeStylesCSSValue>, 'animationName' | 'fontWeight'> & MakeStylesUnsupportedCSSProperties;
 
@@ -249,2 +244,3 @@ declare type MakeStylesCSSPseudos = {
     animationName?: MakeStylesAnimation | MakeStylesAnimation[] | CSS_2.AnimationProperty;
+    fontWeight?: CSS_2.Properties['fontWeight'] | string;
 };
@@ -254,6 +250,2 @@
 
-export declare type MakeStylesStyleFunctionRule<Tokens> = (tokens: Tokens) => MakeStylesStyle;
-
-export declare type MakeStylesStyleRule<Tokens> = MakeStylesStyle | MakeStylesStyleFunctionRule<Tokens>;
-
 declare type MakeStylesUnsupportedCSSProperties = {
@@ -367,7 +359,2 @@ animation?: never;
 /**
- * @internal
- */
-export declare function resolveProxyValues<T>(value: T): T;
-
-/**
  * Transforms input styles to classes maps & CSS rules.
@@ -377,3 +364,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];
 
@@ -384,7 +371,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];
 
@@ -427,4 +413,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

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

@@ -34,4 +34,2 @@ "use strict";
 
-const createCSSVariablesProxy_1 = /*#__PURE__*/require("./createCSSVariablesProxy");
-
 const hashPropertyKey_1 = /*#__PURE__*/require("./utils/hashPropertyKey");
@@ -51,4 +49,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
@@ -70,4 +74,3 @@ for (const property in styles) {
         pseudo,
-        property,
-        unstable_cssPriority
+        property
       });
@@ -84,4 +87,3 @@ const rtlDefinition = rtlValue && {
         media,
-        support,
-        unstable_cssPriority
+        support
       }) : undefined;
@@ -101,3 +103,2 @@ const rtlCompileOptions = flippedInRtl ? {
         value,
-        unstable_cssPriority,
         ...rtlCompileOptions
@@ -137,14 +138,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 {
@@ -161,15 +162,4 @@ if (process.env.NODE_ENV !== 'production') {
 }
-/**
- * Transforms input styles to classes maps & CSS rules.
- *
- * @internal
- */
 
-
-function resolveStyleRules(styles, unstable_cssPriority = 0) {
-  return resolveStyleRulesInner( // resolveProxyValues() is recursive function and should be evaluated once for a style object
-  createCSSVariablesProxy_1.resolveProxyValues(styles), 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

@@ -47,5 +47,6 @@ import * as CSS from 'csstype';
 };
-declare type MakeStylesCSSProperties = Omit<CSS.Properties<MakeStylesCSSValue>, 'animationName'> & MakeStylesUnsupportedCSSProperties;
+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;
 };
@@ -76,4 +77,2 @@ declare type MakeStylesCSSPseudos = {
 export declare type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustomL1;
-export declare type MakeStylesStyleFunctionRule<Tokens> = (tokens: Tokens) => MakeStylesStyle;
-export declare type MakeStylesStyleRule<Tokens> = MakeStylesStyle | MakeStylesStyleFunctionRule<Tokens>;
 export interface MakeStylesOptions {
@@ -127,4 +126,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

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

@@ -14,3 +14,2 @@ import hashString from '@emotion/hash';
 import { hashClassName } from './utils/hashClassName';
-import { resolveProxyValues } from './createCSSVariablesProxy';
 import { hashPropertyKey } from './utils/hashPropertyKey';
@@ -30,4 +29,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
@@ -49,4 +54,3 @@ for (const property in styles) {
         pseudo,
-        property,
-        unstable_cssPriority
+        property
       });
@@ -63,4 +67,3 @@ const rtlDefinition = rtlValue && {
         media,
-        support,
-        unstable_cssPriority
+        support
       }) : undefined;
@@ -80,3 +83,2 @@ const rtlCompileOptions = flippedInRtl ? {
         value,
-        unstable_cssPriority,
         ...rtlCompileOptions
@@ -116,14 +118,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 {
@@ -140,13 +142,2 @@ if (process.env.NODE_ENV !== 'production') {
 }
-/**
- * Transforms input styles to classes maps & CSS rules.
- *
- * @internal
- */
-
-
-export function resolveStyleRules(styles, unstable_cssPriority = 0) {
-  return resolveStyleRulesInner( // resolveProxyValues() is recursive function and should be evaluated once for a style object
-  resolveProxyValues(styles), 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

@@ -47,5 +47,6 @@ import * as CSS from 'csstype';
 };
-declare type MakeStylesCSSProperties = Omit<CSS.Properties<MakeStylesCSSValue>, 'animationName'> & MakeStylesUnsupportedCSSProperties;
+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;
 };
@@ -76,4 +77,2 @@ declare type MakeStylesCSSPseudos = {
 export declare type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustomL1;
-export declare type MakeStylesStyleFunctionRule<Tokens> = (tokens: Tokens) => MakeStylesStyle;
-export declare type MakeStylesStyleRule<Tokens> = MakeStylesStyle | MakeStylesStyleFunctionRule<Tokens>;
 export interface MakeStylesOptions {
@@ -127,4 +126,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-nightly8c37bdfa2420220107.1",
+  "version": "0.0.0-nightly8dfa71215620220118.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",
@@ -23,0 +23,0 @@ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/make-styles/src && yarn docs",

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

Worsened metrics

Total package byte prevSize

302326

decreased by-2.93%

Number of package files

271

decreased by-2.17%

Lines of code

5061

decreased by-2.79%

No dependency changes