@fluentui/make-styles - npm Package Compare versions

Comparing version 0.3.2-0 to 0.4.0

CHANGELOG.json

@@ -5,3 +5,26 @@ {
     {
-      "date": "Thu, 28 Jan 2021 12:20:50 GMT",
+      "date": "Mon, 01 Feb 2021 12:21:22 GMT",
+      "tag": "@fluentui/make-styles_v0.4.0",
+      "version": "0.4.0",
+      "comments": {
+        "minor": [
+          {
+            "comment": "add ax() function to merge classes",
+            "author": "[e-mail]",
+            "commit": "6436165fb77f0f0a85062b479945163a0618bdf9",
+            "package": "@fluentui/make-styles"
+          }
+        ],
+        "patch": [
+          {
+            "comment": "add prerelease in disallowed change type for version packages and fix current versioning.",
+            "author": "[e-mail]",
+            "commit": "9ec4369a9e7850d7ab37803f931d1a0cf30743a9",
+            "package": "@fluentui/make-styles"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 28 Jan 2021 12:25:56 GMT",
       "tag": "@fluentui/make-styles_v0.3.2-0",
@@ -8,0 +31,0 @@ "version": "0.3.2-0",

CHANGELOG.md

 # Change Log - @fluentui/make-styles
 
-This log was last generated on Wed, 27 Jan 2021 12:30:41 GMT and should not be manually modified.
+This log was last generated on Mon, 01 Feb 2021 12:21:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v0.4.0)
+
+Mon, 01 Feb 2021 12:21:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v0.3.2-0..@fluentui/make-styles_v0.4.0)
+
+### Minor changes
+
+- add ax() function to merge classes ([PR #16411](https://github.com/microsoft/fluentui/pull/16411) by [e-mail])
+
+### Patches
+
+- add prerelease in disallowed change type for version packages and fix current versioning. ([PR #16696](https://github.com/microsoft/fluentui/pull/16696) by [e-mail])
+
 ## [0.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v0.3.1)
@@ -8,0 +21,0 @@

lib-amd/constants.d.ts

@@ -1,5 +0,6 @@
-import { MakeStylesLookupEntry } from './types';
+import { MakeStylesMatchedDefinitions } from './types';
 export declare const CAN_USE_CSS_VARIABLES: boolean;
+export declare const SEQUENCE_PREFIX = "__";
 export declare const HASH_PREFIX = "f";
 export declare const RTL_PREFIX = "r";
-export declare const DEFINITION_LOOKUP_TABLE: Record<string, MakeStylesLookupEntry>;
+export declare const DEFINITION_LOOKUP_TABLE: Record<string, MakeStylesMatchedDefinitions>;

lib-amd/constants.js

@@ -5,2 +5,3 @@ define(["require", "exports"], function (require, exports) {
     exports.CAN_USE_CSS_VARIABLES = window.CSS && CSS.supports('color', 'var(--c)');
+    exports.SEQUENCE_PREFIX = '__';
     exports.HASH_PREFIX = 'f';
@@ -7,0 +8,0 @@ exports.RTL_PREFIX = 'r';

lib-amd/index.d.ts

 export { createDOMRenderer } from './renderer/createDOMRenderer';
+export { ax } from './ax';
 export { makeStyles } from './makeStyles';
 export * from './types';

lib-amd/index.js

@@ -1,7 +0,8 @@
-define(["require", "exports", "./renderer/createDOMRenderer", "./makeStyles"], function (require, exports, createDOMRenderer_1, makeStyles_1) {
+define(["require", "exports", "./renderer/createDOMRenderer", "./ax", "./makeStyles"], function (require, exports, createDOMRenderer_1, ax_1, makeStyles_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.createDOMRenderer = createDOMRenderer_1.createDOMRenderer;
+    exports.ax = ax_1.ax;
     exports.makeStyles = makeStyles_1.makeStyles;
 });
 //# sourceMappingURL=index.js.map

lib-amd/makeStyles.d.ts

 import { MakeStylesDefinition, MakeStylesOptions } from './types';
-export declare function makeStyles<Selectors, Tokens>(definitions: MakeStylesDefinition<Selectors, Tokens>[], unstable_cssPriority?: number): (selectors: Selectors, options: MakeStylesOptions<Tokens>, ...classNames: (string | undefined)[]) => string;
+export declare function makeStyles<Selectors, Tokens>(definitions: MakeStylesDefinition<Selectors, Tokens>[], unstable_cssPriority?: number): (selectors: Selectors, options: MakeStylesOptions<Tokens>) => string;

lib-amd/makeStyles.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "tslib", "./constants", "./runtime/index"], function (require, exports, tslib_1, constants_1, index_1) {
+define(["require", "exports", "tslib", "./constants", "./runtime/index", "./runtime/utils/hashString"], function (require, exports, tslib_1, constants_1, index_1, hashString_1) {
     "use strict";
@@ -25,35 +25,2 @@ Object.defineProperty(exports, "__esModule", { value: true });
             // }
-            var nonMakeClasses = '';
-            var overrides = {};
-            var overridesCx = '';
-            // arguments are parsed intentionally manually to avoid double loops as TS transforms rest via an additional loop
-            for (var i = 2; i < arguments.length; i++) {
-                // eslint-disable-next-line prefer-rest-params
-                var classNames = arguments[i];
-                if (typeof classNames === 'string' && classNames !== '') {
-                    // .split() is an expensive call, it's faster to ensure that string contains any spaces before splitting
-                    if (classNames.indexOf(' ') === -1) {
-                        var definition = constants_1.DEFINITION_LOOKUP_TABLE[classNames];
-                        if (definition !== undefined) {
-                            overrides[definition[0]] = constants_1.DEFINITION_LOOKUP_TABLE[classNames][1];
-                            overridesCx += classNames;
-                        }
-                        else {
-                            nonMakeClasses += classNames + ' ';
-                        }
-                    }
-                    else {
-                        classNames.split(' ').forEach(function (className) {
-                            var definition = constants_1.DEFINITION_LOOKUP_TABLE[className];
-                            if (definition !== undefined) {
-                                overrides[definition[0]] = definition[1];
-                                overridesCx += className;
-                            }
-                            else {
-                                nonMakeClasses += className + ' ';
-                            }
-                        });
-                    }
-                }
-            }
             var matchedIndexes = '';
@@ -68,14 +35,16 @@ var matchedDefinitions = [];
             }
-            var overridesHash = overridesCx === '' ? '' : overridesCx;
-            var cxCacheKey = options.renderer.id + matchedIndexes + '' + overridesHash;
+            var cxCacheKey = options.renderer.id + matchedIndexes;
             var cxCacheElement = cxCache[cxCacheKey];
             if (constants_1.CAN_USE_CSS_VARIABLES && cxCacheElement !== undefined) {
-                return nonMakeClasses + cxCacheElement;
+                return cxCacheElement;
             }
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            var resultDefinitions = Object.assign.apply(Object, tslib_1.__spreadArrays([{}], matchedDefinitions, [overrides]));
-            var resultClasses = options.renderer.insertDefinitions(constants_1.DEFINITION_LOOKUP_TABLE, resultDefinitions, !!options.rtl);
-            cxCache[cxCacheKey] = resultClasses;
-            return nonMakeClasses + resultClasses;
+            var resultDefinitions = Object.assign.apply(Object, tslib_1.__spreadArrays([{}], matchedDefinitions));
+            var resultClasses = options.renderer.insertDefinitions(resultDefinitions, !!options.rtl);
+            var sequenceHash = constants_1.SEQUENCE_PREFIX + hashString_1.hashString(resultClasses);
+            var resultClassesWithHash = sequenceHash + ' ' + resultClasses;
+            constants_1.DEFINITION_LOOKUP_TABLE[sequenceHash] = resultDefinitions;
+            cxCache[cxCacheKey] = resultClassesWithHash;
+            return resultClassesWithHash;
         }
@@ -82,0 +51,0 @@ return computeClasses;

lib-amd/renderer/createDOMRenderer.js

@@ -21,3 +21,3 @@ define(["require", "exports", "../constants"], function (require, exports, constants_1) {
             id: "d" + lastIndex++,
-            insertDefinitions: function insertStyles(lookupTable, definitions, rtl) {
+            insertDefinitions: function insertStyles(definitions, rtl) {
                 var classes = '';
@@ -31,3 +31,3 @@ for (var propName in definitions) {
                     // Should be done always to return classes
-                    classes += ' ' + ruleClassName; // adds useless empty string on beginning
+                    classes += ruleClassName + ' ';
                     if (renderer.insertionCache[ruleClassName]) {
@@ -39,7 +39,6 @@ continue;
                     renderer.insertionCache[ruleClassName] = true;
-                    lookupTable[ruleClassName] = [propName, definition];
                     renderer.styleElement.sheet.insertRule(ruleCSS, renderer.index);
                     renderer.index++;
                 }
-                return classes;
+                return classes.slice(0, -1);
             },
@@ -46,0 +45,0 @@ };

lib-amd/runtime/resolveStyleRules.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@emotion/hash", "rtl-css-js/core", "inline-style-expand-shorthand", "../constants", "./compileCSS", "./compileKeyframeRule", "./utils/generateCombinedMediaQuery", "./utils/isMediaQuerySelector", "./utils/isNestedSelector", "./utils/isObject", "./utils/isSupportQuerySelector", "./utils/normalizeNestedProperty"], function (require, exports, hash_1, core_1, inline_style_expand_shorthand_1, constants_1, compileCSS_1, compileKeyframeRule_1, generateCombinedMediaQuery_1, isMediaQuerySelector_1, isNestedSelector_1, isObject_1, isSupportQuerySelector_1, normalizeNestedProperty_1) {
+define(["require", "exports", "rtl-css-js/core", "inline-style-expand-shorthand", "../constants", "./compileCSS", "./compileKeyframeRule", "./utils/hashString", "./utils/generateCombinedMediaQuery", "./utils/isMediaQuerySelector", "./utils/isNestedSelector", "./utils/isObject", "./utils/isSupportQuerySelector", "./utils/normalizeNestedProperty"], function (require, exports, core_1, inline_style_expand_shorthand_1, constants_1, compileCSS_1, compileKeyframeRule_1, hashString_1, generateCombinedMediaQuery_1, isMediaQuerySelector_1, isNestedSelector_1, isObject_1, isSupportQuerySelector_1, normalizeNestedProperty_1) {
     "use strict";
@@ -23,3 +23,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 // trimming of values is required to generate consistent hashes
-                var classNameHash = hash_1.default(pseudo + media + support + property + value.toString().trim());
+                var classNameHash = hashString_1.hashString(pseudo + media + support + property + value.toString().trim());
                 var className = constants_1.HASH_PREFIX + classNameHash + (unstable_cssPriority === 0 ? '' : unstable_cssPriority);
@@ -33,3 +33,3 @@ var css = compileCSS_1.compileCSS({
                     value: value,
-                    unstable_cssPriority: unstable_cssPriority
+                    unstable_cssPriority: unstable_cssPriority,
                 });
@@ -46,3 +46,3 @@ var rtl = core_1.convertProperty(property, value);
                         value: rtl.value,
-                        unstable_cssPriority: unstable_cssPriority
+                        unstable_cssPriority: unstable_cssPriority,
                     });
@@ -71,3 +71,3 @@ // There is no sense to store RTL className as it's "r" + regular className
                     var keyframe = compileKeyframeRule_1.compileKeyframeRule(value);
-                    var animationName = constants_1.HASH_PREFIX + hash_1.default(keyframe);
+                    var animationName = constants_1.HASH_PREFIX + hashString_1.hashString(keyframe);
                     // TODO call Stylis for prefixing
@@ -74,0 +74,0 @@ var keyframeCSS = "@keyframes " + animationName + "{" + keyframe + "}";

lib-amd/types.d.ts

@@ -17,7 +17,6 @@ import { Properties as CSSProperties } from 'csstype';
 export declare type MakeStylesResolvedDefinition<Selectors, Tokens> = [MakeStylesMatcher<Selectors>, MakeStylesStyleRule<Tokens> | undefined, Record<string, MakeStylesResolvedRule>];
-export declare type MakeStylesLookupEntry = [string, MakeStylesResolvedRule];
 export declare type MakeStylesMatchedDefinitions = Record<string, MakeStylesResolvedRule>;
 export interface MakeStylesRenderer {
     id: string;
-    insertDefinitions(lookupTable: Record<string, MakeStylesLookupEntry>, resolvedDefinitions: MakeStylesMatchedDefinitions, rtl: boolean): string;
+    insertDefinitions(resolvedDefinitions: MakeStylesMatchedDefinitions, rtl: boolean): string;
 }

lib-amd/version.js

 define(["require", "exports", "@fluentui/set-version"], function (require, exports, set_version_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    set_version_1.setVersion('@fluentui/make-styles', '0.3.2-0');
+    set_version_1.setVersion('@fluentui/make-styles', '0.4.0');
 });
 //# sourceMappingURL=version.js.map

lib-commonjs/constants.d.ts

@@ -1,5 +0,6 @@
-import { MakeStylesLookupEntry } from './types';
+import { MakeStylesMatchedDefinitions } from './types';
 export declare const CAN_USE_CSS_VARIABLES: boolean;
+export declare const SEQUENCE_PREFIX = "__";
 export declare const HASH_PREFIX = "f";
 export declare const RTL_PREFIX = "r";
-export declare const DEFINITION_LOOKUP_TABLE: Record<string, MakeStylesLookupEntry>;
+export declare const DEFINITION_LOOKUP_TABLE: Record<string, MakeStylesMatchedDefinitions>;

lib-commonjs/constants.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CAN_USE_CSS_VARIABLES = window.CSS && CSS.supports('color', 'var(--c)');
+exports.SEQUENCE_PREFIX = '__';
 exports.HASH_PREFIX = 'f';
@@ -5,0 +6,0 @@ exports.RTL_PREFIX = 'r';

lib-commonjs/index.d.ts

 export { createDOMRenderer } from './renderer/createDOMRenderer';
+export { ax } from './ax';
 export { makeStyles } from './makeStyles';
 export * from './types';

lib-commonjs/index.js

@@ -5,4 +5,6 @@ "use strict";
 exports.createDOMRenderer = createDOMRenderer_1.createDOMRenderer;
+var ax_1 = require("./ax");
+exports.ax = ax_1.ax;
 var makeStyles_1 = require("./makeStyles");
 exports.makeStyles = makeStyles_1.makeStyles;
 //# sourceMappingURL=index.js.map

lib-commonjs/makeStyles.d.ts

 import { MakeStylesDefinition, MakeStylesOptions } from './types';
-export declare function makeStyles<Selectors, Tokens>(definitions: MakeStylesDefinition<Selectors, Tokens>[], unstable_cssPriority?: number): (selectors: Selectors, options: MakeStylesOptions<Tokens>, ...classNames: (string | undefined)[]) => string;
+export declare function makeStyles<Selectors, Tokens>(definitions: MakeStylesDefinition<Selectors, Tokens>[], unstable_cssPriority?: number): (selectors: Selectors, options: MakeStylesOptions<Tokens>) => string;

lib-commonjs/makeStyles.js

@@ -6,2 +6,3 @@ "use strict";
 var index_1 = require("./runtime/index");
+var hashString_1 = require("./runtime/utils/hashString");
 function makeStyles(definitions, unstable_cssPriority) {
@@ -28,35 +29,2 @@ if (unstable_cssPriority === void 0) { unstable_cssPriority = 0; }
         // }
-        var nonMakeClasses = '';
-        var overrides = {};
-        var overridesCx = '';
-        // arguments are parsed intentionally manually to avoid double loops as TS transforms rest via an additional loop
-        for (var i = 2; i < arguments.length; i++) {
-            // eslint-disable-next-line prefer-rest-params
-            var classNames = arguments[i];
-            if (typeof classNames === 'string' && classNames !== '') {
-                // .split() is an expensive call, it's faster to ensure that string contains any spaces before splitting
-                if (classNames.indexOf(' ') === -1) {
-                    var definition = constants_1.DEFINITION_LOOKUP_TABLE[classNames];
-                    if (definition !== undefined) {
-                        overrides[definition[0]] = constants_1.DEFINITION_LOOKUP_TABLE[classNames][1];
-                        overridesCx += classNames;
-                    }
-                    else {
-                        nonMakeClasses += classNames + ' ';
-                    }
-                }
-                else {
-                    classNames.split(' ').forEach(function (className) {
-                        var definition = constants_1.DEFINITION_LOOKUP_TABLE[className];
-                        if (definition !== undefined) {
-                            overrides[definition[0]] = definition[1];
-                            overridesCx += className;
-                        }
-                        else {
-                            nonMakeClasses += className + ' ';
-                        }
-                    });
-                }
-            }
-        }
         var matchedIndexes = '';
@@ -71,14 +39,16 @@ var matchedDefinitions = [];
         }
-        var overridesHash = overridesCx === '' ? '' : overridesCx;
-        var cxCacheKey = options.renderer.id + matchedIndexes + '' + overridesHash;
+        var cxCacheKey = options.renderer.id + matchedIndexes;
         var cxCacheElement = cxCache[cxCacheKey];
         if (constants_1.CAN_USE_CSS_VARIABLES && cxCacheElement !== undefined) {
-            return nonMakeClasses + cxCacheElement;
+            return cxCacheElement;
         }
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        var resultDefinitions = Object.assign.apply(Object, tslib_1.__spreadArrays([{}], matchedDefinitions, [overrides]));
-        var resultClasses = options.renderer.insertDefinitions(constants_1.DEFINITION_LOOKUP_TABLE, resultDefinitions, !!options.rtl);
-        cxCache[cxCacheKey] = resultClasses;
-        return nonMakeClasses + resultClasses;
+        var resultDefinitions = Object.assign.apply(Object, tslib_1.__spreadArrays([{}], matchedDefinitions));
+        var resultClasses = options.renderer.insertDefinitions(resultDefinitions, !!options.rtl);
+        var sequenceHash = constants_1.SEQUENCE_PREFIX + hashString_1.hashString(resultClasses);
+        var resultClassesWithHash = sequenceHash + ' ' + resultClasses;
+        constants_1.DEFINITION_LOOKUP_TABLE[sequenceHash] = resultDefinitions;
+        cxCache[cxCacheKey] = resultClassesWithHash;
+        return resultClassesWithHash;
     }
@@ -85,0 +55,0 @@ return computeClasses;

lib-commonjs/renderer/createDOMRenderer.js

@@ -21,3 +21,3 @@ "use strict";
         id: "d" + lastIndex++,
-        insertDefinitions: function insertStyles(lookupTable, definitions, rtl) {
+        insertDefinitions: function insertStyles(definitions, rtl) {
             var classes = '';
@@ -31,3 +31,3 @@ for (var propName in definitions) {
                 // Should be done always to return classes
-                classes += ' ' + ruleClassName; // adds useless empty string on beginning
+                classes += ruleClassName + ' ';
                 if (renderer.insertionCache[ruleClassName]) {
@@ -39,7 +39,6 @@ continue;
                 renderer.insertionCache[ruleClassName] = true;
-                lookupTable[ruleClassName] = [propName, definition];
                 renderer.styleElement.sheet.insertRule(ruleCSS, renderer.index);
                 renderer.index++;
             }
-            return classes;
+            return classes.slice(0, -1);
         },
@@ -46,0 +45,0 @@ };

lib-commonjs/runtime/resolveStyleRules.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var hash_1 = require("@emotion/hash");
 var core_1 = require("rtl-css-js/core");
@@ -9,2 +8,3 @@ var inline_style_expand_shorthand_1 = require("inline-style-expand-shorthand");
 var compileKeyframeRule_1 = require("./compileKeyframeRule");
+var hashString_1 = require("./utils/hashString");
 var generateCombinedMediaQuery_1 = require("./utils/generateCombinedMediaQuery");
@@ -35,3 +35,3 @@ var isMediaQuerySelector_1 = require("./utils/isMediaQuerySelector");
             // trimming of values is required to generate consistent hashes
-            var classNameHash = hash_1.default(pseudo + media + support + property + value.toString().trim());
+            var classNameHash = hashString_1.hashString(pseudo + media + support + property + value.toString().trim());
             var className = constants_1.HASH_PREFIX + classNameHash + (unstable_cssPriority === 0 ? '' : unstable_cssPriority);
@@ -45,3 +45,3 @@ var css = compileCSS_1.compileCSS({
                 value: value,
-                unstable_cssPriority: unstable_cssPriority
+                unstable_cssPriority: unstable_cssPriority,
             });
@@ -58,3 +58,3 @@ var rtl = core_1.convertProperty(property, value);
                     value: rtl.value,
-                    unstable_cssPriority: unstable_cssPriority
+                    unstable_cssPriority: unstable_cssPriority,
                 });
@@ -83,3 +83,3 @@ // There is no sense to store RTL className as it's "r" + regular className
                 var keyframe = compileKeyframeRule_1.compileKeyframeRule(value);
-                var animationName = constants_1.HASH_PREFIX + hash_1.default(keyframe);
+                var animationName = constants_1.HASH_PREFIX + hashString_1.hashString(keyframe);
                 // TODO call Stylis for prefixing
@@ -86,0 +86,0 @@ var keyframeCSS = "@keyframes " + animationName + "{" + keyframe + "}";

lib-commonjs/types.d.ts

@@ -17,7 +17,6 @@ import { Properties as CSSProperties } from 'csstype';
 export declare type MakeStylesResolvedDefinition<Selectors, Tokens> = [MakeStylesMatcher<Selectors>, MakeStylesStyleRule<Tokens> | undefined, Record<string, MakeStylesResolvedRule>];
-export declare type MakeStylesLookupEntry = [string, MakeStylesResolvedRule];
 export declare type MakeStylesMatchedDefinitions = Record<string, MakeStylesResolvedRule>;
 export interface MakeStylesRenderer {
     id: string;
-    insertDefinitions(lookupTable: Record<string, MakeStylesLookupEntry>, resolvedDefinitions: MakeStylesMatchedDefinitions, rtl: boolean): string;
+    insertDefinitions(resolvedDefinitions: MakeStylesMatchedDefinitions, rtl: boolean): string;
 }

lib-commonjs/version.js

@@ -6,3 +6,3 @@ "use strict";
 var set_version_1 = require("@fluentui/set-version");
-set_version_1.setVersion('@fluentui/make-styles', '0.3.2-0');
+set_version_1.setVersion('@fluentui/make-styles', '0.4.0');
 //# sourceMappingURL=version.js.map

lib/constants.d.ts

@@ -1,5 +0,6 @@
-import { MakeStylesLookupEntry } from './types';
+import { MakeStylesMatchedDefinitions } from './types';
 export declare const CAN_USE_CSS_VARIABLES: boolean;
+export declare const SEQUENCE_PREFIX = "__";
 export declare const HASH_PREFIX = "f";
 export declare const RTL_PREFIX = "r";
-export declare const DEFINITION_LOOKUP_TABLE: Record<string, MakeStylesLookupEntry>;
+export declare const DEFINITION_LOOKUP_TABLE: Record<string, MakeStylesMatchedDefinitions>;

lib/constants.js

 export var CAN_USE_CSS_VARIABLES = window.CSS && CSS.supports('color', 'var(--c)');
+export var SEQUENCE_PREFIX = '__';
 export var HASH_PREFIX = 'f';
@@ -3,0 +4,0 @@ export var RTL_PREFIX = 'r';

lib/index.d.ts

 export { createDOMRenderer } from './renderer/createDOMRenderer';
+export { ax } from './ax';
 export { makeStyles } from './makeStyles';
 export * from './types';

lib/index.js

 export { createDOMRenderer } from './renderer/createDOMRenderer';
+export { ax } from './ax';
 export { makeStyles } from './makeStyles';
 //# sourceMappingURL=index.js.map

lib/makeStyles.d.ts

 import { MakeStylesDefinition, MakeStylesOptions } from './types';
-export declare function makeStyles<Selectors, Tokens>(definitions: MakeStylesDefinition<Selectors, Tokens>[], unstable_cssPriority?: number): (selectors: Selectors, options: MakeStylesOptions<Tokens>, ...classNames: (string | undefined)[]) => string;
+export declare function makeStyles<Selectors, Tokens>(definitions: MakeStylesDefinition<Selectors, Tokens>[], unstable_cssPriority?: number): (selectors: Selectors, options: MakeStylesOptions<Tokens>) => string;

lib/makeStyles.js

 import { __spreadArrays } from "tslib";
-import { CAN_USE_CSS_VARIABLES, DEFINITION_LOOKUP_TABLE } from './constants';
+import { CAN_USE_CSS_VARIABLES, DEFINITION_LOOKUP_TABLE, SEQUENCE_PREFIX } from './constants';
 import { createCSSVariablesProxy, resolveDefinitions } from './runtime/index';
+import { hashString } from './runtime/utils/hashString';
 export function makeStyles(definitions, unstable_cssPriority) {
@@ -25,35 +26,2 @@ if (unstable_cssPriority === void 0) { unstable_cssPriority = 0; }
         // }
-        var nonMakeClasses = '';
-        var overrides = {};
-        var overridesCx = '';
-        // arguments are parsed intentionally manually to avoid double loops as TS transforms rest via an additional loop
-        for (var i = 2; i < arguments.length; i++) {
-            // eslint-disable-next-line prefer-rest-params
-            var classNames = arguments[i];
-            if (typeof classNames === 'string' && classNames !== '') {
-                // .split() is an expensive call, it's faster to ensure that string contains any spaces before splitting
-                if (classNames.indexOf(' ') === -1) {
-                    var definition = DEFINITION_LOOKUP_TABLE[classNames];
-                    if (definition !== undefined) {
-                        overrides[definition[0]] = DEFINITION_LOOKUP_TABLE[classNames][1];
-                        overridesCx += classNames;
-                    }
-                    else {
-                        nonMakeClasses += classNames + ' ';
-                    }
-                }
-                else {
-                    classNames.split(' ').forEach(function (className) {
-                        var definition = DEFINITION_LOOKUP_TABLE[className];
-                        if (definition !== undefined) {
-                            overrides[definition[0]] = definition[1];
-                            overridesCx += className;
-                        }
-                        else {
-                            nonMakeClasses += className + ' ';
-                        }
-                    });
-                }
-            }
-        }
         var matchedIndexes = '';
@@ -68,14 +36,16 @@ var matchedDefinitions = [];
         }
-        var overridesHash = overridesCx === '' ? '' : overridesCx;
-        var cxCacheKey = options.renderer.id + matchedIndexes + '' + overridesHash;
+        var cxCacheKey = options.renderer.id + matchedIndexes;
         var cxCacheElement = cxCache[cxCacheKey];
         if (CAN_USE_CSS_VARIABLES && cxCacheElement !== undefined) {
-            return nonMakeClasses + cxCacheElement;
+            return cxCacheElement;
         }
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        var resultDefinitions = Object.assign.apply(Object, __spreadArrays([{}], matchedDefinitions, [overrides]));
-        var resultClasses = options.renderer.insertDefinitions(DEFINITION_LOOKUP_TABLE, resultDefinitions, !!options.rtl);
-        cxCache[cxCacheKey] = resultClasses;
-        return nonMakeClasses + resultClasses;
+        var resultDefinitions = Object.assign.apply(Object, __spreadArrays([{}], matchedDefinitions));
+        var resultClasses = options.renderer.insertDefinitions(resultDefinitions, !!options.rtl);
+        var sequenceHash = SEQUENCE_PREFIX + hashString(resultClasses);
+        var resultClassesWithHash = sequenceHash + ' ' + resultClasses;
+        DEFINITION_LOOKUP_TABLE[sequenceHash] = resultDefinitions;
+        cxCache[cxCacheKey] = resultClassesWithHash;
+        return resultClassesWithHash;
     }
@@ -82,0 +52,0 @@ return computeClasses;

lib/renderer/createDOMRenderer.js

@@ -19,3 +19,3 @@ import { RTL_PREFIX } from '../constants';
         id: "d" + lastIndex++,
-        insertDefinitions: function insertStyles(lookupTable, definitions, rtl) {
+        insertDefinitions: function insertStyles(definitions, rtl) {
             var classes = '';
@@ -29,3 +29,3 @@ for (var propName in definitions) {
                 // Should be done always to return classes
-                classes += ' ' + ruleClassName; // adds useless empty string on beginning
+                classes += ruleClassName + ' ';
                 if (renderer.insertionCache[ruleClassName]) {
@@ -37,7 +37,6 @@ continue;
                 renderer.insertionCache[ruleClassName] = true;
-                lookupTable[ruleClassName] = [propName, definition];
                 renderer.styleElement.sheet.insertRule(ruleCSS, renderer.index);
                 renderer.index++;
             }
-            return classes;
+            return classes.slice(0, -1);
         },
@@ -44,0 +43,0 @@ };

lib/runtime/resolveStyleRules.js

@@ -1,2 +0,1 @@
-import hashString from '@emotion/hash';
 import { convertProperty } from 'rtl-css-js/core';
@@ -7,2 +6,3 @@ import { expand } from 'inline-style-expand-shorthand';
 import { compileKeyframeRule } from './compileKeyframeRule';
+import { hashString } from './utils/hashString';
 import { generateCombinedQuery } from './utils/generateCombinedMediaQuery';
@@ -42,3 +42,3 @@ import { isMediaQuerySelector } from './utils/isMediaQuerySelector';
                 value: value,
-                unstable_cssPriority: unstable_cssPriority
+                unstable_cssPriority: unstable_cssPriority,
             });
@@ -55,3 +55,3 @@ var rtl = convertProperty(property, value);
                     value: rtl.value,
-                    unstable_cssPriority: unstable_cssPriority
+                    unstable_cssPriority: unstable_cssPriority,
                 });
@@ -58,0 +58,0 @@ // There is no sense to store RTL className as it's "r" + regular className

lib/types.d.ts

@@ -17,7 +17,6 @@ import { Properties as CSSProperties } from 'csstype';
 export declare type MakeStylesResolvedDefinition<Selectors, Tokens> = [MakeStylesMatcher<Selectors>, MakeStylesStyleRule<Tokens> | undefined, Record<string, MakeStylesResolvedRule>];
-export declare type MakeStylesLookupEntry = [string, MakeStylesResolvedRule];
 export declare type MakeStylesMatchedDefinitions = Record<string, MakeStylesResolvedRule>;
 export interface MakeStylesRenderer {
     id: string;
-    insertDefinitions(lookupTable: Record<string, MakeStylesLookupEntry>, resolvedDefinitions: MakeStylesMatchedDefinitions, rtl: boolean): string;
+    insertDefinitions(resolvedDefinitions: MakeStylesMatchedDefinitions, rtl: boolean): string;
 }

lib/version.js

 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 import { setVersion } from '@fluentui/set-version';
-setVersion('@fluentui/make-styles', '0.3.2-0');
+setVersion('@fluentui/make-styles', '0.4.0');
 //# sourceMappingURL=version.js.map

package.json

 {
   "name": "@fluentui/make-styles",
-  "version": "0.3.2-0",
+  "version": "0.4.0",
   "description": "Experimental utility for creating css styles/classes.",
@@ -30,3 +30,4 @@ "main": "lib-commonjs/index.js",
     "disallowedChangeTypes": [
-      "major"
+      "major",
+      "prerelease"
     ]
@@ -33,0 +34,0 @@ },

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

221586

increased by12.6%

Number of package files

195

increased by10.17%

Lines of code

1893

increased by16.71%

Worsened metrics

Number of low supply chain risk alerts

2

increased byInfinity%

No dependency changes