@fluentui/make-styles - npm Package Compare versions

Comparing version 9.0.0-alpha.12 to 9.0.0-alpha.13

CHANGELOG.json

@@ -5,3 +5,24 @@ {
     {
-      "date": "Wed, 21 Apr 2021 07:29:05 GMT",
+      "date": "Thu, 22 Apr 2021 07:31:20 GMT",
+      "tag": "@fluentui/make-styles_v9.0.0-alpha.13",
+      "version": "9.0.0-alpha.13",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Updates make-styles to expose lookup table",
+            "author": "[e-mail]",
+            "commit": "bf7ee8d466296bd5974bd5abf9aaa20868aa9add",
+            "package": "@fluentui/make-styles"
+          },
+          {
+            "comment": "fix(makeStyles): DOM renderer should not throw in SSR",
+            "author": "[e-mail]",
+            "commit": "c47093e0bb71bf0f8118884f9cd026f4fcbeebf0",
+            "package": "@fluentui/make-styles"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 21 Apr 2021 07:31:50 GMT",
       "tag": "@fluentui/make-styles_v9.0.0-alpha.12",
@@ -8,0 +29,0 @@ "version": "9.0.0-alpha.12",

CHANGELOG.md

 # Change Log - @fluentui/make-styles
 
-This log was last generated on Wed, 21 Apr 2021 07:29:05 GMT and should not be manually modified.
+This log was last generated on Thu, 22 Apr 2021 07:31:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.13](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v9.0.0-alpha.13)
+
+Thu, 22 Apr 2021 07:31:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v9.0.0-alpha.12..@fluentui/make-styles_v9.0.0-alpha.13)
+
+### Changes
+
+- Updates make-styles to expose lookup table ([PR #17826](https://github.com/microsoft/fluentui/pull/17826) by [e-mail])
+- fix(makeStyles): DOM renderer should not throw in SSR ([PR #17904](https://github.com/microsoft/fluentui/pull/17904) by [e-mail])
+
 ## [9.0.0-alpha.12](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v9.0.0-alpha.12)
 
-Wed, 21 Apr 2021 07:29:05 GMT 
+Wed, 21 Apr 2021 07:31:50 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v9.0.0-alpha.11..@fluentui/make-styles_v9.0.0-alpha.12)
@@ -11,0 +21,0 @@

dist/make-styles.d.ts

@@ -15,4 +15,22 @@ import { Properties } from 'csstype';
 
-export declare function createDOMRenderer(target?: Document): MakeStylesDOMRenderer;
+export declare function createDOMRenderer(target: Document | undefined): MakeStylesDOMRenderer;
 
+/** @internal */
+export declare const DEFINITION_LOOKUP_TABLE: Record<string, LookupItem>;
+
+/** @internal */
+export declare const HASH_LENGTH = 7;
+
+/** @internal */
+export declare const HASH_PREFIX = "f";
+
+/** @internal */
+export declare const LOOKUP_DEFINITIONS_INDEX = 0;
+
+/** @internal */
+export declare const LOOKUP_DIR_INDEX = 1;
+
+/** @internal */
+export declare type LookupItem = [/* definitions: */ MakeStylesReducedDefinitions, /* dir:  */ /* dir:  */ 'rtl' | 'ltr'];
+
 export declare type MakeStaticStyles = ({
@@ -108,2 +126,23 @@ [key: string]: Properties & Record<string, any>;
 /**
+ * A prefix that identifies that classname string is defined for RTL.
+ * @internal
+ */
+export declare const RTL_PREFIX = "r";
+
+/** @internal */
+export declare const RULE_CLASSNAME_INDEX = 1;
+
+/** @internal */
+export declare const RULE_CSS_INDEX = 2;
+
+/** @internal */
+export declare const RULE_RTL_CSS_INDEX = 3;
+
+/** @internal */
+export declare const RULE_STYLE_BUCKET_INDEX = 0;
+
+/** @internal */
+export declare const SEQUENCE_PREFIX = "__";
+
+/**
  * Buckets under which we will group our stylesheets.
@@ -110,0 +149,0 @@ */

etc/make-styles.api.md

@@ -20,4 +20,34 @@ ## API Report File for "@fluentui/make-styles"
 // @public (undocumented)
-export function createDOMRenderer(target?: Document): MakeStylesDOMRenderer;
+export function createDOMRenderer(target: Document | undefined): MakeStylesDOMRenderer;
 
+// Warning: (ae-internal-missing-underscore) The name "DEFINITION_LOOKUP_TABLE" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const DEFINITION_LOOKUP_TABLE: Record<string, LookupItem>;
+
+// Warning: (ae-internal-missing-underscore) The name "HASH_LENGTH" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const HASH_LENGTH = 7;
+
+// Warning: (ae-internal-missing-underscore) The name "HASH_PREFIX" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const HASH_PREFIX = "f";
+
+// Warning: (ae-internal-missing-underscore) The name "LOOKUP_DEFINITIONS_INDEX" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const LOOKUP_DEFINITIONS_INDEX = 0;
+
+// Warning: (ae-internal-missing-underscore) The name "LOOKUP_DIR_INDEX" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const LOOKUP_DIR_INDEX = 1;
+
+// Warning: (ae-internal-missing-underscore) The name "LookupItem" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export type LookupItem = [/* definitions: */ MakeStylesReducedDefinitions, /* dir:  */ /* dir:  */ 'rtl' | 'ltr'];
+
 // @public (undocumented)
@@ -101,2 +131,32 @@ export type MakeStaticStyles = ({
 
+// Warning: (ae-internal-missing-underscore) The name "RTL_PREFIX" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal
+export const RTL_PREFIX = "r";
+
+// Warning: (ae-internal-missing-underscore) The name "RULE_CLASSNAME_INDEX" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const RULE_CLASSNAME_INDEX = 1;
+
+// Warning: (ae-internal-missing-underscore) The name "RULE_CSS_INDEX" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const RULE_CSS_INDEX = 2;
+
+// Warning: (ae-internal-missing-underscore) The name "RULE_RTL_CSS_INDEX" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const RULE_RTL_CSS_INDEX = 3;
+
+// Warning: (ae-internal-missing-underscore) The name "RULE_STYLE_BUCKET_INDEX" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const RULE_STYLE_BUCKET_INDEX = 0;
+
+// Warning: (ae-internal-missing-underscore) The name "SEQUENCE_PREFIX" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const SEQUENCE_PREFIX = "__";
+
 // @public
@@ -103,0 +163,0 @@ export type StyleBucketName = '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 't';

lib-amd/constants.d.ts

 import { MakeStylesReducedDefinitions } from './types';
+/** @internal */
 export declare const HASH_PREFIX = "f";
+/** @internal */
 export declare const HASH_LENGTH = 7;
-/** A prefix that identifies that classname string is defined for RTL. */
+/**
+ * A prefix that identifies that classname string is defined for RTL.
+ * @internal
+ */
 export declare const RTL_PREFIX = "r";
+/** @internal */
 export declare const SEQUENCE_PREFIX = "__";
-export declare const DEFINITION_LOOKUP_TABLE: Record<string, [MakeStylesReducedDefinitions, boolean]>;
+/** @internal */
+export declare type LookupItem = [/* definitions: */ MakeStylesReducedDefinitions, /* dir:  */ /* dir:  */ 'rtl' | 'ltr'];
+/** @internal */
+export declare const DEFINITION_LOOKUP_TABLE: Record<string, LookupItem>;
+/** @internal */
+export declare const LOOKUP_DEFINITIONS_INDEX = 0;
+/** @internal */
+export declare const LOOKUP_DIR_INDEX = 1;
+/** @internal */
 export declare const RULE_STYLE_BUCKET_INDEX = 0;
+/** @internal */
 export declare const RULE_CLASSNAME_INDEX = 1;
+/** @internal */
 export declare const RULE_CSS_INDEX = 2;
+/** @internal */
 export declare const RULE_RTL_CSS_INDEX = 3;

lib-amd/constants.js

 define(["require", "exports"], function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    /** @internal */
     exports.HASH_PREFIX = 'f';
+    /** @internal */
     exports.HASH_LENGTH = 7;
-    /** A prefix that identifies that classname string is defined for RTL. */
+    /**
+     * A prefix that identifies that classname string is defined for RTL.
+     * @internal
+     */
     exports.RTL_PREFIX = 'r';
+    /** @internal */
     exports.SEQUENCE_PREFIX = '__';
+    /** @internal */
     exports.DEFINITION_LOOKUP_TABLE = {};
+    // indexes for values in LookupItem tuple
+    /** @internal */
+    exports.LOOKUP_DEFINITIONS_INDEX = 0;
+    /** @internal */
+    exports.LOOKUP_DIR_INDEX = 1;
     /* indexes for values in MakeStylesResolvedRule tuple */
+    /** @internal */
     exports.RULE_STYLE_BUCKET_INDEX = 0;
+    /** @internal */
     exports.RULE_CLASSNAME_INDEX = 1;
+    /** @internal */
     exports.RULE_CSS_INDEX = 2;
+    /** @internal */
     exports.RULE_RTL_CSS_INDEX = 3;
 });
 //# sourceMappingURL=constants.js.map

lib-amd/index.d.ts

@@ -9,1 +9,2 @@ export { createDOMRenderer } from './renderer/createDOMRenderer';
 export * from './types';
+export * from './constants';

lib-amd/index.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./renderer/createDOMRenderer", "./mergeClasses", "./makeStaticStyles", "./makeStyles", "./runtime/createCSSVariablesProxy", "./runtime/resolveStyleRules", "./__styles"], function (require, exports, createDOMRenderer_1, mergeClasses_1, makeStaticStyles_1, makeStyles_1, createCSSVariablesProxy_1, resolveStyleRules_1, __styles_1) {
+define(["require", "exports", "tslib", "./renderer/createDOMRenderer", "./mergeClasses", "./makeStaticStyles", "./makeStyles", "./runtime/createCSSVariablesProxy", "./runtime/resolveStyleRules", "./__styles", "./constants"], function (require, exports, tslib_1, createDOMRenderer_1, mergeClasses_1, makeStaticStyles_1, makeStyles_1, createCSSVariablesProxy_1, resolveStyleRules_1, __styles_1, constants_1) {
     "use strict";
@@ -11,3 +11,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
     exports.__styles = __styles_1.__styles;
+    tslib_1.__exportStar(constants_1, exports);
 });
 //# sourceMappingURL=index.js.map

lib-amd/mergeClasses.js

@@ -10,3 +10,3 @@ define(["require", "exports", "./constants", "./runtime/utils/hashString"], function (require, exports, constants_1, hashString_1) {
         // @see https://babeljs.io/docs/en/babel-plugin-transform-parameters
-        var isRtl = null;
+        var dir = null;
         var resultClassName = '';
@@ -35,5 +35,5 @@ // Is used as a cache key to avoid object merging
                         sequenceMatch += sequenceId;
-                        sequenceMappings.push(sequenceMapping[0]);
+                        sequenceMappings.push(sequenceMapping[constants_1.LOOKUP_DEFINITIONS_INDEX]);
                         
-                        isRtl = sequenceMapping[1];
+                        dir = sequenceMapping[constants_1.LOOKUP_DIR_INDEX];
                     }
@@ -68,4 +68,4 @@ else {
             var resultDefinition = resultDefinitions[property];
-            if (isRtl) {
-                var rtlPrefix = isRtl && resultDefinition[constants_1.RULE_RTL_CSS_INDEX] ? constants_1.RTL_PREFIX : '';
+            if (dir === 'rtl') {
+                var rtlPrefix = resultDefinition[constants_1.RULE_RTL_CSS_INDEX] ? constants_1.RTL_PREFIX : '';
                 atomicClassNames += rtlPrefix + resultDefinition[constants_1.RULE_CLASSNAME_INDEX] + ' ';
@@ -82,3 +82,3 @@ }
         mergeClassesCachedResults[sequenceMatch] = atomicClassNames;
-        constants_1.DEFINITION_LOOKUP_TABLE[newSequenceHash] = [resultDefinitions, isRtl];
+        constants_1.DEFINITION_LOOKUP_TABLE[newSequenceHash] = [resultDefinitions, (dir !== null && dir !== void 0 ? dir : 'ltr')];
         return resultClassName + atomicClassNames;
@@ -85,0 +85,0 @@ }

lib-amd/renderer/createDOMRenderer.d.ts

@@ -6,3 +6,3 @@ import { MakeStylesRenderer, StyleBucketName } from '../types';
 }
-export declare function createDOMRenderer(target?: Document): MakeStylesDOMRenderer;
+export declare function createDOMRenderer(target: Document | undefined): MakeStylesDOMRenderer;
 export declare function resetDOMRenderer(targetDocument?: Document): void;

lib-amd/renderer/createDOMRenderer.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "../constants"], function (require, exports, constants_1) {
+define(["require", "exports", "tslib", "../constants"], function (require, exports, tslib_1, constants_1) {
     "use strict";
@@ -49,8 +49,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
     }
+    // To avoid errors related to SSR as `document` can be undefined, to workaround this we are using a fake object
+    // `fakeDocument`. When a value matches `fakeDocument`, we will create a noop renderer.
+    //
+    // It's an edge case, we should provide an SSR renderer for these use cases.
+    var fakeDocumentForSSR = tslib_1.__assign({}, (process.env.NODE_ENV !== 'production' && { fakeDocumentForSSR: true }));
     var renderers = new WeakMap();
     var lastIndex = 0;
-    /* eslint-disable guard-for-in */
     function createDOMRenderer(target) {
-        if (target === void 0) { target = document; }
-        var value = renderers.get(target);
+        var value = renderers.get(target || fakeDocumentForSSR);
         if (value) {
@@ -65,2 +68,3 @@ return value;
                 var classes = '';
+                // eslint-disable-next-line guard-for-in
                 for (var propName in definitions) {
@@ -83,10 +87,12 @@ var definition = definitions[propName];
                     var ruleCSS = dir === 'rtl' ? rtlCSS || css : css;
-                    var sheet = getStyleSheetForBucket(bucketName, target, renderer);
-                    try {
-                        sheet.insertRule(ruleCSS, sheet.cssRules.length);
+                    if (target) {
+                        var sheet = getStyleSheetForBucket(bucketName, target, renderer);
+                        try {
+                            sheet.insertRule(ruleCSS, sheet.cssRules.length);
+                        }
+                        catch (e) {
+                            // We've disabled these warnings due to false-positive errors with browser prefixes
+                            
+                        }
                     }
-                    catch (e) {
-                        // We've disabled these warnings due to false-positive errors with browser prefixes
-                        
-                    }
                     renderer.insertionCache[cacheKey] = true;
@@ -97,3 +103,3 @@ }
         };
-        renderers.set(target, renderer);
+        renderers.set(target || fakeDocumentForSSR, renderer);
         return renderer;
@@ -100,0 +106,0 @@ }

lib-amd/runtime/resolveClassesBySlots.js

@@ -11,3 +11,3 @@ define(["require", "exports", "../constants", "./utils/hashString"], function (require, exports, constants_1, hashString_1) {
             var resultSlotClasses = sequenceHash + ' ' + slotClasses;
-            constants_1.DEFINITION_LOOKUP_TABLE[sequenceHash] = [resolvedStyles[slotName], dir === 'rtl'];
+            constants_1.DEFINITION_LOOKUP_TABLE[sequenceHash] = [resolvedStyles[slotName], dir];
             resolvedClasses[slotName] = resultSlotClasses;
@@ -14,0 +14,0 @@ }

lib-commonjs/constants.d.ts

 import { MakeStylesReducedDefinitions } from './types';
+/** @internal */
 export declare const HASH_PREFIX = "f";
+/** @internal */
 export declare const HASH_LENGTH = 7;
-/** A prefix that identifies that classname string is defined for RTL. */
+/**
+ * A prefix that identifies that classname string is defined for RTL.
+ * @internal
+ */
 export declare const RTL_PREFIX = "r";
+/** @internal */
 export declare const SEQUENCE_PREFIX = "__";
-export declare const DEFINITION_LOOKUP_TABLE: Record<string, [MakeStylesReducedDefinitions, boolean]>;
+/** @internal */
+export declare type LookupItem = [/* definitions: */ MakeStylesReducedDefinitions, /* dir:  */ /* dir:  */ 'rtl' | 'ltr'];
+/** @internal */
+export declare const DEFINITION_LOOKUP_TABLE: Record<string, LookupItem>;
+/** @internal */
+export declare const LOOKUP_DEFINITIONS_INDEX = 0;
+/** @internal */
+export declare const LOOKUP_DIR_INDEX = 1;
+/** @internal */
 export declare const RULE_STYLE_BUCKET_INDEX = 0;
+/** @internal */
 export declare const RULE_CLASSNAME_INDEX = 1;
+/** @internal */
 export declare const RULE_CSS_INDEX = 2;
+/** @internal */
 export declare const RULE_RTL_CSS_INDEX = 3;

lib-commonjs/constants.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+/** @internal */
 exports.HASH_PREFIX = 'f';
+/** @internal */
 exports.HASH_LENGTH = 7;
-/** A prefix that identifies that classname string is defined for RTL. */
+/**
+ * A prefix that identifies that classname string is defined for RTL.
+ * @internal
+ */
 exports.RTL_PREFIX = 'r';
+/** @internal */
 exports.SEQUENCE_PREFIX = '__';
+/** @internal */
 exports.DEFINITION_LOOKUP_TABLE = {};
+// indexes for values in LookupItem tuple
+/** @internal */
+exports.LOOKUP_DEFINITIONS_INDEX = 0;
+/** @internal */
+exports.LOOKUP_DIR_INDEX = 1;
 /* indexes for values in MakeStylesResolvedRule tuple */
+/** @internal */
 exports.RULE_STYLE_BUCKET_INDEX = 0;
+/** @internal */
 exports.RULE_CLASSNAME_INDEX = 1;
+/** @internal */
 exports.RULE_CSS_INDEX = 2;
+/** @internal */
 exports.RULE_RTL_CSS_INDEX = 3;
 //# sourceMappingURL=constants.js.map

lib-commonjs/index.d.ts

@@ -9,1 +9,2 @@ export { createDOMRenderer } from './renderer/createDOMRenderer';
 export * from './types';
+export * from './constants';

lib-commonjs/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
 var createDOMRenderer_1 = require("./renderer/createDOMRenderer");
@@ -18,2 +19,3 @@ exports.createDOMRenderer = createDOMRenderer_1.createDOMRenderer;
 exports.__styles = __styles_1.__styles;
+tslib_1.__exportStar(require("./constants"), exports);
 //# sourceMappingURL=index.js.map

lib-commonjs/mergeClasses.js

@@ -11,3 +11,3 @@ "use strict";
     // @see https://babeljs.io/docs/en/babel-plugin-transform-parameters
-    var isRtl = null;
+    var dir = null;
     var resultClassName = '';
@@ -36,5 +36,5 @@ // Is used as a cache key to avoid object merging
                     sequenceMatch += sequenceId;
-                    sequenceMappings.push(sequenceMapping[0]);
+                    sequenceMappings.push(sequenceMapping[constants_1.LOOKUP_DEFINITIONS_INDEX]);
                     if (process.env.NODE_ENV !== 'production') {
-                        if (isRtl !== null && isRtl !== sequenceMapping[1]) {
+                        if (dir !== null && dir !== sequenceMapping[constants_1.LOOKUP_DIR_INDEX]) {
                             // eslint-disable-next-line no-console
@@ -46,3 +46,3 @@ console.error("mergeClasses(): a passed string contains an identifier (" + sequenceId + ") that has different direction " +
                     }
-                    isRtl = sequenceMapping[1];
+                    dir = sequenceMapping[constants_1.LOOKUP_DIR_INDEX];
                 }
@@ -88,4 +88,4 @@ else {
         var resultDefinition = resultDefinitions[property];
-        if (isRtl) {
-            var rtlPrefix = isRtl && resultDefinition[constants_1.RULE_RTL_CSS_INDEX] ? constants_1.RTL_PREFIX : '';
+        if (dir === 'rtl') {
+            var rtlPrefix = resultDefinition[constants_1.RULE_RTL_CSS_INDEX] ? constants_1.RTL_PREFIX : '';
             atomicClassNames += rtlPrefix + resultDefinition[constants_1.RULE_CLASSNAME_INDEX] + ' ';
@@ -102,3 +102,3 @@ }
     mergeClassesCachedResults[sequenceMatch] = atomicClassNames;
-    constants_1.DEFINITION_LOOKUP_TABLE[newSequenceHash] = [resultDefinitions, isRtl];
+    constants_1.DEFINITION_LOOKUP_TABLE[newSequenceHash] = [resultDefinitions, (dir !== null && dir !== void 0 ? dir : 'ltr')];
     return resultClassName + atomicClassNames;
@@ -105,0 +105,0 @@ }

lib-commonjs/renderer/createDOMRenderer.d.ts

@@ -6,3 +6,3 @@ import { MakeStylesRenderer, StyleBucketName } from '../types';
 }
-export declare function createDOMRenderer(target?: Document): MakeStylesDOMRenderer;
+export declare function createDOMRenderer(target: Document | undefined): MakeStylesDOMRenderer;
 export declare function resetDOMRenderer(targetDocument?: Document): void;

lib-commonjs/renderer/createDOMRenderer.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
 var constants_1 = require("../constants");
@@ -51,8 +52,11 @@ /**
 }
+// To avoid errors related to SSR as `document` can be undefined, to workaround this we are using a fake object
+// `fakeDocument`. When a value matches `fakeDocument`, we will create a noop renderer.
+//
+// It's an edge case, we should provide an SSR renderer for these use cases.
+var fakeDocumentForSSR = tslib_1.__assign({}, (process.env.NODE_ENV !== 'production' && { fakeDocumentForSSR: true }));
 var renderers = new WeakMap();
 var lastIndex = 0;
-/* eslint-disable guard-for-in */
 function createDOMRenderer(target) {
-    if (target === void 0) { target = document; }
-    var value = renderers.get(target);
+    var value = renderers.get(target || fakeDocumentForSSR);
     if (value) {
@@ -67,2 +71,3 @@ return value;
             var classes = '';
+            // eslint-disable-next-line guard-for-in
             for (var propName in definitions) {
@@ -85,12 +90,14 @@ var definition = definitions[propName];
                 var ruleCSS = dir === 'rtl' ? rtlCSS || css : css;
-                var sheet = getStyleSheetForBucket(bucketName, target, renderer);
-                try {
-                    sheet.insertRule(ruleCSS, sheet.cssRules.length);
-                }
-                catch (e) {
-                    // We've disabled these warnings due to false-positive errors with browser prefixes
-                    if (process.env.NODE_ENV !== 'production' && !ignoreSuffixesRegex.test(ruleCSS)) {
-                        // eslint-disable-next-line no-console
-                        console.error("There was a problem inserting the following rule: \"" + ruleCSS + "\"", e);
+                if (target) {
+                    var sheet = getStyleSheetForBucket(bucketName, target, renderer);
+                    try {
+                        sheet.insertRule(ruleCSS, sheet.cssRules.length);
                     }
+                    catch (e) {
+                        // We've disabled these warnings due to false-positive errors with browser prefixes
+                        if (process.env.NODE_ENV !== 'production' && !ignoreSuffixesRegex.test(ruleCSS)) {
+                            // eslint-disable-next-line no-console
+                            console.error("There was a problem inserting the following rule: \"" + ruleCSS + "\"", e);
+                        }
+                    }
                 }
@@ -102,3 +109,3 @@ renderer.insertionCache[cacheKey] = true;
     };
-    renderers.set(target, renderer);
+    renderers.set(target || fakeDocumentForSSR, renderer);
     return renderer;
@@ -105,0 +112,0 @@ }

lib-commonjs/runtime/resolveClassesBySlots.js

@@ -12,3 +12,3 @@ "use strict";
         var resultSlotClasses = sequenceHash + ' ' + slotClasses;
-        constants_1.DEFINITION_LOOKUP_TABLE[sequenceHash] = [resolvedStyles[slotName], dir === 'rtl'];
+        constants_1.DEFINITION_LOOKUP_TABLE[sequenceHash] = [resolvedStyles[slotName], dir];
         resolvedClasses[slotName] = resultSlotClasses;
@@ -15,0 +15,0 @@ }

lib/constants.d.ts

 import { MakeStylesReducedDefinitions } from './types';
+/** @internal */
 export declare const HASH_PREFIX = "f";
+/** @internal */
 export declare const HASH_LENGTH = 7;
-/** A prefix that identifies that classname string is defined for RTL. */
+/**
+ * A prefix that identifies that classname string is defined for RTL.
+ * @internal
+ */
 export declare const RTL_PREFIX = "r";
+/** @internal */
 export declare const SEQUENCE_PREFIX = "__";
-export declare const DEFINITION_LOOKUP_TABLE: Record<string, [MakeStylesReducedDefinitions, boolean]>;
+/** @internal */
+export declare type LookupItem = [/* definitions: */ MakeStylesReducedDefinitions, /* dir:  */ /* dir:  */ 'rtl' | 'ltr'];
+/** @internal */
+export declare const DEFINITION_LOOKUP_TABLE: Record<string, LookupItem>;
+/** @internal */
+export declare const LOOKUP_DEFINITIONS_INDEX = 0;
+/** @internal */
+export declare const LOOKUP_DIR_INDEX = 1;
+/** @internal */
 export declare const RULE_STYLE_BUCKET_INDEX = 0;
+/** @internal */
 export declare const RULE_CLASSNAME_INDEX = 1;
+/** @internal */
 export declare const RULE_CSS_INDEX = 2;
+/** @internal */
 export declare const RULE_RTL_CSS_INDEX = 3;

lib/constants.js

@@ -0,12 +1,28 @@
+/** @internal */
 export var HASH_PREFIX = 'f';
+/** @internal */
 export var HASH_LENGTH = 7;
-/** A prefix that identifies that classname string is defined for RTL. */
+/**
+ * A prefix that identifies that classname string is defined for RTL.
+ * @internal
+ */
 export var RTL_PREFIX = 'r';
+/** @internal */
 export var SEQUENCE_PREFIX = '__';
+/** @internal */
 export var DEFINITION_LOOKUP_TABLE = {};
+// indexes for values in LookupItem tuple
+/** @internal */
+export var LOOKUP_DEFINITIONS_INDEX = 0;
+/** @internal */
+export var LOOKUP_DIR_INDEX = 1;
 /* indexes for values in MakeStylesResolvedRule tuple */
+/** @internal */
 export var RULE_STYLE_BUCKET_INDEX = 0;
+/** @internal */
 export var RULE_CLASSNAME_INDEX = 1;
+/** @internal */
 export var RULE_CSS_INDEX = 2;
+/** @internal */
 export var RULE_RTL_CSS_INDEX = 3;
 //# sourceMappingURL=constants.js.map

lib/index.d.ts

@@ -9,1 +9,2 @@ export { createDOMRenderer } from './renderer/createDOMRenderer';
 export * from './types';
+export * from './constants';

lib/index.js

@@ -9,2 +9,3 @@ export { createDOMRenderer } from './renderer/createDOMRenderer';
 export { __styles } from './__styles';
+export * from './constants';
 //# sourceMappingURL=index.js.map

lib/mergeClasses.js

@@ -1,2 +0,2 @@
-import { DEFINITION_LOOKUP_TABLE, HASH_LENGTH, RTL_PREFIX, RULE_CLASSNAME_INDEX, RULE_RTL_CSS_INDEX, SEQUENCE_PREFIX, } from './constants';
+import { DEFINITION_LOOKUP_TABLE, LOOKUP_DEFINITIONS_INDEX, LOOKUP_DIR_INDEX, HASH_LENGTH, RTL_PREFIX, RULE_CLASSNAME_INDEX, RULE_RTL_CSS_INDEX, SEQUENCE_PREFIX, } from './constants';
 import { hashString } from './runtime/utils/hashString';
@@ -9,3 +9,3 @@ // Contains a mapping of previously resolved sequences of atomic classnames
     // @see https://babeljs.io/docs/en/babel-plugin-transform-parameters
-    var isRtl = null;
+    var dir = null;
     var resultClassName = '';
@@ -34,5 +34,5 @@ // Is used as a cache key to avoid object merging
                     sequenceMatch += sequenceId;
-                    sequenceMappings.push(sequenceMapping[0]);
+                    sequenceMappings.push(sequenceMapping[LOOKUP_DEFINITIONS_INDEX]);
                     if (process.env.NODE_ENV !== 'production') {
-                        if (isRtl !== null && isRtl !== sequenceMapping[1]) {
+                        if (dir !== null && dir !== sequenceMapping[LOOKUP_DIR_INDEX]) {
                             // eslint-disable-next-line no-console
@@ -44,3 +44,3 @@ console.error("mergeClasses(): a passed string contains an identifier (" + sequenceId + ") that has different direction " +
                     }
-                    isRtl = sequenceMapping[1];
+                    dir = sequenceMapping[LOOKUP_DIR_INDEX];
                 }
@@ -86,4 +86,4 @@ else {
         var resultDefinition = resultDefinitions[property];
-        if (isRtl) {
-            var rtlPrefix = isRtl && resultDefinition[RULE_RTL_CSS_INDEX] ? RTL_PREFIX : '';
+        if (dir === 'rtl') {
+            var rtlPrefix = resultDefinition[RULE_RTL_CSS_INDEX] ? RTL_PREFIX : '';
             atomicClassNames += rtlPrefix + resultDefinition[RULE_CLASSNAME_INDEX] + ' ';
@@ -100,5 +100,5 @@ }
     mergeClassesCachedResults[sequenceMatch] = atomicClassNames;
-    DEFINITION_LOOKUP_TABLE[newSequenceHash] = [resultDefinitions, isRtl];
+    DEFINITION_LOOKUP_TABLE[newSequenceHash] = [resultDefinitions, (dir !== null && dir !== void 0 ? dir : 'ltr')];
     return resultClassName + atomicClassNames;
 }
 //# sourceMappingURL=mergeClasses.js.map

lib/renderer/createDOMRenderer.d.ts

@@ -6,3 +6,3 @@ import { MakeStylesRenderer, StyleBucketName } from '../types';
 }
-export declare function createDOMRenderer(target?: Document): MakeStylesDOMRenderer;
+export declare function createDOMRenderer(target: Document | undefined): MakeStylesDOMRenderer;
 export declare function resetDOMRenderer(targetDocument?: Document): void;

lib/renderer/createDOMRenderer.js

@@ -0,1 +1,2 @@
+import { __assign } from "tslib";
 import { RTL_PREFIX, RULE_CLASSNAME_INDEX, RULE_CSS_INDEX, RULE_RTL_CSS_INDEX, RULE_STYLE_BUCKET_INDEX, } from '../constants';
@@ -49,8 +50,11 @@ /**
 }
+// To avoid errors related to SSR as `document` can be undefined, to workaround this we are using a fake object
+// `fakeDocument`. When a value matches `fakeDocument`, we will create a noop renderer.
+//
+// It's an edge case, we should provide an SSR renderer for these use cases.
+var fakeDocumentForSSR = __assign({}, (process.env.NODE_ENV !== 'production' && { fakeDocumentForSSR: true }));
 var renderers = new WeakMap();
 var lastIndex = 0;
-/* eslint-disable guard-for-in */
 export function createDOMRenderer(target) {
-    if (target === void 0) { target = document; }
-    var value = renderers.get(target);
+    var value = renderers.get(target || fakeDocumentForSSR);
     if (value) {
@@ -65,2 +69,3 @@ return value;
             var classes = '';
+            // eslint-disable-next-line guard-for-in
             for (var propName in definitions) {
@@ -83,12 +88,14 @@ var definition = definitions[propName];
                 var ruleCSS = dir === 'rtl' ? rtlCSS || css : css;
-                var sheet = getStyleSheetForBucket(bucketName, target, renderer);
-                try {
-                    sheet.insertRule(ruleCSS, sheet.cssRules.length);
-                }
-                catch (e) {
-                    // We've disabled these warnings due to false-positive errors with browser prefixes
-                    if (process.env.NODE_ENV !== 'production' && !ignoreSuffixesRegex.test(ruleCSS)) {
-                        // eslint-disable-next-line no-console
-                        console.error("There was a problem inserting the following rule: \"" + ruleCSS + "\"", e);
+                if (target) {
+                    var sheet = getStyleSheetForBucket(bucketName, target, renderer);
+                    try {
+                        sheet.insertRule(ruleCSS, sheet.cssRules.length);
                     }
+                    catch (e) {
+                        // We've disabled these warnings due to false-positive errors with browser prefixes
+                        if (process.env.NODE_ENV !== 'production' && !ignoreSuffixesRegex.test(ruleCSS)) {
+                            // eslint-disable-next-line no-console
+                            console.error("There was a problem inserting the following rule: \"" + ruleCSS + "\"", e);
+                        }
+                    }
                 }
@@ -100,3 +107,3 @@ renderer.insertionCache[cacheKey] = true;
     };
-    renderers.set(target, renderer);
+    renderers.set(target || fakeDocumentForSSR, renderer);
     return renderer;
@@ -103,0 +110,0 @@ }

lib/runtime/resolveClassesBySlots.js

@@ -10,3 +10,3 @@ import { DEFINITION_LOOKUP_TABLE, SEQUENCE_PREFIX } from '../constants';
         var resultSlotClasses = sequenceHash + ' ' + slotClasses;
-        DEFINITION_LOOKUP_TABLE[sequenceHash] = [resolvedStyles[slotName], dir === 'rtl'];
+        DEFINITION_LOOKUP_TABLE[sequenceHash] = [resolvedStyles[slotName], dir];
         resolvedClasses[slotName] = resultSlotClasses;
@@ -13,0 +13,0 @@ }

package.json

 {
   "name": "@fluentui/make-styles",
-  "version": "9.0.0-alpha.12",
+  "version": "9.0.0-alpha.13",
   "description": "Experimental utility for creating css styles/classes.",
@@ -5,0 +5,0 @@ "main": "lib-commonjs/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

376982

increased by3.86%

Lines of code

3833

increased by4.76%

Worsened metrics

Number of low supply chain risk alerts

12

increased by20%

No dependency changes