@fluentui/make-styles - npm Package Compare versions

Comparing version 9.0.0-alpha.7 to 9.0.0-alpha.8

CHANGELOG.json

@@ -5,3 +5,44 @@ {
     {
-      "date": "Tue, 30 Mar 2021 07:30:40 GMT",
+      "date": "Wed, 31 Mar 2021 00:47:26 GMT",
+      "tag": "@fluentui/make-styles_v9.0.0-alpha.8",
+      "version": "9.0.0-alpha.8",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Insert try-catch block to ignore suffix errors",
+            "author": "[e-mail]",
+            "commit": "5c07c361ec9e01c06b186b239495d3cfa46a7595",
+            "package": "@fluentui/make-styles"
+          },
+          {
+            "comment": "handle RTL properly in makeStyles() & ax()",
+            "author": "[e-mail]",
+            "commit": "a20aadf2a8998d47d995a70b636f74cb7f26f48f",
+            "package": "@fluentui/make-styles"
+          }
+        ],
+        "patch": [
+          {
+            "comment": "Bump @fluentui/eslint-plugin to v1.1.0",
+            "author": "[e-mail]",
+            "commit": "d41b79242e6b682dfa58fcd76797ecfd9146d4cf",
+            "package": "@fluentui/make-styles"
+          },
+          {
+            "comment": "Bump @fluentui/test-utilities to v8.0.2",
+            "author": "[e-mail]",
+            "commit": "d41b79242e6b682dfa58fcd76797ecfd9146d4cf",
+            "package": "@fluentui/make-styles"
+          },
+          {
+            "comment": "Bump @fluentui/scripts to v1.0.0",
+            "author": "[e-mail]",
+            "commit": "d41b79242e6b682dfa58fcd76797ecfd9146d4cf",
+            "package": "@fluentui/make-styles"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 30 Mar 2021 07:34:45 GMT",
       "tag": "@fluentui/make-styles_v9.0.0-alpha.7",
@@ -8,0 +49,0 @@ "version": "9.0.0-alpha.7",

CHANGELOG.md

 # Change Log - @fluentui/make-styles
 
-This log was last generated on Tue, 30 Mar 2021 07:30:40 GMT and should not be manually modified.
+This log was last generated on Wed, 31 Mar 2021 00:47:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.8](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v9.0.0-alpha.8)
+
+Wed, 31 Mar 2021 00:47:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v9.0.0-alpha.7..@fluentui/make-styles_v9.0.0-alpha.8)
+
+### Patches
+
+- Bump @fluentui/eslint-plugin to v1.1.0 ([PR #17568](https://github.com/microsoft/fluentui/pull/17568) by [e-mail])
+- Bump @fluentui/test-utilities to v8.0.2 ([PR #17568](https://github.com/microsoft/fluentui/pull/17568) by [e-mail])
+- Bump @fluentui/scripts to v1.0.0 ([PR #17568](https://github.com/microsoft/fluentui/pull/17568) by [e-mail])
+
+### Changes
+
+- Insert try-catch block to ignore suffix errors ([PR #17620](https://github.com/microsoft/fluentui/pull/17620) by [e-mail])
+- handle RTL properly in makeStyles() & ax() ([PR #17549](https://github.com/microsoft/fluentui/pull/17549) by [e-mail])
+
 ## [9.0.0-alpha.7](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v9.0.0-alpha.7)
 
-Tue, 30 Mar 2021 07:30:40 GMT 
+Tue, 30 Mar 2021 07:34:45 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v9.0.0-alpha.6..@fluentui/make-styles_v9.0.0-alpha.7)
@@ -11,0 +27,0 @@

lib-amd/ax.d.ts

 /**
  * Function can take any number of arguments, joins classes together and deduplicates atomic declarations generated by
- * `makeStyles()`.
+ * `makeStyles()`. Handles scoped directional styles.
  *
@@ -10,3 +10,4 @@ * Classnames can be of any length, this function can take both atomic declarations and class names.
  * // not real classes
- * ax('ui-button', 'displayflex', 'displaygrid')
+ * ax('ltr', ['ui-button', 'displayflex', 'displaygrid'])
+ * ax('rtl', ['ui-button', 'displayflex', 'displaygrid'])
  * ```
@@ -17,4 +18,5 @@ *
  * 'ui-button displaygrid'
+ * 'rtl ui-button displaygrid'
  * ```
  */
-export declare function ax(...classNames: (string | false | undefined)[]): string;
+export declare function ax(dir: 'ltr' | 'rtl', classNames: (string | false | undefined)[]): string;

lib-amd/ax.js

@@ -5,6 +5,25 @@ define(["require", "exports", "./constants", "./runtime/utils/hashString"], function (require, exports, constants_1, hashString_1) {
     // Contains a mapping of previously resolved sequences of atomic classnames
-    var axResults = {};
-    function ax() {
-        // arguments are parsed manually to avoid double loops as TS & Babel transforms rest via an additional loop
-        // @see https://babeljs.io/docs/en/babel-plugin-transform-parameters
+    var axCachedResults = {};
+    var SEQUENCE_SIZE = constants_1.SEQUENCE_PREFIX.length + constants_1.HASH_LENGTH;
+    /**
+     * Function can take any number of arguments, joins classes together and deduplicates atomic declarations generated by
+     * `makeStyles()`. Handles scoped directional styles.
+     *
+     * Classnames can be of any length, this function can take both atomic declarations and class names.
+     *
+     * Input:
+     * ```
+     * // not real classes
+     * ax('ltr', ['ui-button', 'displayflex', 'displaygrid'])
+     * ax('rtl', ['ui-button', 'displayflex', 'displaygrid'])
+     * ```
+     *
+     * Output:
+     * ```
+     * 'ui-button displaygrid'
+     * 'rtl ui-button displaygrid'
+     * ```
+     */
+    function ax(dir, classNames) {
+        var isRtl = dir === 'rtl';
         var resultClassName = '';
@@ -14,18 +33,17 @@ // Is used as a cache key to avoid object merging
         var sequenceMappings = [];
-        for (var i = 0; i < arguments.length; i++) {
-            // eslint-disable-next-line prefer-rest-params
-            var argument = arguments[i];
-            if (typeof argument === 'string') {
+        for (var i = 0; i < classNames.length; i++) {
+            var className = classNames[i];
+            if (typeof className === 'string') {
                 // All classes generated by `makeStyles()` are prefixed by a sequence hash, this allows to identify class sets
                 // without parsing each className in a string
-                var sequenceIndex = argument.indexOf(constants_1.SEQUENCE_PREFIX);
+                var sequenceIndex = className.indexOf(constants_1.SEQUENCE_PREFIX);
                 if (sequenceIndex === -1) {
-                    resultClassName += argument + ' ';
+                    resultClassName += className + ' ';
                 }
                 else {
-                    var sequenceId = argument.slice(sequenceIndex, sequenceIndex + 9);
+                    var sequenceId = className.slice(sequenceIndex, sequenceIndex + SEQUENCE_SIZE);
                     var sequenceMapping = constants_1.DEFINITION_LOOKUP_TABLE[sequenceId];
                     // Handles a case with mixed classnames, i.e. "ui-button ATOMIC_CLASSES"
                     if (sequenceIndex > 0) {
-                        resultClassName += argument.slice(0, sequenceIndex);
+                        resultClassName += className.slice(0, sequenceIndex);
                     }
@@ -36,2 +54,7 @@ if (sequenceMapping) {
                     }
+                    else {
+                        // eslint-disable-next-line no-console
+                        console.error("ax(): a passed string contains an identifier (" + sequenceId + ") that does not match any entry in cache. " +
+                            ("Source string: " + className));
+                    }
                 }
@@ -41,7 +64,16 @@
         }
+        // .slice() there allows to avoid trailing space for non-atomic classes
+        // "ui-button ui-flex " => "ui-button ui-flex"
         if (sequenceMatch === '') {
-            // .slice() there and later allows to avoid trailing space
             return resultClassName.slice(0, -1);
         }
-        var axResult = axResults[sequenceMatch];
+        // Is required to have different results for cache lookups and avoid collisions:
+        // - ltr "__seq1__seq2__seq3"
+        // - rtl "__seq1__seq2__seq3r"
+        if (isRtl) {
+            sequenceMatch += constants_1.RTL_PREFIX;
+        }
+        // It's safe to reuse results from continuous merging as results are stable
+        // "__seq1 ... __seq2 ..." => "__seq12 ..."
+        var axResult = axCachedResults[sequenceMatch];
         if (axResult !== undefined) {
@@ -59,3 +91,10 @@ return resultClassName + axResult;
         for (var property in resultDefinitions) {
-            atomicClassNames += resultDefinitions[property][0] + ' ';
+            var resultDefinition = resultDefinitions[property];
+            if (isRtl) {
+                var rtlPrefix = isRtl && resultDefinition[2] ? constants_1.RTL_PREFIX : '';
+                atomicClassNames += rtlPrefix + resultDefinition[0] + ' ';
+            }
+            else {
+                atomicClassNames += resultDefinition[0] + ' ';
+            }
         }
@@ -66,3 +105,3 @@ atomicClassNames = atomicClassNames.slice(0, -1);
         atomicClassNames = newSequenceHash + ' ' + atomicClassNames;
-        axResults[sequenceMatch] = atomicClassNames;
+        axCachedResults[sequenceMatch] = atomicClassNames;
         constants_1.DEFINITION_LOOKUP_TABLE[newSequenceHash] = resultDefinitions;
@@ -69,0 +108,0 @@ return resultClassName + atomicClassNames;

lib-amd/constants.d.ts

 import { MakeStylesMatchedDefinitions } from './types';
-/**
- * NOTE:
- * This is gonna be always `false` in testing environment(jest/jsdom) because jsdom is missing `supports` implementation
- * @see https://github.com/jsdom/jsdom/issues/2026
- */
-export declare const CAN_USE_CSS_VARIABLES: boolean;
-export declare const SEQUENCE_PREFIX = "__";
 export declare const HASH_PREFIX = "f";
+export declare const HASH_LENGTH = 7;
+/** A prefix that identifies that classname string is defined for RTL. */
 export declare const RTL_PREFIX = "r";
+export declare const SEQUENCE_PREFIX = "__";
 export declare const DEFINITION_LOOKUP_TABLE: Record<string, MakeStylesMatchedDefinitions>;

lib-amd/constants.js

 define(["require", "exports"], function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * NOTE:
-     * This is gonna be always `false` in testing environment(jest/jsdom) because jsdom is missing `supports` implementation
-     * @see https://github.com/jsdom/jsdom/issues/2026
-     */
-    exports.CAN_USE_CSS_VARIABLES = window.CSS && typeof CSS.supports === 'function' && CSS.supports('color', 'var(--c)');
-    exports.SEQUENCE_PREFIX = '__';
     exports.HASH_PREFIX = 'f';
+    exports.HASH_LENGTH = 7;
+    /** A prefix that identifies that classname string is defined for RTL. */
     exports.RTL_PREFIX = 'r';
+    exports.SEQUENCE_PREFIX = '__';
     exports.DEFINITION_LOOKUP_TABLE = {};
 });
 //# sourceMappingURL=constants.js.map

lib-amd/makeStaticStyles.js

@@ -18,4 +18,3 @@ define(["require", "exports", "./runtime/resolveStaticStyleRules"], function (require, exports, resolveStaticStyleRules_1) {
                 var styleRules = stylesSet_1[_i];
-                var resolvedStyleRules = resolveStaticStyleRules_1.resolveStaticStyleRules(styleRules);
-                options.renderer.insertDefinitions(resolvedStyleRules, false /** static rules do not support RTL transforms */);
+                options.renderer.insertDefinitions('ltr' /** static rules do not support RTL transforms */, resolveStaticStyleRules_1.resolveStaticStyleRules(styleRules));
             }
@@ -22,0 +21,0 @@ styleCache[cacheKey] = true;

lib-amd/makeStyles.js

 define(["require", "exports", "./constants", "./runtime/index", "./runtime/utils/hashString"], function (require, exports, constants_1, index_1, hashString_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    function resolveClasses(resolvedStyles, dir, renderer) {
+        var resolvedClasses = {};
+        // eslint-disable-next-line guard-for-in
+        for (var slotName in resolvedStyles) {
+            var slotClasses = renderer.insertDefinitions(dir, resolvedStyles[slotName]);
+            var sequenceHash = constants_1.SEQUENCE_PREFIX + hashString_1.hashString(slotClasses);
+            var resultSlotClasses = sequenceHash + ' ' + slotClasses;
+            constants_1.DEFINITION_LOOKUP_TABLE[sequenceHash] = resolvedStyles[slotName];
+            resolvedClasses[slotName] = resultSlotClasses;
+        }
+        return resolvedClasses;
+    }
     function makeStyles(stylesBySlots, unstable_cssPriority) {
         if (unstable_cssPriority === void 0) { unstable_cssPriority = 0; }
+        var resolvedStyles = null;
         var resolvedClasses = null;
+        var resolvedClassesRtl = null;
         var insertionCache = {};
         function computeClasses(options) {
-            if (resolvedClasses === null || insertionCache[options.renderer.id] === undefined) {
-                var tokens = index_1.createCSSVariablesProxy(options.tokens);
-                resolvedClasses = {};
+            var dir = options.dir, renderer = options.renderer, tokens = options.tokens;
+            if (resolvedStyles === null) {
+                resolvedStyles = {};
+                var tokensProxy = index_1.createCSSVariablesProxy(tokens);
                 // eslint-disable-next-line guard-for-in
                 for (var slotName in stylesBySlots) {
-                    // TODO: Miro says that it should be done once as there is no sense to resolve the same styles
                     var slotStyles = stylesBySlots[slotName];
-                    var preparedSlotStyles = typeof slotStyles === 'function' ? slotStyles(tokens) : slotStyles;
-                    var resolvedSlotStyles = index_1.resolveStyleRules(preparedSlotStyles, unstable_cssPriority);
-                    var slotClasses = options.renderer.insertDefinitions(resolvedSlotStyles, !!options.rtl);
-                    var sequenceHash = constants_1.SEQUENCE_PREFIX + hashString_1.hashString(slotClasses);
-                    var resultSlotClasses = sequenceHash + ' ' + slotClasses;
-                    constants_1.DEFINITION_LOOKUP_TABLE[sequenceHash] = resolvedSlotStyles;
-                    resolvedClasses[slotName] = resultSlotClasses;
+                    var preparedSlotStyles = typeof slotStyles === 'function'
+                        ? slotStyles(tokensProxy)
+                        : slotStyles;
+                    resolvedStyles[slotName] = index_1.resolveStyleRules(preparedSlotStyles, unstable_cssPriority);
+                }
+            }
+            if (dir === 'rtl') {
+                // As RTL classes are different they should have a different cache key for insertion
+                var rendererId = renderer.id + 'r';
+                if (resolvedClassesRtl === null || insertionCache[rendererId] === undefined) {
+                    resolvedClassesRtl = resolveClasses(resolvedStyles, dir, renderer);
+                    insertionCache[rendererId] = true;
+                }
+            }
+            else {
+                if (resolvedClasses === null || insertionCache[renderer.id] === undefined) {
+                    resolvedClasses = resolveClasses(resolvedStyles, dir, renderer);
                     insertionCache[options.renderer.id] = true;
                 }
             }
-            return resolvedClasses;
+            return dir === 'ltr' ? resolvedClasses : resolvedClassesRtl;
         }
@@ -28,0 +52,0 @@ return computeClasses;

lib-amd/renderer/createDOMRenderer.js

@@ -21,10 +21,10 @@ define(["require", "exports", "../constants"], function (require, exports, constants_1) {
             id: "d" + lastIndex++,
-            insertDefinitions: function insertStyles(definitions, rtl) {
+            insertDefinitions: function insertStyles(dir, definitions) {
                 var classes = '';
                 for (var propName in definitions) {
                     var definition = definitions[propName];
-                    // className || css || rtlCSS
+                    // 👆 [className, css, rtlCSS?]
                     var className = definition[0];
                     var rtlCSS = definition[2];
-                    var ruleClassName = className && (rtl && rtlCSS ? constants_1.RTL_PREFIX + className : className);
+                    var ruleClassName = className && (dir === 'rtl' && rtlCSS ? constants_1.RTL_PREFIX + className : className);
                     if (ruleClassName) {
@@ -39,6 +39,14 @@ // Should be done always to return classes even if they have been already inserted to DOM
                     var css = definition[1];
-                    var ruleCSS = rtl ? rtlCSS || css : css;
+                    var ruleCSS = dir === 'rtl' ? rtlCSS || css : css;
                     renderer.insertionCache[cacheKey] = true;
-                    renderer.styleElement.sheet.insertRule(ruleCSS, renderer.index);
-                    renderer.index++;
+                    try {
+                        if (renderer.styleElement.sheet instanceof CSSStyleSheet) {
+                            renderer.styleElement.sheet.insertRule(ruleCSS, renderer.index);
+                            renderer.index++;
+                        }
+                    }
+                    catch (e) {
+                        // We've disabled these warnings due to false-positive errors with browser prefixes
+                        
+                    }
                 }
@@ -57,3 +65,15 @@ return classes.slice(0, -1);
     exports.resetDOMRenderer = resetDOMRenderer;
+    /**
+     * Suffixes to be ignored in case of error
+     */
+    var ignoreSuffixes = [
+        '-moz-placeholder',
+        '-moz-focus-inner',
+        '-moz-focusring',
+        '-ms-input-placeholder',
+        '-moz-read-write',
+        '-moz-read-only',
+    ].join('|');
+    var ignoreSuffixesRegex = new RegExp(":(" + ignoreSuffixes + ")");
 });
 //# sourceMappingURL=createDOMRenderer.js.map

lib-amd/runtime/compileCSS.d.ts

@@ -1,2 +0,2 @@
-interface CompileCSSOptions {
+export interface CompileCSSOptions {
     className: string;
@@ -8,7 +8,7 @@ pseudo: string;
     value: number | string;
+    rtlProperty?: string;
+    rtlValue?: number | string;
     unstable_cssPriority: number;
 }
-export declare function compileCSSRule(cssRule: string): string;
 export declare function compileCSSRules(cssRules: string): string[];
-export declare function compileCSS(options: CompileCSSOptions): string;
-export {};
+export declare function compileCSS(options: CompileCSSOptions): [string, string?];

lib-amd/runtime/compileCSS.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "stylis", "./utils/hyphenateProperty"], function (require, exports, stylis_1, hyphenateProperty_1) {
+define(["require", "exports", "stylis", "../constants", "./utils/hyphenateProperty"], function (require, exports, stylis_1, constants_1, hyphenateProperty_1) {
     "use strict";
@@ -7,6 +7,2 @@ Object.defineProperty(exports, "__esModule", { value: true });
     }
-    function compileCSSRule(cssRule) {
-        return stylis_1.serialize(stylis_1.compile(cssRule), stylis_1.middleware([stylis_1.prefixer, stylis_1.stringify]));
-    }
-    exports.compileCSSRule = compileCSSRule;
     function compileCSSRules(cssRules) {
@@ -27,4 +23,12 @@ var rules = [];
         var _a;
-        var className = options.className, media = options.media, pseudo = options.pseudo, support = options.support, property = options.property, value = options.value, unstable_cssPriority = options.unstable_cssPriority;
+        var className = options.className, media = options.media, pseudo = options.pseudo, support = options.support, property = options.property, rtlProperty = options.rtlProperty, rtlValue = options.rtlValue, value = options.value, unstable_cssPriority = options.unstable_cssPriority;
+        var classNameSelector = repeatSelector("." + className, unstable_cssPriority);
         var cssDeclaration = "{ " + hyphenateProperty_1.hyphenateProperty(property) + ": " + value + "; }";
+        var rtlClassNameSelector = null;
+        var rtlCSSDeclaration = null;
+        if (rtlProperty) {
+            rtlClassNameSelector = repeatSelector("." + constants_1.RTL_PREFIX + className, unstable_cssPriority);
+            rtlCSSDeclaration = "{ " + hyphenateProperty_1.hyphenateProperty(rtlProperty) + ": " + rtlValue + "; }";
+        }
+        var cssRule = '';
         // Should be handled by namespace plugin of Stylis, is buggy now
@@ -36,21 +40,19 @@ // Issues are reported:
             var globalSelector = (_a = /global\((.+)\)/.exec(pseudo)) === null || _a === void 0 ? void 0 : _a[1];
-            var shouldIncludeClassName = pseudo.indexOf('&') === pseudo.length - 1;
-            // TODO: should we support case when className is not included
-            // given same functionality is supported by `makeStaticStyles`?
-            var cssRule = shouldIncludeClassName
-                ? globalSelector + " { ." + className + " " + cssDeclaration + " }"
-                : globalSelector + " " + cssDeclaration;
-            return stylis_1.serialize(stylis_1.compile(cssRule), stylis_1.middleware([stylis_1.stringify]));
+            var ltrRule = classNameSelector + " " + cssDeclaration;
+            var rtlRule = rtlProperty ? rtlClassNameSelector + " " + rtlCSSDeclaration : '';
+            cssRule = globalSelector + " { " + ltrRule + "; " + rtlRule + " }";
         }
         else {
-            var classNameSelector = repeatSelector("." + className, unstable_cssPriority);
-            var cssRule = "" + classNameSelector + pseudo + " " + cssDeclaration;
-            if (media) {
-                cssRule = "@media " + media + " { " + cssRule + " }";
+            cssRule = "" + classNameSelector + pseudo + " " + cssDeclaration + ";";
+            if (rtlProperty) {
+                cssRule = cssRule + "; " + rtlClassNameSelector + pseudo + " " + rtlCSSDeclaration + ";";
             }
-            if (support) {
-                cssRule = "@supports " + support + " { " + cssRule + " }";
-            }
-            return compileCSSRule(cssRule);
         }
+        if (media) {
+            cssRule = "@media " + media + " { " + cssRule + " }";
+        }
+        if (support) {
+            cssRule = "@supports " + support + " { " + cssRule + " }";
+        }
+        return compileCSSRules(cssRule);
     }
@@ -57,0 +59,0 @@ exports.compileCSS = compileCSS;

lib-amd/runtime/compileStaticCSS.js

@@ -6,3 +6,3 @@ define(["require", "exports", "./compileCSS", "./utils/cssifyObject"], function (require, exports, compileCSS_1, cssifyObject_1) {
         var cssRule = property + " {" + cssifyObject_1.cssifyObject(value) + "}";
-        return compileCSS_1.compileCSSRule(cssRule);
+        return compileCSS_1.compileCSSRules(cssRule)[0];
     }
@@ -9,0 +9,0 @@ exports.compileStaticCSS = compileStaticCSS;

lib-amd/runtime/index.d.ts

 export { createCSSVariablesProxy } from './createCSSVariablesProxy';
-export { resolveDefinitions } from './resolveDefinitions';
 export { resolveStyleRules } from './resolveStyleRules';

lib-amd/runtime/index.js

@@ -1,8 +0,7 @@
-define(["require", "exports", "./createCSSVariablesProxy", "./resolveDefinitions", "./resolveStyleRules"], function (require, exports, createCSSVariablesProxy_1, resolveDefinitions_1, resolveStyleRules_1) {
+define(["require", "exports", "./createCSSVariablesProxy", "./resolveStyleRules"], function (require, exports, createCSSVariablesProxy_1, resolveStyleRules_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.createCSSVariablesProxy = createCSSVariablesProxy_1.createCSSVariablesProxy;
-    exports.resolveDefinitions = resolveDefinitions_1.resolveDefinitions;
     exports.resolveStyleRules = resolveStyleRules_1.resolveStyleRules;
 });
 //# sourceMappingURL=index.js.map

lib-amd/runtime/resolveStyleRules.js

@@ -11,11 +11,10 @@ define(["require", "exports", "rtl-css-js/core", "inline-style-expand-shorthand", "../constants", "./compileCSS", "./compileKeyframeCSS", "./utils/hashString", "./utils/generateCombinedMediaQuery", "./utils/isMediaQuerySelector", "./utils/isNestedSelector", "./utils/isSupportQuerySelector", "./utils/normalizeNestedProperty", "./utils/isObject"], function (require, exports, core_1, inline_style_expand_shorthand_1, constants_1, compileCSS_1, compileKeyframeCSS_1, hashString_1, generateCombinedMediaQuery_1, isMediaQuerySelector_1, isNestedSelector_1, isSupportQuerySelector_1, normalizeNestedProperty_1, isObject_1) {
         var expandedStyles = inline_style_expand_shorthand_1.expand(styles);
-        var properties = Object.keys(expandedStyles);
-        // TODO: => for-in loop
-        properties.forEach(function (property) {
+        // eslint-disable-next-line guard-for-in
+        for (var property in expandedStyles) {
             var value = expandedStyles[property];
             // eslint-disable-next-line eqeqeq
             if (value == null) {
-                return;
+                continue;
             }
-            else if (typeof value === 'string' || typeof value === 'number') {
+            if (typeof value === 'string' || typeof value === 'number') {
                 // uniq key based on property & selector, used for merging later
@@ -26,3 +25,5 @@ var key = pseudo + media + support + property;
                 var className = constants_1.HASH_PREFIX + classNameHash + (unstable_cssPriority === 0 ? '' : unstable_cssPriority);
-                var css = compileCSS_1.compileCSS({
+                var rtlDefinition = (rtlValue && { key: property, value: rtlValue }) || core_1.convertProperty(property, value);
+                var flippedInRtl = rtlDefinition.key !== property || rtlDefinition.value !== value;
+                var cssRules = compileCSS_1.compileCSS({
                     className: className,
@@ -35,21 +36,6 @@ media: media,
                     unstable_cssPriority: unstable_cssPriority,
+                    rtlProperty: flippedInRtl ? rtlDefinition.key : undefined,
+                    rtlValue: flippedInRtl ? rtlDefinition.value : undefined,
                 });
-                var rtl = (rtlValue && { key: property, value: rtlValue }) || core_1.convertProperty(property, value);
-                var flippedInRtl = rtl.key !== property || rtl.value !== value;
-                if (flippedInRtl) {
-                    var rtlCSS = compileCSS_1.compileCSS({
-                        className: constants_1.RTL_PREFIX + className,
-                        media: media,
-                        pseudo: pseudo,
-                        property: rtl.key,
-                        support: support,
-                        value: rtl.value,
-                        unstable_cssPriority: unstable_cssPriority,
-                    });
-                    // There is no sense to store RTL className as it's "r" + regular className
-                    result[key] = [className, css, rtlCSS];
-                }
-                else {
-                    result[key] = [className, css];
-                }
+                result[key] = [className, cssRules[0], cssRules[1]];
             }
@@ -96,3 +82,3 @@ else if (property === 'animationName') {
             }
-        });
+        }
         return result;
@@ -99,0 +85,0 @@ }

lib-amd/runtime/utils/cssifyObject.js

@@ -12,8 +12,3 @@ define(["require", "exports", "./hyphenateProperty"], function (require, exports, hyphenateProperty_1) {
             }
-            // prevents the semicolon after
-            // the last rule declaration
-            if (css) {
-                css += ';';
-            }
-            css += hyphenateProperty_1.hyphenateProperty(property) + ':' + value;
+            css += hyphenateProperty_1.hyphenateProperty(property) + ':' + value + ';';
         }
@@ -20,0 +15,0 @@ return css;

lib-amd/runtime/utils/hashString.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@emotion/hash"], function (require, exports, hash_1) {
+define(["require", "exports", "@emotion/hash", "../../constants"], function (require, exports, hash_1, constants_1) {
     "use strict";
@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
         var hashLength = value.length;
-        if (hashLength === 7) {
+        if (hashLength === constants_1.HASH_LENGTH) {
             return value;
         }
-        for (var i = hashLength; i < 7; i++) {
+        for (var i = hashLength; i < constants_1.HASH_LENGTH; i++) {
             value += '0';
@@ -12,0 +12,0 @@ }

lib-amd/types.d.ts

@@ -11,3 +11,3 @@ import { Properties as CSSProperties } from 'csstype';
 export interface MakeStylesOptions<Tokens> {
-    rtl?: boolean;
+    dir: 'ltr' | 'rtl';
     renderer: MakeStylesRenderer;
@@ -17,3 +17,3 @@ tokens: Tokens;
 export declare type MakeStaticStyles = ({
-    [key: string]: CSSProperties;
+    [key: string]: CSSProperties & Record<string, any>;
 } & {
@@ -40,3 +40,3 @@ '@font-face'?: {
     id: string;
-    insertDefinitions(resolvedDefinitions: MakeStylesMatchedDefinitions, rtl: boolean): string;
+    insertDefinitions(dir: 'ltr' | 'rtl', resolvedDefinitions: MakeStylesMatchedDefinitions): string;
 }

lib-commonjs/ax.d.ts

 /**
  * Function can take any number of arguments, joins classes together and deduplicates atomic declarations generated by
- * `makeStyles()`.
+ * `makeStyles()`. Handles scoped directional styles.
  *
@@ -10,3 +10,4 @@ * Classnames can be of any length, this function can take both atomic declarations and class names.
  * // not real classes
- * ax('ui-button', 'displayflex', 'displaygrid')
+ * ax('ltr', ['ui-button', 'displayflex', 'displaygrid'])
+ * ax('rtl', ['ui-button', 'displayflex', 'displaygrid'])
  * ```
@@ -17,4 +18,5 @@ *
  * 'ui-button displaygrid'
+ * 'rtl ui-button displaygrid'
  * ```
  */
-export declare function ax(...classNames: (string | false | undefined)[]): string;
+export declare function ax(dir: 'ltr' | 'rtl', classNames: (string | false | undefined)[]): string;

lib-commonjs/ax.js

@@ -6,6 +6,25 @@ "use strict";
 // Contains a mapping of previously resolved sequences of atomic classnames
-var axResults = {};
-function ax() {
-    // arguments are parsed manually to avoid double loops as TS & Babel transforms rest via an additional loop
-    // @see https://babeljs.io/docs/en/babel-plugin-transform-parameters
+var axCachedResults = {};
+var SEQUENCE_SIZE = constants_1.SEQUENCE_PREFIX.length + constants_1.HASH_LENGTH;
+/**
+ * Function can take any number of arguments, joins classes together and deduplicates atomic declarations generated by
+ * `makeStyles()`. Handles scoped directional styles.
+ *
+ * Classnames can be of any length, this function can take both atomic declarations and class names.
+ *
+ * Input:
+ * ```
+ * // not real classes
+ * ax('ltr', ['ui-button', 'displayflex', 'displaygrid'])
+ * ax('rtl', ['ui-button', 'displayflex', 'displaygrid'])
+ * ```
+ *
+ * Output:
+ * ```
+ * 'ui-button displaygrid'
+ * 'rtl ui-button displaygrid'
+ * ```
+ */
+function ax(dir, classNames) {
+    var isRtl = dir === 'rtl';
     var resultClassName = '';
@@ -15,18 +34,17 @@ // Is used as a cache key to avoid object merging
     var sequenceMappings = [];
-    for (var i = 0; i < arguments.length; i++) {
-        // eslint-disable-next-line prefer-rest-params
-        var argument = arguments[i];
-        if (typeof argument === 'string') {
+    for (var i = 0; i < classNames.length; i++) {
+        var className = classNames[i];
+        if (typeof className === 'string') {
             // All classes generated by `makeStyles()` are prefixed by a sequence hash, this allows to identify class sets
             // without parsing each className in a string
-            var sequenceIndex = argument.indexOf(constants_1.SEQUENCE_PREFIX);
+            var sequenceIndex = className.indexOf(constants_1.SEQUENCE_PREFIX);
             if (sequenceIndex === -1) {
-                resultClassName += argument + ' ';
+                resultClassName += className + ' ';
             }
             else {
-                var sequenceId = argument.slice(sequenceIndex, sequenceIndex + 9);
+                var sequenceId = className.slice(sequenceIndex, sequenceIndex + SEQUENCE_SIZE);
                 var sequenceMapping = constants_1.DEFINITION_LOOKUP_TABLE[sequenceId];
                 // Handles a case with mixed classnames, i.e. "ui-button ATOMIC_CLASSES"
                 if (sequenceIndex > 0) {
-                    resultClassName += argument.slice(0, sequenceIndex);
+                    resultClassName += className.slice(0, sequenceIndex);
                 }
@@ -37,9 +55,14 @@ if (sequenceMapping) {
                 }
+                else {
+                    // eslint-disable-next-line no-console
+                    console.error("ax(): a passed string contains an identifier (" + sequenceId + ") that does not match any entry in cache. " +
+                        ("Source string: " + className));
+                }
             }
             if (process.env.NODE_ENV !== 'production') {
-                if (argument.indexOf(constants_1.SEQUENCE_PREFIX, sequenceIndex + 1) !== -1) {
+                if (className.indexOf(constants_1.SEQUENCE_PREFIX, sequenceIndex + 1) !== -1) {
                     // eslint-disable-next-line no-console
-                    console.error("ax(): a passed string contains multiple identifiers of atomic classes, it's possible that passed " +
-                        'classes were concatenated in a wrong way. Source string: ' +
-                        argument);
+                    console.error('ax(): a passed string contains multiple identifiers of atomic classes (classes that start with ' +
+                        ("\"" + constants_1.SEQUENCE_PREFIX + "\"), it's possible that passed classes were concatenated in a wrong way. Source ") +
+                        ("string: " + className));
                 }
@@ -49,7 +72,16 @@ }
     }
+    // .slice() there allows to avoid trailing space for non-atomic classes
+    // "ui-button ui-flex " => "ui-button ui-flex"
     if (sequenceMatch === '') {
-        // .slice() there and later allows to avoid trailing space
         return resultClassName.slice(0, -1);
     }
-    var axResult = axResults[sequenceMatch];
+    // Is required to have different results for cache lookups and avoid collisions:
+    // - ltr "__seq1__seq2__seq3"
+    // - rtl "__seq1__seq2__seq3r"
+    if (isRtl) {
+        sequenceMatch += constants_1.RTL_PREFIX;
+    }
+    // It's safe to reuse results from continuous merging as results are stable
+    // "__seq1 ... __seq2 ..." => "__seq12 ..."
+    var axResult = axCachedResults[sequenceMatch];
     if (axResult !== undefined) {
@@ -67,3 +99,10 @@ return resultClassName + axResult;
     for (var property in resultDefinitions) {
-        atomicClassNames += resultDefinitions[property][0] + ' ';
+        var resultDefinition = resultDefinitions[property];
+        if (isRtl) {
+            var rtlPrefix = isRtl && resultDefinition[2] ? constants_1.RTL_PREFIX : '';
+            atomicClassNames += rtlPrefix + resultDefinition[0] + ' ';
+        }
+        else {
+            atomicClassNames += resultDefinition[0] + ' ';
+        }
     }
@@ -74,3 +113,3 @@ atomicClassNames = atomicClassNames.slice(0, -1);
     atomicClassNames = newSequenceHash + ' ' + atomicClassNames;
-    axResults[sequenceMatch] = atomicClassNames;
+    axCachedResults[sequenceMatch] = atomicClassNames;
     constants_1.DEFINITION_LOOKUP_TABLE[newSequenceHash] = resultDefinitions;
@@ -77,0 +116,0 @@ return resultClassName + atomicClassNames;

lib-commonjs/constants.d.ts

 import { MakeStylesMatchedDefinitions } from './types';
-/**
- * NOTE:
- * This is gonna be always `false` in testing environment(jest/jsdom) because jsdom is missing `supports` implementation
- * @see https://github.com/jsdom/jsdom/issues/2026
- */
-export declare const CAN_USE_CSS_VARIABLES: boolean;
-export declare const SEQUENCE_PREFIX = "__";
 export declare const HASH_PREFIX = "f";
+export declare const HASH_LENGTH = 7;
+/** A prefix that identifies that classname string is defined for RTL. */
 export declare const RTL_PREFIX = "r";
+export declare const SEQUENCE_PREFIX = "__";
 export declare const DEFINITION_LOOKUP_TABLE: Record<string, MakeStylesMatchedDefinitions>;

lib-commonjs/constants.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-/**
- * NOTE:
- * This is gonna be always `false` in testing environment(jest/jsdom) because jsdom is missing `supports` implementation
- * @see https://github.com/jsdom/jsdom/issues/2026
- */
-exports.CAN_USE_CSS_VARIABLES = window.CSS && typeof CSS.supports === 'function' && CSS.supports('color', 'var(--c)');
-exports.SEQUENCE_PREFIX = '__';
 exports.HASH_PREFIX = 'f';
+exports.HASH_LENGTH = 7;
+/** A prefix that identifies that classname string is defined for RTL. */
 exports.RTL_PREFIX = 'r';
+exports.SEQUENCE_PREFIX = '__';
 exports.DEFINITION_LOOKUP_TABLE = {};
 //# sourceMappingURL=constants.js.map

lib-commonjs/makeStaticStyles.js

@@ -18,4 +18,3 @@ "use strict";
             var styleRules = stylesSet_1[_i];
-            var resolvedStyleRules = resolveStaticStyleRules_1.resolveStaticStyleRules(styleRules);
-            options.renderer.insertDefinitions(resolvedStyleRules, false /** static rules do not support RTL transforms */);
+            options.renderer.insertDefinitions('ltr' /** static rules do not support RTL transforms */, resolveStaticStyleRules_1.resolveStaticStyleRules(styleRules));
         }
@@ -22,0 +21,0 @@ styleCache[cacheKey] = true;

lib-commonjs/makeStyles.js

@@ -6,25 +6,49 @@ "use strict";
 var hashString_1 = require("./runtime/utils/hashString");
+function resolveClasses(resolvedStyles, dir, renderer) {
+    var resolvedClasses = {};
+    // eslint-disable-next-line guard-for-in
+    for (var slotName in resolvedStyles) {
+        var slotClasses = renderer.insertDefinitions(dir, resolvedStyles[slotName]);
+        var sequenceHash = constants_1.SEQUENCE_PREFIX + hashString_1.hashString(slotClasses);
+        var resultSlotClasses = sequenceHash + ' ' + slotClasses;
+        constants_1.DEFINITION_LOOKUP_TABLE[sequenceHash] = resolvedStyles[slotName];
+        resolvedClasses[slotName] = resultSlotClasses;
+    }
+    return resolvedClasses;
+}
 function makeStyles(stylesBySlots, unstable_cssPriority) {
     if (unstable_cssPriority === void 0) { unstable_cssPriority = 0; }
+    var resolvedStyles = null;
     var resolvedClasses = null;
+    var resolvedClassesRtl = null;
     var insertionCache = {};
     function computeClasses(options) {
-        if (resolvedClasses === null || insertionCache[options.renderer.id] === undefined) {
-            var tokens = index_1.createCSSVariablesProxy(options.tokens);
-            resolvedClasses = {};
+        var dir = options.dir, renderer = options.renderer, tokens = options.tokens;
+        if (resolvedStyles === null) {
+            resolvedStyles = {};
+            var tokensProxy = index_1.createCSSVariablesProxy(tokens);
             // eslint-disable-next-line guard-for-in
             for (var slotName in stylesBySlots) {
-                // TODO: Miro says that it should be done once as there is no sense to resolve the same styles
                 var slotStyles = stylesBySlots[slotName];
-                var preparedSlotStyles = typeof slotStyles === 'function' ? slotStyles(tokens) : slotStyles;
-                var resolvedSlotStyles = index_1.resolveStyleRules(preparedSlotStyles, unstable_cssPriority);
-                var slotClasses = options.renderer.insertDefinitions(resolvedSlotStyles, !!options.rtl);
-                var sequenceHash = constants_1.SEQUENCE_PREFIX + hashString_1.hashString(slotClasses);
-                var resultSlotClasses = sequenceHash + ' ' + slotClasses;
-                constants_1.DEFINITION_LOOKUP_TABLE[sequenceHash] = resolvedSlotStyles;
-                resolvedClasses[slotName] = resultSlotClasses;
+                var preparedSlotStyles = typeof slotStyles === 'function'
+                    ? slotStyles(tokensProxy)
+                    : slotStyles;
+                resolvedStyles[slotName] = index_1.resolveStyleRules(preparedSlotStyles, unstable_cssPriority);
+            }
+        }
+        if (dir === 'rtl') {
+            // As RTL classes are different they should have a different cache key for insertion
+            var rendererId = renderer.id + 'r';
+            if (resolvedClassesRtl === null || insertionCache[rendererId] === undefined) {
+                resolvedClassesRtl = resolveClasses(resolvedStyles, dir, renderer);
+                insertionCache[rendererId] = true;
+            }
+        }
+        else {
+            if (resolvedClasses === null || insertionCache[renderer.id] === undefined) {
+                resolvedClasses = resolveClasses(resolvedStyles, dir, renderer);
                 insertionCache[options.renderer.id] = true;
             }
         }
-        return resolvedClasses;
+        return dir === 'ltr' ? resolvedClasses : resolvedClassesRtl;
     }
@@ -31,0 +55,0 @@ return computeClasses;

lib-commonjs/renderer/createDOMRenderer.js

@@ -21,10 +21,10 @@ "use strict";
         id: "d" + lastIndex++,
-        insertDefinitions: function insertStyles(definitions, rtl) {
+        insertDefinitions: function insertStyles(dir, definitions) {
             var classes = '';
             for (var propName in definitions) {
                 var definition = definitions[propName];
-                // className || css || rtlCSS
+                // 👆 [className, css, rtlCSS?]
                 var className = definition[0];
                 var rtlCSS = definition[2];
-                var ruleClassName = className && (rtl && rtlCSS ? constants_1.RTL_PREFIX + className : className);
+                var ruleClassName = className && (dir === 'rtl' && rtlCSS ? constants_1.RTL_PREFIX + className : className);
                 if (ruleClassName) {
@@ -39,6 +39,17 @@ // Should be done always to return classes even if they have been already inserted to DOM
                 var css = definition[1];
-                var ruleCSS = rtl ? rtlCSS || css : css;
+                var ruleCSS = dir === 'rtl' ? rtlCSS || css : css;
                 renderer.insertionCache[cacheKey] = true;
-                renderer.styleElement.sheet.insertRule(ruleCSS, renderer.index);
-                renderer.index++;
+                try {
+                    if (renderer.styleElement.sheet instanceof CSSStyleSheet) {
+                        renderer.styleElement.sheet.insertRule(ruleCSS, renderer.index);
+                        renderer.index++;
+                    }
+                }
+                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);
+                    }
+                }
             }
@@ -57,2 +68,14 @@ return classes.slice(0, -1);
 exports.resetDOMRenderer = resetDOMRenderer;
+/**
+ * Suffixes to be ignored in case of error
+ */
+var ignoreSuffixes = [
+    '-moz-placeholder',
+    '-moz-focus-inner',
+    '-moz-focusring',
+    '-ms-input-placeholder',
+    '-moz-read-write',
+    '-moz-read-only',
+].join('|');
+var ignoreSuffixesRegex = new RegExp(":(" + ignoreSuffixes + ")");
 //# sourceMappingURL=createDOMRenderer.js.map

lib-commonjs/runtime/compileCSS.d.ts

@@ -1,2 +0,2 @@
-interface CompileCSSOptions {
+export interface CompileCSSOptions {
     className: string;
@@ -8,7 +8,7 @@ pseudo: string;
     value: number | string;
+    rtlProperty?: string;
+    rtlValue?: number | string;
     unstable_cssPriority: number;
 }
-export declare function compileCSSRule(cssRule: string): string;
 export declare function compileCSSRules(cssRules: string): string[];
-export declare function compileCSS(options: CompileCSSOptions): string;
-export {};
+export declare function compileCSS(options: CompileCSSOptions): [string, string?];

lib-commonjs/runtime/compileCSS.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var stylis_1 = require("stylis");
+var constants_1 = require("../constants");
 var hyphenateProperty_1 = require("./utils/hyphenateProperty");
@@ -8,6 +9,2 @@ function repeatSelector(selector, times) {
 }
-function compileCSSRule(cssRule) {
-    return stylis_1.serialize(stylis_1.compile(cssRule), stylis_1.middleware([stylis_1.prefixer, stylis_1.stringify]));
-}
-exports.compileCSSRule = compileCSSRule;
 function compileCSSRules(cssRules) {
@@ -28,4 +25,12 @@ var rules = [];
     var _a;
-    var className = options.className, media = options.media, pseudo = options.pseudo, support = options.support, property = options.property, value = options.value, unstable_cssPriority = options.unstable_cssPriority;
+    var className = options.className, media = options.media, pseudo = options.pseudo, support = options.support, property = options.property, rtlProperty = options.rtlProperty, rtlValue = options.rtlValue, value = options.value, unstable_cssPriority = options.unstable_cssPriority;
+    var classNameSelector = repeatSelector("." + className, unstable_cssPriority);
     var cssDeclaration = "{ " + hyphenateProperty_1.hyphenateProperty(property) + ": " + value + "; }";
+    var rtlClassNameSelector = null;
+    var rtlCSSDeclaration = null;
+    if (rtlProperty) {
+        rtlClassNameSelector = repeatSelector("." + constants_1.RTL_PREFIX + className, unstable_cssPriority);
+        rtlCSSDeclaration = "{ " + hyphenateProperty_1.hyphenateProperty(rtlProperty) + ": " + rtlValue + "; }";
+    }
+    var cssRule = '';
     // Should be handled by namespace plugin of Stylis, is buggy now
@@ -37,23 +42,21 @@ // Issues are reported:
         var globalSelector = (_a = /global\((.+)\)/.exec(pseudo)) === null || _a === void 0 ? void 0 : _a[1];
-        var shouldIncludeClassName = pseudo.indexOf('&') === pseudo.length - 1;
-        // TODO: should we support case when className is not included
-        // given same functionality is supported by `makeStaticStyles`?
-        var cssRule = shouldIncludeClassName
-            ? globalSelector + " { ." + className + " " + cssDeclaration + " }"
-            : globalSelector + " " + cssDeclaration;
-        return stylis_1.serialize(stylis_1.compile(cssRule), stylis_1.middleware([stylis_1.stringify]));
+        var ltrRule = classNameSelector + " " + cssDeclaration;
+        var rtlRule = rtlProperty ? rtlClassNameSelector + " " + rtlCSSDeclaration : '';
+        cssRule = globalSelector + " { " + ltrRule + "; " + rtlRule + " }";
     }
     else {
-        var classNameSelector = repeatSelector("." + className, unstable_cssPriority);
-        var cssRule = "" + classNameSelector + pseudo + " " + cssDeclaration;
-        if (media) {
-            cssRule = "@media " + media + " { " + cssRule + " }";
+        cssRule = "" + classNameSelector + pseudo + " " + cssDeclaration + ";";
+        if (rtlProperty) {
+            cssRule = cssRule + "; " + rtlClassNameSelector + pseudo + " " + rtlCSSDeclaration + ";";
         }
-        if (support) {
-            cssRule = "@supports " + support + " { " + cssRule + " }";
-        }
-        return compileCSSRule(cssRule);
     }
+    if (media) {
+        cssRule = "@media " + media + " { " + cssRule + " }";
+    }
+    if (support) {
+        cssRule = "@supports " + support + " { " + cssRule + " }";
+    }
+    return compileCSSRules(cssRule);
 }
 exports.compileCSS = compileCSS;
 //# sourceMappingURL=compileCSS.js.map

lib-commonjs/runtime/compileStaticCSS.js

@@ -7,5 +7,5 @@ "use strict";
     var cssRule = property + " {" + cssifyObject_1.cssifyObject(value) + "}";
-    return compileCSS_1.compileCSSRule(cssRule);
+    return compileCSS_1.compileCSSRules(cssRule)[0];
 }
 exports.compileStaticCSS = compileStaticCSS;
 //# sourceMappingURL=compileStaticCSS.js.map

lib-commonjs/runtime/index.d.ts

 export { createCSSVariablesProxy } from './createCSSVariablesProxy';
-export { resolveDefinitions } from './resolveDefinitions';
 export { resolveStyleRules } from './resolveStyleRules';

lib-commonjs/runtime/index.js

@@ -5,6 +5,4 @@ "use strict";
 exports.createCSSVariablesProxy = createCSSVariablesProxy_1.createCSSVariablesProxy;
-var resolveDefinitions_1 = require("./resolveDefinitions");
-exports.resolveDefinitions = resolveDefinitions_1.resolveDefinitions;
 var resolveStyleRules_1 = require("./resolveStyleRules");
 exports.resolveStyleRules = resolveStyleRules_1.resolveStyleRules;
 //# sourceMappingURL=index.js.map

lib-commonjs/runtime/resolveStyleRules.js

@@ -22,11 +22,10 @@ "use strict";
     var expandedStyles = inline_style_expand_shorthand_1.expand(styles);
-    var properties = Object.keys(expandedStyles);
-    // TODO: => for-in loop
-    properties.forEach(function (property) {
+    // eslint-disable-next-line guard-for-in
+    for (var property in expandedStyles) {
         var value = expandedStyles[property];
         // eslint-disable-next-line eqeqeq
         if (value == null) {
-            return;
+            continue;
         }
-        else if (typeof value === 'string' || typeof value === 'number') {
+        if (typeof value === 'string' || typeof value === 'number') {
             // uniq key based on property & selector, used for merging later
@@ -37,3 +36,5 @@ var key = pseudo + media + support + property;
             var className = constants_1.HASH_PREFIX + classNameHash + (unstable_cssPriority === 0 ? '' : unstable_cssPriority);
-            var css = compileCSS_1.compileCSS({
+            var rtlDefinition = (rtlValue && { key: property, value: rtlValue }) || core_1.convertProperty(property, value);
+            var flippedInRtl = rtlDefinition.key !== property || rtlDefinition.value !== value;
+            var cssRules = compileCSS_1.compileCSS({
                 className: className,
@@ -46,21 +47,6 @@ media: media,
                 unstable_cssPriority: unstable_cssPriority,
+                rtlProperty: flippedInRtl ? rtlDefinition.key : undefined,
+                rtlValue: flippedInRtl ? rtlDefinition.value : undefined,
             });
-            var rtl = (rtlValue && { key: property, value: rtlValue }) || core_1.convertProperty(property, value);
-            var flippedInRtl = rtl.key !== property || rtl.value !== value;
-            if (flippedInRtl) {
-                var rtlCSS = compileCSS_1.compileCSS({
-                    className: constants_1.RTL_PREFIX + className,
-                    media: media,
-                    pseudo: pseudo,
-                    property: rtl.key,
-                    support: support,
-                    value: rtl.value,
-                    unstable_cssPriority: unstable_cssPriority,
-                });
-                // There is no sense to store RTL className as it's "r" + regular className
-                result[key] = [className, css, rtlCSS];
-            }
-            else {
-                result[key] = [className, css];
-            }
+            result[key] = [className, cssRules[0], cssRules[1]];
         }
@@ -107,3 +93,3 @@ else if (property === 'animationName') {
         }
-    });
+    }
     return result;
@@ -110,0 +96,0 @@ }

lib-commonjs/runtime/utils/cssifyObject.js

@@ -12,8 +12,3 @@ "use strict";
         }
-        // prevents the semicolon after
-        // the last rule declaration
-        if (css) {
-            css += ';';
-        }
-        css += hyphenateProperty_1.hyphenateProperty(property) + ':' + value;
+        css += hyphenateProperty_1.hyphenateProperty(property) + ':' + value + ';';
     }
@@ -20,0 +15,0 @@ return css;

lib-commonjs/runtime/utils/hashString.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var hash_1 = require("@emotion/hash");
+var constants_1 = require("../../constants");
 function padEndHash(value) {
     var hashLength = value.length;
-    if (hashLength === 7) {
+    if (hashLength === constants_1.HASH_LENGTH) {
         return value;
     }
-    for (var i = hashLength; i < 7; i++) {
+    for (var i = hashLength; i < constants_1.HASH_LENGTH; i++) {
         value += '0';
@@ -11,0 +12,0 @@ }

lib-commonjs/types.d.ts

@@ -11,3 +11,3 @@ import { Properties as CSSProperties } from 'csstype';
 export interface MakeStylesOptions<Tokens> {
-    rtl?: boolean;
+    dir: 'ltr' | 'rtl';
     renderer: MakeStylesRenderer;
@@ -17,3 +17,3 @@ tokens: Tokens;
 export declare type MakeStaticStyles = ({
-    [key: string]: CSSProperties;
+    [key: string]: CSSProperties & Record<string, any>;
 } & {
@@ -40,3 +40,3 @@ '@font-face'?: {
     id: string;
-    insertDefinitions(resolvedDefinitions: MakeStylesMatchedDefinitions, rtl: boolean): string;
+    insertDefinitions(dir: 'ltr' | 'rtl', resolvedDefinitions: MakeStylesMatchedDefinitions): string;
 }

lib/ax.d.ts

 /**
  * Function can take any number of arguments, joins classes together and deduplicates atomic declarations generated by
- * `makeStyles()`.
+ * `makeStyles()`. Handles scoped directional styles.
  *
@@ -10,3 +10,4 @@ * Classnames can be of any length, this function can take both atomic declarations and class names.
  * // not real classes
- * ax('ui-button', 'displayflex', 'displaygrid')
+ * ax('ltr', ['ui-button', 'displayflex', 'displaygrid'])
+ * ax('rtl', ['ui-button', 'displayflex', 'displaygrid'])
  * ```
@@ -17,4 +18,5 @@ *
  * 'ui-button displaygrid'
+ * 'rtl ui-button displaygrid'
  * ```
  */
-export declare function ax(...classNames: (string | false | undefined)[]): string;
+export declare function ax(dir: 'ltr' | 'rtl', classNames: (string | false | undefined)[]): string;

lib/ax.js

@@ -1,8 +0,27 @@
-import { DEFINITION_LOOKUP_TABLE, SEQUENCE_PREFIX } from './constants';
+import { DEFINITION_LOOKUP_TABLE, HASH_LENGTH, RTL_PREFIX, SEQUENCE_PREFIX } from './constants';
 import { hashString } from './runtime/utils/hashString';
 // Contains a mapping of previously resolved sequences of atomic classnames
-var axResults = {};
-export function ax() {
-    // arguments are parsed manually to avoid double loops as TS & Babel transforms rest via an additional loop
-    // @see https://babeljs.io/docs/en/babel-plugin-transform-parameters
+var axCachedResults = {};
+var SEQUENCE_SIZE = SEQUENCE_PREFIX.length + HASH_LENGTH;
+/**
+ * Function can take any number of arguments, joins classes together and deduplicates atomic declarations generated by
+ * `makeStyles()`. Handles scoped directional styles.
+ *
+ * Classnames can be of any length, this function can take both atomic declarations and class names.
+ *
+ * Input:
+ * ```
+ * // not real classes
+ * ax('ltr', ['ui-button', 'displayflex', 'displaygrid'])
+ * ax('rtl', ['ui-button', 'displayflex', 'displaygrid'])
+ * ```
+ *
+ * Output:
+ * ```
+ * 'ui-button displaygrid'
+ * 'rtl ui-button displaygrid'
+ * ```
+ */
+export function ax(dir, classNames) {
+    var isRtl = dir === 'rtl';
     var resultClassName = '';
@@ -12,18 +31,17 @@ // Is used as a cache key to avoid object merging
     var sequenceMappings = [];
-    for (var i = 0; i < arguments.length; i++) {
-        // eslint-disable-next-line prefer-rest-params
-        var argument = arguments[i];
-        if (typeof argument === 'string') {
+    for (var i = 0; i < classNames.length; i++) {
+        var className = classNames[i];
+        if (typeof className === 'string') {
             // All classes generated by `makeStyles()` are prefixed by a sequence hash, this allows to identify class sets
             // without parsing each className in a string
-            var sequenceIndex = argument.indexOf(SEQUENCE_PREFIX);
+            var sequenceIndex = className.indexOf(SEQUENCE_PREFIX);
             if (sequenceIndex === -1) {
-                resultClassName += argument + ' ';
+                resultClassName += className + ' ';
             }
             else {
-                var sequenceId = argument.slice(sequenceIndex, sequenceIndex + 9);
+                var sequenceId = className.slice(sequenceIndex, sequenceIndex + SEQUENCE_SIZE);
                 var sequenceMapping = DEFINITION_LOOKUP_TABLE[sequenceId];
                 // Handles a case with mixed classnames, i.e. "ui-button ATOMIC_CLASSES"
                 if (sequenceIndex > 0) {
-                    resultClassName += argument.slice(0, sequenceIndex);
+                    resultClassName += className.slice(0, sequenceIndex);
                 }
@@ -34,9 +52,14 @@ if (sequenceMapping) {
                 }
+                else {
+                    // eslint-disable-next-line no-console
+                    console.error("ax(): a passed string contains an identifier (" + sequenceId + ") that does not match any entry in cache. " +
+                        ("Source string: " + className));
+                }
             }
             if (process.env.NODE_ENV !== 'production') {
-                if (argument.indexOf(SEQUENCE_PREFIX, sequenceIndex + 1) !== -1) {
+                if (className.indexOf(SEQUENCE_PREFIX, sequenceIndex + 1) !== -1) {
                     // eslint-disable-next-line no-console
-                    console.error("ax(): a passed string contains multiple identifiers of atomic classes, it's possible that passed " +
-                        'classes were concatenated in a wrong way. Source string: ' +
-                        argument);
+                    console.error('ax(): a passed string contains multiple identifiers of atomic classes (classes that start with ' +
+                        ("\"" + SEQUENCE_PREFIX + "\"), it's possible that passed classes were concatenated in a wrong way. Source ") +
+                        ("string: " + className));
                 }
@@ -46,7 +69,16 @@ }
     }
+    // .slice() there allows to avoid trailing space for non-atomic classes
+    // "ui-button ui-flex " => "ui-button ui-flex"
     if (sequenceMatch === '') {
-        // .slice() there and later allows to avoid trailing space
         return resultClassName.slice(0, -1);
     }
-    var axResult = axResults[sequenceMatch];
+    // Is required to have different results for cache lookups and avoid collisions:
+    // - ltr "__seq1__seq2__seq3"
+    // - rtl "__seq1__seq2__seq3r"
+    if (isRtl) {
+        sequenceMatch += RTL_PREFIX;
+    }
+    // It's safe to reuse results from continuous merging as results are stable
+    // "__seq1 ... __seq2 ..." => "__seq12 ..."
+    var axResult = axCachedResults[sequenceMatch];
     if (axResult !== undefined) {
@@ -64,3 +96,10 @@ return resultClassName + axResult;
     for (var property in resultDefinitions) {
-        atomicClassNames += resultDefinitions[property][0] + ' ';
+        var resultDefinition = resultDefinitions[property];
+        if (isRtl) {
+            var rtlPrefix = isRtl && resultDefinition[2] ? RTL_PREFIX : '';
+            atomicClassNames += rtlPrefix + resultDefinition[0] + ' ';
+        }
+        else {
+            atomicClassNames += resultDefinition[0] + ' ';
+        }
     }
@@ -71,3 +110,3 @@ atomicClassNames = atomicClassNames.slice(0, -1);
     atomicClassNames = newSequenceHash + ' ' + atomicClassNames;
-    axResults[sequenceMatch] = atomicClassNames;
+    axCachedResults[sequenceMatch] = atomicClassNames;
     DEFINITION_LOOKUP_TABLE[newSequenceHash] = resultDefinitions;
@@ -74,0 +113,0 @@ return resultClassName + atomicClassNames;

lib/constants.d.ts

 import { MakeStylesMatchedDefinitions } from './types';
-/**
- * NOTE:
- * This is gonna be always `false` in testing environment(jest/jsdom) because jsdom is missing `supports` implementation
- * @see https://github.com/jsdom/jsdom/issues/2026
- */
-export declare const CAN_USE_CSS_VARIABLES: boolean;
-export declare const SEQUENCE_PREFIX = "__";
 export declare const HASH_PREFIX = "f";
+export declare const HASH_LENGTH = 7;
+/** A prefix that identifies that classname string is defined for RTL. */
 export declare const RTL_PREFIX = "r";
+export declare const SEQUENCE_PREFIX = "__";
 export declare const DEFINITION_LOOKUP_TABLE: Record<string, MakeStylesMatchedDefinitions>;

lib/constants.js

@@ -1,11 +0,7 @@
-/**
- * NOTE:
- * This is gonna be always `false` in testing environment(jest/jsdom) because jsdom is missing `supports` implementation
- * @see https://github.com/jsdom/jsdom/issues/2026
- */
-export var CAN_USE_CSS_VARIABLES = window.CSS && typeof CSS.supports === 'function' && CSS.supports('color', 'var(--c)');
-export var SEQUENCE_PREFIX = '__';
 export var HASH_PREFIX = 'f';
+export var HASH_LENGTH = 7;
+/** A prefix that identifies that classname string is defined for RTL. */
 export var RTL_PREFIX = 'r';
+export var SEQUENCE_PREFIX = '__';
 export var DEFINITION_LOOKUP_TABLE = {};
 //# sourceMappingURL=constants.js.map

lib/makeStaticStyles.js

@@ -16,4 +16,3 @@ import { resolveStaticStyleRules } from './runtime/resolveStaticStyleRules';
             var styleRules = stylesSet_1[_i];
-            var resolvedStyleRules = resolveStaticStyleRules(styleRules);
-            options.renderer.insertDefinitions(resolvedStyleRules, false /** static rules do not support RTL transforms */);
+            options.renderer.insertDefinitions('ltr' /** static rules do not support RTL transforms */, resolveStaticStyleRules(styleRules));
         }
@@ -20,0 +19,0 @@ styleCache[cacheKey] = true;

lib/makeStyles.js

 import { DEFINITION_LOOKUP_TABLE, SEQUENCE_PREFIX } from './constants';
 import { createCSSVariablesProxy, resolveStyleRules } from './runtime/index';
 import { hashString } from './runtime/utils/hashString';
+function resolveClasses(resolvedStyles, dir, renderer) {
+    var resolvedClasses = {};
+    // eslint-disable-next-line guard-for-in
+    for (var slotName in resolvedStyles) {
+        var slotClasses = renderer.insertDefinitions(dir, resolvedStyles[slotName]);
+        var sequenceHash = SEQUENCE_PREFIX + hashString(slotClasses);
+        var resultSlotClasses = sequenceHash + ' ' + slotClasses;
+        DEFINITION_LOOKUP_TABLE[sequenceHash] = resolvedStyles[slotName];
+        resolvedClasses[slotName] = resultSlotClasses;
+    }
+    return resolvedClasses;
+}
 export function makeStyles(stylesBySlots, unstable_cssPriority) {
     if (unstable_cssPriority === void 0) { unstable_cssPriority = 0; }
+    var resolvedStyles = null;
     var resolvedClasses = null;
+    var resolvedClassesRtl = null;
     var insertionCache = {};
     function computeClasses(options) {
-        if (resolvedClasses === null || insertionCache[options.renderer.id] === undefined) {
-            var tokens = createCSSVariablesProxy(options.tokens);
-            resolvedClasses = {};
+        var dir = options.dir, renderer = options.renderer, tokens = options.tokens;
+        if (resolvedStyles === null) {
+            resolvedStyles = {};
+            var tokensProxy = createCSSVariablesProxy(tokens);
             // eslint-disable-next-line guard-for-in
             for (var slotName in stylesBySlots) {
-                // TODO: Miro says that it should be done once as there is no sense to resolve the same styles
                 var slotStyles = stylesBySlots[slotName];
-                var preparedSlotStyles = typeof slotStyles === 'function' ? slotStyles(tokens) : slotStyles;
-                var resolvedSlotStyles = resolveStyleRules(preparedSlotStyles, unstable_cssPriority);
-                var slotClasses = options.renderer.insertDefinitions(resolvedSlotStyles, !!options.rtl);
-                var sequenceHash = SEQUENCE_PREFIX + hashString(slotClasses);
-                var resultSlotClasses = sequenceHash + ' ' + slotClasses;
-                DEFINITION_LOOKUP_TABLE[sequenceHash] = resolvedSlotStyles;
-                resolvedClasses[slotName] = resultSlotClasses;
+                var preparedSlotStyles = typeof slotStyles === 'function'
+                    ? slotStyles(tokensProxy)
+                    : slotStyles;
+                resolvedStyles[slotName] = resolveStyleRules(preparedSlotStyles, unstable_cssPriority);
+            }
+        }
+        if (dir === 'rtl') {
+            // As RTL classes are different they should have a different cache key for insertion
+            var rendererId = renderer.id + 'r';
+            if (resolvedClassesRtl === null || insertionCache[rendererId] === undefined) {
+                resolvedClassesRtl = resolveClasses(resolvedStyles, dir, renderer);
+                insertionCache[rendererId] = true;
+            }
+        }
+        else {
+            if (resolvedClasses === null || insertionCache[renderer.id] === undefined) {
+                resolvedClasses = resolveClasses(resolvedStyles, dir, renderer);
                 insertionCache[options.renderer.id] = true;
             }
         }
-        return resolvedClasses;
+        return dir === 'ltr' ? resolvedClasses : resolvedClassesRtl;
     }
@@ -28,0 +52,0 @@ return computeClasses;

lib/renderer/createDOMRenderer.js

@@ -19,10 +19,10 @@ import { RTL_PREFIX } from '../constants';
         id: "d" + lastIndex++,
-        insertDefinitions: function insertStyles(definitions, rtl) {
+        insertDefinitions: function insertStyles(dir, definitions) {
             var classes = '';
             for (var propName in definitions) {
                 var definition = definitions[propName];
-                // className || css || rtlCSS
+                // 👆 [className, css, rtlCSS?]
                 var className = definition[0];
                 var rtlCSS = definition[2];
-                var ruleClassName = className && (rtl && rtlCSS ? RTL_PREFIX + className : className);
+                var ruleClassName = className && (dir === 'rtl' && rtlCSS ? RTL_PREFIX + className : className);
                 if (ruleClassName) {
@@ -37,6 +37,17 @@ // Should be done always to return classes even if they have been already inserted to DOM
                 var css = definition[1];
-                var ruleCSS = rtl ? rtlCSS || css : css;
+                var ruleCSS = dir === 'rtl' ? rtlCSS || css : css;
                 renderer.insertionCache[cacheKey] = true;
-                renderer.styleElement.sheet.insertRule(ruleCSS, renderer.index);
-                renderer.index++;
+                try {
+                    if (renderer.styleElement.sheet instanceof CSSStyleSheet) {
+                        renderer.styleElement.sheet.insertRule(ruleCSS, renderer.index);
+                        renderer.index++;
+                    }
+                }
+                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);
+                    }
+                }
             }
@@ -53,2 +64,14 @@ return classes.slice(0, -1);
 }
+/**
+ * Suffixes to be ignored in case of error
+ */
+var ignoreSuffixes = [
+    '-moz-placeholder',
+    '-moz-focus-inner',
+    '-moz-focusring',
+    '-ms-input-placeholder',
+    '-moz-read-write',
+    '-moz-read-only',
+].join('|');
+var ignoreSuffixesRegex = new RegExp(":(" + ignoreSuffixes + ")");
 //# sourceMappingURL=createDOMRenderer.js.map

lib/runtime/compileCSS.d.ts

@@ -1,2 +0,2 @@
-interface CompileCSSOptions {
+export interface CompileCSSOptions {
     className: string;
@@ -8,7 +8,7 @@ pseudo: string;
     value: number | string;
+    rtlProperty?: string;
+    rtlValue?: number | string;
     unstable_cssPriority: number;
 }
-export declare function compileCSSRule(cssRule: string): string;
 export declare function compileCSSRules(cssRules: string): string[];
-export declare function compileCSS(options: CompileCSSOptions): string;
-export {};
+export declare function compileCSS(options: CompileCSSOptions): [string, string?];

lib/runtime/compileCSS.js

 import { compile, middleware, prefixer, rulesheet, serialize, stringify } from 'stylis';
+import { RTL_PREFIX } from '../constants';
 import { hyphenateProperty } from './utils/hyphenateProperty';
@@ -6,5 +7,2 @@ function repeatSelector(selector, times) {
 }
-export function compileCSSRule(cssRule) {
-    return serialize(compile(cssRule), middleware([prefixer, stringify]));
-}
 export function compileCSSRules(cssRules) {
@@ -24,4 +22,12 @@ var rules = [];
     var _a;
-    var className = options.className, media = options.media, pseudo = options.pseudo, support = options.support, property = options.property, value = options.value, unstable_cssPriority = options.unstable_cssPriority;
+    var className = options.className, media = options.media, pseudo = options.pseudo, support = options.support, property = options.property, rtlProperty = options.rtlProperty, rtlValue = options.rtlValue, value = options.value, unstable_cssPriority = options.unstable_cssPriority;
+    var classNameSelector = repeatSelector("." + className, unstable_cssPriority);
     var cssDeclaration = "{ " + hyphenateProperty(property) + ": " + value + "; }";
+    var rtlClassNameSelector = null;
+    var rtlCSSDeclaration = null;
+    if (rtlProperty) {
+        rtlClassNameSelector = repeatSelector("." + RTL_PREFIX + className, unstable_cssPriority);
+        rtlCSSDeclaration = "{ " + hyphenateProperty(rtlProperty) + ": " + rtlValue + "; }";
+    }
+    var cssRule = '';
     // Should be handled by namespace plugin of Stylis, is buggy now
@@ -33,22 +39,20 @@ // Issues are reported:
         var globalSelector = (_a = /global\((.+)\)/.exec(pseudo)) === null || _a === void 0 ? void 0 : _a[1];
-        var shouldIncludeClassName = pseudo.indexOf('&') === pseudo.length - 1;
-        // TODO: should we support case when className is not included
-        // given same functionality is supported by `makeStaticStyles`?
-        var cssRule = shouldIncludeClassName
-            ? globalSelector + " { ." + className + " " + cssDeclaration + " }"
-            : globalSelector + " " + cssDeclaration;
-        return serialize(compile(cssRule), middleware([stringify]));
+        var ltrRule = classNameSelector + " " + cssDeclaration;
+        var rtlRule = rtlProperty ? rtlClassNameSelector + " " + rtlCSSDeclaration : '';
+        cssRule = globalSelector + " { " + ltrRule + "; " + rtlRule + " }";
     }
     else {
-        var classNameSelector = repeatSelector("." + className, unstable_cssPriority);
-        var cssRule = "" + classNameSelector + pseudo + " " + cssDeclaration;
-        if (media) {
-            cssRule = "@media " + media + " { " + cssRule + " }";
+        cssRule = "" + classNameSelector + pseudo + " " + cssDeclaration + ";";
+        if (rtlProperty) {
+            cssRule = cssRule + "; " + rtlClassNameSelector + pseudo + " " + rtlCSSDeclaration + ";";
         }
-        if (support) {
-            cssRule = "@supports " + support + " { " + cssRule + " }";
-        }
-        return compileCSSRule(cssRule);
     }
+    if (media) {
+        cssRule = "@media " + media + " { " + cssRule + " }";
+    }
+    if (support) {
+        cssRule = "@supports " + support + " { " + cssRule + " }";
+    }
+    return compileCSSRules(cssRule);
 }
 //# sourceMappingURL=compileCSS.js.map

lib/runtime/compileStaticCSS.js

@@ -1,7 +0,7 @@
-import { compileCSSRule } from './compileCSS';
+import { compileCSSRules } from './compileCSS';
 import { cssifyObject } from './utils/cssifyObject';
 export function compileStaticCSS(property, value) {
     var cssRule = property + " {" + cssifyObject(value) + "}";
-    return compileCSSRule(cssRule);
+    return compileCSSRules(cssRule)[0];
 }
 //# sourceMappingURL=compileStaticCSS.js.map

lib/runtime/index.d.ts

 export { createCSSVariablesProxy } from './createCSSVariablesProxy';
-export { resolveDefinitions } from './resolveDefinitions';
 export { resolveStyleRules } from './resolveStyleRules';

lib/runtime/index.js

 export { createCSSVariablesProxy } from './createCSSVariablesProxy';
-export { resolveDefinitions } from './resolveDefinitions';
 export { resolveStyleRules } from './resolveStyleRules';
 //# sourceMappingURL=index.js.map

lib/runtime/resolveStyleRules.js

@@ -20,11 +20,10 @@ import { convert, convertProperty } from 'rtl-css-js/core';
     var expandedStyles = expand(styles);
-    var properties = Object.keys(expandedStyles);
-    // TODO: => for-in loop
-    properties.forEach(function (property) {
+    // eslint-disable-next-line guard-for-in
+    for (var property in expandedStyles) {
         var value = expandedStyles[property];
         // eslint-disable-next-line eqeqeq
         if (value == null) {
-            return;
+            continue;
         }
-        else if (typeof value === 'string' || typeof value === 'number') {
+        if (typeof value === 'string' || typeof value === 'number') {
             // uniq key based on property & selector, used for merging later
@@ -35,3 +34,5 @@ var key = pseudo + media + support + property;
             var className = HASH_PREFIX + classNameHash + (unstable_cssPriority === 0 ? '' : unstable_cssPriority);
-            var css = compileCSS({
+            var rtlDefinition = (rtlValue && { key: property, value: rtlValue }) || convertProperty(property, value);
+            var flippedInRtl = rtlDefinition.key !== property || rtlDefinition.value !== value;
+            var cssRules = compileCSS({
                 className: className,
@@ -44,21 +45,6 @@ media: media,
                 unstable_cssPriority: unstable_cssPriority,
+                rtlProperty: flippedInRtl ? rtlDefinition.key : undefined,
+                rtlValue: flippedInRtl ? rtlDefinition.value : undefined,
             });
-            var rtl = (rtlValue && { key: property, value: rtlValue }) || convertProperty(property, value);
-            var flippedInRtl = rtl.key !== property || rtl.value !== value;
-            if (flippedInRtl) {
-                var rtlCSS = compileCSS({
-                    className: RTL_PREFIX + className,
-                    media: media,
-                    pseudo: pseudo,
-                    property: rtl.key,
-                    support: support,
-                    value: rtl.value,
-                    unstable_cssPriority: unstable_cssPriority,
-                });
-                // There is no sense to store RTL className as it's "r" + regular className
-                result[key] = [className, css, rtlCSS];
-            }
-            else {
-                result[key] = [className, css];
-            }
+            result[key] = [className, cssRules[0], cssRules[1]];
         }
@@ -105,5 +91,5 @@ else if (property === 'animationName') {
         }
-    });
+    }
     return result;
 }
 //# sourceMappingURL=resolveStyleRules.js.map

lib/runtime/utils/cssifyObject.js

@@ -10,8 +10,3 @@ import { hyphenateProperty } from './hyphenateProperty';
         }
-        // prevents the semicolon after
-        // the last rule declaration
-        if (css) {
-            css += ';';
-        }
-        css += hyphenateProperty(property) + ':' + value;
+        css += hyphenateProperty(property) + ':' + value + ';';
     }
@@ -18,0 +13,0 @@ return css;

lib/runtime/utils/hashString.js

 import murmurHash from '@emotion/hash';
+import { HASH_LENGTH } from '../../constants';
 function padEndHash(value) {
     var hashLength = value.length;
-    if (hashLength === 7) {
+    if (hashLength === HASH_LENGTH) {
         return value;
     }
-    for (var i = hashLength; i < 7; i++) {
+    for (var i = hashLength; i < HASH_LENGTH; i++) {
         value += '0';
@@ -9,0 +10,0 @@ }

lib/types.d.ts

@@ -11,3 +11,3 @@ import { Properties as CSSProperties } from 'csstype';
 export interface MakeStylesOptions<Tokens> {
-    rtl?: boolean;
+    dir: 'ltr' | 'rtl';
     renderer: MakeStylesRenderer;
@@ -17,3 +17,3 @@ tokens: Tokens;
 export declare type MakeStaticStyles = ({
-    [key: string]: CSSProperties;
+    [key: string]: CSSProperties & Record<string, any>;
 } & {
@@ -40,3 +40,3 @@ '@font-face'?: {
     id: string;
-    insertDefinitions(resolvedDefinitions: MakeStylesMatchedDefinitions, rtl: boolean): string;
+    insertDefinitions(dir: 'ltr' | 'rtl', resolvedDefinitions: MakeStylesMatchedDefinitions): string;
 }

NOTICE.txt

@@ -56,52 +56,2 @@ NOTICES AND INFORMATION
 
-@fluentui/api-docs 8.0.17 - MIT
-https://github.com/microsoft/fluentui#readme
-
-
-Fluent UI React API Docs
-
-Copyright (c) Microsoft Corporation
-
-All rights reserved.
-
-MIT License
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
-
-
----------------------------------------------------------
-
----------------------------------------------------------
-
-@fluentui/azure-themes 8.0.18 - MIT
-https://github.com/microsoft/fluentui#readme
-
-
-@fluentui/azure-themes
-
-Copyright (c) Microsoft Corporation
-
-All rights reserved.
-
-MIT License
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
-
-
----------------------------------------------------------
-
----------------------------------------------------------
-
 @fluentui/code-sandbox 0.53.0 - MIT
@@ -143,7 +93,7 @@ https://github.com/microsoft/fluentui/tree/master/packages/fluentui/code-sandbox
 
-@fluentui/make-styles 9.0.0-alpha.6 - MIT
+@fluentui/monaco-editor 1.0.2 - MIT
 https://github.com/microsoft/fluentui#readme
 
 
-@fluentui/make-styles
+@fluentui/monaco-editor
 
@@ -162,5 +112,3 @@ Copyright (c) Microsoft Corporation
 
-Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
 
-
 ---------------------------------------------------------
@@ -170,27 +118,2 @@
 
-@fluentui/react 8.6.1 - MIT
-https://github.com/microsoft/fluentui#readme
-
-
-@fluentui/react
-
-Copyright (c) Microsoft Corporation
-
-All rights reserved.
-
-MIT License
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fabric-assets-license
-
-
----------------------------------------------------------
-
----------------------------------------------------------
-
 @fluentui/react-bindings 0.53.0 - MIT
@@ -232,27 +155,2 @@ https://github.com/microsoft/fluentui/tree/master/packages/fluentui/react-bindings
 
-@fluentui/react-checkbox 1.0.0-beta.53 - MIT
-https://github.com/microsoft/fluentui#readme
-
-
-@fluentui/react-checkbox
-
-Copyright (c) Microsoft Corporation
-
-All rights reserved.
-
-MIT License
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
-
-
----------------------------------------------------------
-
----------------------------------------------------------
-
 @fluentui/react-component-event-listener 0.53.0 - MIT
@@ -337,77 +235,2 @@ https://github.com/microsoft/fluentui/tree/master/packages/fluentui/react-component-event-listener
 
-@fluentui/react-date-time 8.0.17 - MIT
-https://github.com/microsoft/fluentui#readme
-
-
-Fluent UI React DateTime
-
-Copyright (c) Microsoft Corporation
-
-All rights reserved.
-
-MIT License
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
-
-
----------------------------------------------------------
-
----------------------------------------------------------
-
-@fluentui/react-experiments 8.0.18 - MIT
-https://github.com/microsoft/fluentui#readme
-
-
-Fluent UI React Experiments
-
-Copyright (c) Microsoft Corporation
-
-All rights reserved.
-
-MIT License
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
-
-
----------------------------------------------------------
-
----------------------------------------------------------
-
-@fluentui/react-focus 8.0.4 - MIT
-https://github.com/microsoft/fluentui#readme
-
-
-@fluentui/react-focus
-
-Copyright (c) Microsoft Corporation
-
-All rights reserved.
-
-MIT License
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
-
-
----------------------------------------------------------
-
----------------------------------------------------------
-
 @fluentui/react-hooks 8.1.0 - MIT
@@ -547,52 +370,2 @@ https://github.com/microsoft/fluentui#readme
 
-@fluentui/react-slider 1.0.0-beta.70 - MIT
-https://github.com/microsoft/fluentui#readme
-
-
-@fluentui/react-slider
-
-Copyright (c) Microsoft Corporation
-
-All rights reserved.
-
-MIT License
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
-
-
----------------------------------------------------------
-
----------------------------------------------------------
-
-@fluentui/react-tabs 1.0.0-beta.72 - MIT
-https://github.com/microsoft/fluentui#readme
-
-
-@fluentui/react-tabs
-
-Copyright (c) Microsoft Corporation
-
-All rights reserved.
-
-MIT License
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
-
-
----------------------------------------------------------
-
----------------------------------------------------------
-
 @fluentui/react-telemetry 0.53.0 - MIT
@@ -616,52 +389,2 @@ https://github.com/microsoft/fluentui/tree/master/packages/fluentui/react-telemetry
 
-@fluentui/react-text 0.2.5 - MIT
-https://github.com/microsoft/fluentui#readme
-
-
-@fluentui/react-text
-
-Copyright (c) Microsoft Corporation
-
-All rights reserved.
-
-MIT License
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
-
-
----------------------------------------------------------
-
----------------------------------------------------------
-
-@fluentui/react-toggle 1.0.0-beta.70 - MIT
-https://github.com/microsoft/fluentui#readme
-
-
-@fluentui/react-toggle
-
-Copyright (c) Microsoft Corporation
-
-All rights reserved.
-
-MIT License
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
-
-
----------------------------------------------------------
-
----------------------------------------------------------
-
 @fluentui/state 0.53.0 - MIT
@@ -703,23 +426,16 @@ https://github.com/microsoft/fluentui/tree/master/packages/fluentui/state
 
-@fluentui/theme-samples 8.0.17 - MIT
-https://github.com/microsoft/fluentui#readme
+@fluentui/web-components 0.20.1 - MIT
 
 
-Fluent UI React ThemeSamples
 
-Copyright (c) Microsoft Corporation
+MIT License
 
-All rights reserved.
+Copyright (c) <year> <copyright holders>
 
-MIT License
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
-
-
 ---------------------------------------------------------
@@ -726,0 +442,0 @@

package.json

 {
   "name": "@fluentui/make-styles",
-  "version": "9.0.0-alpha.7",
+  "version": "9.0.0-alpha.8",
   "description": "Experimental utility for creating css styles/classes.",
@@ -24,5 +24,5 @@ "main": "lib-commonjs/index.js",
   "devDependencies": {
-    "@fluentui/eslint-plugin": "^1.0.1",
+    "@fluentui/eslint-plugin": "^1.1.0",
     "@fluentui/scripts": "^1.0.0",
-    "@fluentui/test-utilities": "^8.0.1",
+    "@fluentui/test-utilities": "^8.0.2",
     "@types/stylis": "4.0.0"
@@ -29,0 +29,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

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

Lines of code

2730

increased by0.52%

Worsened metrics

Total package byte prevSize

325338

decreased by-5.64%

Number of package files

223

decreased by-3.88%

Number of low supply chain risk alerts

4

increased by100%

No dependency changes