@fluentui/make-styles - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

CHANGELOG.json

@@ -5,6 +5,44 @@ {
     {
-      "date": "Mon, 01 Feb 2021 12:21:22 GMT",
+      "date": "Wed, 03 Feb 2021 22:54:05 GMT",
+      "tag": "@fluentui/make-styles_v0.5.0",
+      "version": "0.5.0",
+      "comments": {
+        "minor": [
+          {
+            "comment": "makeStyles: finish up keyframes implementation",
+            "author": "[e-mail]",
+            "commit": "42df0bee0fa79499115ea1940cafc580f66c53ca",
+            "package": "@fluentui/make-styles"
+          }
+        ],
+        "patch": [
+          {
+            "comment": "update proxy implementation to correspond to Provider CSS variables",
+            "author": "[e-mail]",
+            "commit": "f5af8fdff38fc931c49b7cb6c03559f93e5135b5",
+            "package": "@fluentui/make-styles"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 03 Feb 2021 05:51:40 GMT",
       "tag": "@fluentui/make-styles_v0.4.0",
       "version": "0.4.0",
       "comments": {
+        "none": [
+          {
+            "comment": "refactor: remove unused .npmrc in packages",
+            "author": "[e-mail]",
+            "commit": "c688ee2ea6f192c4874974ebf11598523ccf6db9",
+            "package": "@fluentui/make-styles"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 01 Feb 2021 12:23:48 GMT",
+      "tag": "@fluentui/make-styles_v0.4.0",
+      "version": "0.4.0",
+      "comments": {
         "minor": [
@@ -11,0 +49,0 @@ {

CHANGELOG.md

 # Change Log - @fluentui/make-styles
 
-This log was last generated on Mon, 01 Feb 2021 12:21:22 GMT and should not be manually modified.
+This log was last generated on Wed, 03 Feb 2021 22:54:05 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v0.5.0)
+
+Wed, 03 Feb 2021 22:54:05 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v0.4.0..@fluentui/make-styles_v0.5.0)
+
+### Minor changes
+
+- makeStyles: finish up keyframes implementation ([PR #16757](https://github.com/microsoft/fluentui/pull/16757) by [e-mail])
+
+### Patches
+
+- update proxy implementation to correspond to Provider CSS variables ([PR #16664](https://github.com/microsoft/fluentui/pull/16664) by [e-mail])
+
 ## [0.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v0.4.0)
 
-Mon, 01 Feb 2021 12:21:22 GMT 
+Mon, 01 Feb 2021 12:23:48 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v0.3.2-0..@fluentui/make-styles_v0.4.0)
@@ -11,0 +24,0 @@

lib-amd/renderer/createDOMRenderer.js

@@ -28,6 +28,9 @@ define(["require", "exports", "../constants"], function (require, exports, constants_1) {
                     var rtlCSS = definition[2];
-                    var ruleClassName = rtl ? (rtlCSS ? constants_1.RTL_PREFIX + className : className) : className;
-                    // Should be done always to return classes
-                    classes += ruleClassName + ' ';
-                    if (renderer.insertionCache[ruleClassName]) {
+                    var ruleClassName = className && (rtl && rtlCSS ? constants_1.RTL_PREFIX + className : className);
+                    if (ruleClassName) {
+                        // Should be done always to return classes even if they have been already inserted to DOM
+                        classes += ruleClassName + ' ';
+                    }
+                    var cacheKey = ruleClassName || propName;
+                    if (renderer.insertionCache[cacheKey]) {
                         continue;
@@ -37,3 +40,3 @@ }
                     var ruleCSS = rtl ? rtlCSS || css : css;
-                    renderer.insertionCache[ruleClassName] = true;
+                    renderer.insertionCache[cacheKey] = true;
                     renderer.styleElement.sheet.insertRule(ruleCSS, renderer.index);
@@ -40,0 +43,0 @@ renderer.index++;

lib-amd/runtime/compileKeyframeRule.d.ts

 import { MakeStyles } from '../types';
 export declare function compileKeyframeRule(frames: MakeStyles): string;
+export declare function compileKeyframesCSS(animationName: string, framesCSS: string): string;

lib-amd/runtime/compileKeyframeRule.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./utils/hyphenateProperty"], function (require, exports, hyphenateProperty_1) {
+define(["require", "exports", "./utils/hyphenateProperty", "stylis"], function (require, exports, hyphenateProperty_1, stylis_1) {
     "use strict";
@@ -29,3 +29,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
     exports.compileKeyframeRule = compileKeyframeRule;
+    function compileKeyframesCSS(animationName, framesCSS) {
+        var cssRule = "@keyframes " + animationName + " {" + framesCSS + "}";
+        return stylis_1.serialize(stylis_1.compile(cssRule), stylis_1.middleware([stylis_1.prefixer, stylis_1.stringify]));
+    }
+    exports.compileKeyframesCSS = compileKeyframesCSS;
 });
 //# sourceMappingURL=compileKeyframeRule.js.map

lib-amd/runtime/createCSSVariablesProxy.js

@@ -14,3 +14,3 @@ define(["require", "exports", "tslib", "./utils/isObject"], function (require, exports, tslib_1, isObject_1) {
                 }
-                return "var(--theme" + (_b = target.value, (_b !== null && _b !== void 0 ? _b : '')) + "-" + key + ")";
+                return "var(-" + (_b = target.value, (_b !== null && _b !== void 0 ? _b : '')) + "-" + key + ")";
             },
@@ -17,0 +17,0 @@ };

lib-amd/runtime/resolveStyleRules.d.ts

 import { MakeStyles, MakeStylesResolvedRule } from '../types';
-export declare function resolveStyleRules(styles: MakeStyles, unstable_cssPriority?: number, pseudo?: string, media?: string, support?: string, result?: Record<string, MakeStylesResolvedRule>): Record<string, MakeStylesResolvedRule>;
+export declare function resolveStyleRules(styles: MakeStyles, unstable_cssPriority?: number, pseudo?: string, media?: string, support?: string, result?: Record<string, MakeStylesResolvedRule>, rtlValue?: string): Record<string, MakeStylesResolvedRule>;

lib-amd/runtime/resolveStyleRules.js

@@ -1,5 +0,5 @@
-define(["require", "exports", "rtl-css-js/core", "inline-style-expand-shorthand", "../constants", "./compileCSS", "./compileKeyframeRule", "./utils/hashString", "./utils/generateCombinedMediaQuery", "./utils/isMediaQuerySelector", "./utils/isNestedSelector", "./utils/isObject", "./utils/isSupportQuerySelector", "./utils/normalizeNestedProperty"], function (require, exports, core_1, inline_style_expand_shorthand_1, constants_1, compileCSS_1, compileKeyframeRule_1, hashString_1, generateCombinedMediaQuery_1, isMediaQuerySelector_1, isNestedSelector_1, isObject_1, isSupportQuerySelector_1, normalizeNestedProperty_1) {
+define(["require", "exports", "rtl-css-js/core", "inline-style-expand-shorthand", "../constants", "./compileCSS", "./compileKeyframeRule", "./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, compileKeyframeRule_1, hashString_1, generateCombinedMediaQuery_1, isMediaQuerySelector_1, isNestedSelector_1, isSupportQuerySelector_1, normalizeNestedProperty_1, isObject_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    function resolveStyleRules(styles, unstable_cssPriority, pseudo, media, support, result) {
+    function resolveStyleRules(styles, unstable_cssPriority, pseudo, media, support, result, rtlValue) {
         if (unstable_cssPriority === void 0) { unstable_cssPriority = 0; }
@@ -34,3 +34,3 @@ if (pseudo === void 0) { pseudo = ''; }
                 });
-                var rtl = core_1.convertProperty(property, value);
+                var rtl = (rtlValue && { key: property, value: rtlValue }) || core_1.convertProperty(property, value);
                 var flippedInRtl = rtl.key !== property || rtl.value !== value;
@@ -54,2 +54,29 @@ if (flippedInRtl) {
             }
+            else if (property === 'animationName') {
+                var animationNames = Array.isArray(value) ? value : [value];
+                var keyframeCSS = '';
+                var keyframeRtlCSS = '';
+                var names = [];
+                var namesRtl = [];
+                for (var _i = 0, animationNames_1 = animationNames; _i < animationNames_1.length; _i++) {
+                    var val = animationNames_1[_i];
+                    var keyframe = compileKeyframeRule_1.compileKeyframeRule(val);
+                    var name_1 = constants_1.HASH_PREFIX + hashString_1.hashString(keyframe);
+                    keyframeCSS += compileKeyframeRule_1.compileKeyframesCSS(name_1, keyframe);
+                    names.push(name_1);
+                    var rtlKeyframe = compileKeyframeRule_1.compileKeyframeRule(core_1.convert(val));
+                    if (keyframe !== rtlKeyframe) {
+                        var nameRtl = constants_1.RTL_PREFIX + name_1;
+                        keyframeRtlCSS += compileKeyframeRule_1.compileKeyframesCSS(nameRtl, rtlKeyframe);
+                        namesRtl.push(nameRtl);
+                    }
+                    else {
+                        namesRtl.push(name_1);
+                    }
+                }
+                var animationName = names.join(' ');
+                var animationNameRtl = namesRtl.join(' ');
+                result[animationName] = [undefined, keyframeCSS, keyframeRtlCSS || undefined];
+                resolveStyleRules({ animationName: animationName }, unstable_cssPriority, pseudo, media, support, result, animationNameRtl);
+            }
             else if (isObject_1.isObject(value)) {
@@ -67,11 +94,2 @@ if (isNestedSelector_1.isNestedSelector(property)) {
                 }
-                else if (property === 'animationName') {
-                    // TODO: support RTL!
-                    var keyframe = compileKeyframeRule_1.compileKeyframeRule(value);
-                    var animationName = constants_1.HASH_PREFIX + hashString_1.hashString(keyframe);
-                    // TODO call Stylis for prefixing
-                    var keyframeCSS = "@keyframes " + animationName + "{" + keyframe + "}";
-                    result[animationName] = [animationName, keyframeCSS /* rtlCSS */];
-                    resolveStyleRules({ animationName: animationName }, unstable_cssPriority, pseudo, media, support, result);
-                }
             }
@@ -78,0 +96,0 @@ });

lib-amd/types.d.ts

 import { Properties as CSSProperties } from 'csstype';
-export interface MakeStyles extends CSSProperties {
+export interface MakeStyles extends Omit<CSSProperties, 'animationName'> {
     [key: string]: any;
-    animationName?: any;
+    animationName?: object | string;
 }
@@ -15,3 +15,3 @@ export declare type MakeStylesMatcher<Selectors> = ((selectors: Selectors) => boolean | undefined) | null;
 }
-export declare type MakeStylesResolvedRule = [/* className */ string, /* css */ string, /* rtlCSS */ string?];
+export declare type MakeStylesResolvedRule = [/* className */ /* className */ string | undefined, /* css */ string, /* rtlCSS */ string?];
 export declare type MakeStylesResolvedDefinition<Selectors, Tokens> = [MakeStylesMatcher<Selectors>, MakeStylesStyleRule<Tokens> | undefined, Record<string, MakeStylesResolvedRule>];
@@ -18,0 +18,0 @@ export declare type MakeStylesMatchedDefinitions = Record<string, MakeStylesResolvedRule>;

lib-amd/version.js

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

lib-commonjs/renderer/createDOMRenderer.js

@@ -28,6 +28,9 @@ "use strict";
                 var rtlCSS = definition[2];
-                var ruleClassName = rtl ? (rtlCSS ? constants_1.RTL_PREFIX + className : className) : className;
-                // Should be done always to return classes
-                classes += ruleClassName + ' ';
-                if (renderer.insertionCache[ruleClassName]) {
+                var ruleClassName = className && (rtl && rtlCSS ? constants_1.RTL_PREFIX + className : className);
+                if (ruleClassName) {
+                    // Should be done always to return classes even if they have been already inserted to DOM
+                    classes += ruleClassName + ' ';
+                }
+                var cacheKey = ruleClassName || propName;
+                if (renderer.insertionCache[cacheKey]) {
                     continue;
@@ -37,3 +40,3 @@ }
                 var ruleCSS = rtl ? rtlCSS || css : css;
-                renderer.insertionCache[ruleClassName] = true;
+                renderer.insertionCache[cacheKey] = true;
                 renderer.styleElement.sheet.insertRule(ruleCSS, renderer.index);
@@ -40,0 +43,0 @@ renderer.index++;

lib-commonjs/runtime/compileKeyframeRule.d.ts

 import { MakeStyles } from '../types';
 export declare function compileKeyframeRule(frames: MakeStyles): string;
+export declare function compileKeyframesCSS(animationName: string, framesCSS: string): string;

lib-commonjs/runtime/compileKeyframeRule.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var hyphenateProperty_1 = require("./utils/hyphenateProperty");
+var stylis_1 = require("stylis");
 /* eslint-disable guard-for-in */
@@ -29,2 +30,7 @@ function cssifyObject(style) {
 exports.compileKeyframeRule = compileKeyframeRule;
+function compileKeyframesCSS(animationName, framesCSS) {
+    var cssRule = "@keyframes " + animationName + " {" + framesCSS + "}";
+    return stylis_1.serialize(stylis_1.compile(cssRule), stylis_1.middleware([stylis_1.prefixer, stylis_1.stringify]));
+}
+exports.compileKeyframesCSS = compileKeyframesCSS;
 //# sourceMappingURL=compileKeyframeRule.js.map

lib-commonjs/runtime/createCSSVariablesProxy.js

@@ -15,3 +15,3 @@ "use strict";
             }
-            return "var(--theme" + (_b = target.value, (_b !== null && _b !== void 0 ? _b : '')) + "-" + key + ")";
+            return "var(-" + (_b = target.value, (_b !== null && _b !== void 0 ? _b : '')) + "-" + key + ")";
         },
@@ -18,0 +18,0 @@ };

lib-commonjs/runtime/resolveStyleRules.d.ts

 import { MakeStyles, MakeStylesResolvedRule } from '../types';
-export declare function resolveStyleRules(styles: MakeStyles, unstable_cssPriority?: number, pseudo?: string, media?: string, support?: string, result?: Record<string, MakeStylesResolvedRule>): Record<string, MakeStylesResolvedRule>;
+export declare function resolveStyleRules(styles: MakeStyles, unstable_cssPriority?: number, pseudo?: string, media?: string, support?: string, result?: Record<string, MakeStylesResolvedRule>, rtlValue?: string): Record<string, MakeStylesResolvedRule>;

lib-commonjs/runtime/resolveStyleRules.js

@@ -12,6 +12,6 @@ "use strict";
 var isNestedSelector_1 = require("./utils/isNestedSelector");
-var isObject_1 = require("./utils/isObject");
 var isSupportQuerySelector_1 = require("./utils/isSupportQuerySelector");
 var normalizeNestedProperty_1 = require("./utils/normalizeNestedProperty");
-function resolveStyleRules(styles, unstable_cssPriority, pseudo, media, support, result) {
+var isObject_1 = require("./utils/isObject");
+function resolveStyleRules(styles, unstable_cssPriority, pseudo, media, support, result, rtlValue) {
     if (unstable_cssPriority === void 0) { unstable_cssPriority = 0; }
@@ -46,3 +46,3 @@ if (pseudo === void 0) { pseudo = ''; }
             });
-            var rtl = core_1.convertProperty(property, value);
+            var rtl = (rtlValue && { key: property, value: rtlValue }) || core_1.convertProperty(property, value);
             var flippedInRtl = rtl.key !== property || rtl.value !== value;
@@ -66,2 +66,29 @@ if (flippedInRtl) {
         }
+        else if (property === 'animationName') {
+            var animationNames = Array.isArray(value) ? value : [value];
+            var keyframeCSS = '';
+            var keyframeRtlCSS = '';
+            var names = [];
+            var namesRtl = [];
+            for (var _i = 0, animationNames_1 = animationNames; _i < animationNames_1.length; _i++) {
+                var val = animationNames_1[_i];
+                var keyframe = compileKeyframeRule_1.compileKeyframeRule(val);
+                var name_1 = constants_1.HASH_PREFIX + hashString_1.hashString(keyframe);
+                keyframeCSS += compileKeyframeRule_1.compileKeyframesCSS(name_1, keyframe);
+                names.push(name_1);
+                var rtlKeyframe = compileKeyframeRule_1.compileKeyframeRule(core_1.convert(val));
+                if (keyframe !== rtlKeyframe) {
+                    var nameRtl = constants_1.RTL_PREFIX + name_1;
+                    keyframeRtlCSS += compileKeyframeRule_1.compileKeyframesCSS(nameRtl, rtlKeyframe);
+                    namesRtl.push(nameRtl);
+                }
+                else {
+                    namesRtl.push(name_1);
+                }
+            }
+            var animationName = names.join(' ');
+            var animationNameRtl = namesRtl.join(' ');
+            result[animationName] = [undefined, keyframeCSS, keyframeRtlCSS || undefined];
+            resolveStyleRules({ animationName: animationName }, unstable_cssPriority, pseudo, media, support, result, animationNameRtl);
+        }
         else if (isObject_1.isObject(value)) {
@@ -79,11 +106,2 @@ if (isNestedSelector_1.isNestedSelector(property)) {
             }
-            else if (property === 'animationName') {
-                // TODO: support RTL!
-                var keyframe = compileKeyframeRule_1.compileKeyframeRule(value);
-                var animationName = constants_1.HASH_PREFIX + hashString_1.hashString(keyframe);
-                // TODO call Stylis for prefixing
-                var keyframeCSS = "@keyframes " + animationName + "{" + keyframe + "}";
-                result[animationName] = [animationName, keyframeCSS /* rtlCSS */];
-                resolveStyleRules({ animationName: animationName }, unstable_cssPriority, pseudo, media, support, result);
-            }
         }
@@ -90,0 +108,0 @@ });

lib-commonjs/types.d.ts

 import { Properties as CSSProperties } from 'csstype';
-export interface MakeStyles extends CSSProperties {
+export interface MakeStyles extends Omit<CSSProperties, 'animationName'> {
     [key: string]: any;
-    animationName?: any;
+    animationName?: object | string;
 }
@@ -15,3 +15,3 @@ export declare type MakeStylesMatcher<Selectors> = ((selectors: Selectors) => boolean | undefined) | null;
 }
-export declare type MakeStylesResolvedRule = [/* className */ string, /* css */ string, /* rtlCSS */ string?];
+export declare type MakeStylesResolvedRule = [/* className */ /* className */ string | undefined, /* css */ string, /* rtlCSS */ string?];
 export declare type MakeStylesResolvedDefinition<Selectors, Tokens> = [MakeStylesMatcher<Selectors>, MakeStylesStyleRule<Tokens> | undefined, Record<string, MakeStylesResolvedRule>];
@@ -18,0 +18,0 @@ export declare type MakeStylesMatchedDefinitions = Record<string, MakeStylesResolvedRule>;

lib-commonjs/version.js

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

lib/renderer/createDOMRenderer.js

@@ -26,6 +26,9 @@ import { RTL_PREFIX } from '../constants';
                 var rtlCSS = definition[2];
-                var ruleClassName = rtl ? (rtlCSS ? RTL_PREFIX + className : className) : className;
-                // Should be done always to return classes
-                classes += ruleClassName + ' ';
-                if (renderer.insertionCache[ruleClassName]) {
+                var ruleClassName = className && (rtl && rtlCSS ? RTL_PREFIX + className : className);
+                if (ruleClassName) {
+                    // Should be done always to return classes even if they have been already inserted to DOM
+                    classes += ruleClassName + ' ';
+                }
+                var cacheKey = ruleClassName || propName;
+                if (renderer.insertionCache[cacheKey]) {
                     continue;
@@ -35,3 +38,3 @@ }
                 var ruleCSS = rtl ? rtlCSS || css : css;
-                renderer.insertionCache[ruleClassName] = true;
+                renderer.insertionCache[cacheKey] = true;
                 renderer.styleElement.sheet.insertRule(ruleCSS, renderer.index);
@@ -38,0 +41,0 @@ renderer.index++;

lib/runtime/compileKeyframeRule.d.ts

 import { MakeStyles } from '../types';
 export declare function compileKeyframeRule(frames: MakeStyles): string;
+export declare function compileKeyframesCSS(animationName: string, framesCSS: string): string;

lib/runtime/compileKeyframeRule.js

 import { hyphenateProperty } from './utils/hyphenateProperty';
+import { compile, middleware, serialize, stringify, prefixer } from 'stylis';
 /* eslint-disable guard-for-in */
@@ -26,2 +27,6 @@ function cssifyObject(style) {
 }
+export function compileKeyframesCSS(animationName, framesCSS) {
+    var cssRule = "@keyframes " + animationName + " {" + framesCSS + "}";
+    return serialize(compile(cssRule), middleware([prefixer, stringify]));
+}
 //# sourceMappingURL=compileKeyframeRule.js.map

lib/runtime/createCSSVariablesProxy.js

@@ -13,3 +13,3 @@ import { __assign } from "tslib";
             }
-            return "var(--theme" + (_b = target.value, (_b !== null && _b !== void 0 ? _b : '')) + "-" + key + ")";
+            return "var(-" + (_b = target.value, (_b !== null && _b !== void 0 ? _b : '')) + "-" + key + ")";
         },
@@ -16,0 +16,0 @@ };

lib/runtime/resolveStyleRules.d.ts

 import { MakeStyles, MakeStylesResolvedRule } from '../types';
-export declare function resolveStyleRules(styles: MakeStyles, unstable_cssPriority?: number, pseudo?: string, media?: string, support?: string, result?: Record<string, MakeStylesResolvedRule>): Record<string, MakeStylesResolvedRule>;
+export declare function resolveStyleRules(styles: MakeStyles, unstable_cssPriority?: number, pseudo?: string, media?: string, support?: string, result?: Record<string, MakeStylesResolvedRule>, rtlValue?: string): Record<string, MakeStylesResolvedRule>;

lib/runtime/resolveStyleRules.js

@@ -1,6 +0,6 @@
-import { convertProperty } from 'rtl-css-js/core';
+import { convert, convertProperty } from 'rtl-css-js/core';
 import { expand } from 'inline-style-expand-shorthand';
 import { HASH_PREFIX, RTL_PREFIX } from '../constants';
 import { compileCSS } from './compileCSS';
-import { compileKeyframeRule } from './compileKeyframeRule';
+import { compileKeyframeRule, compileKeyframesCSS } from './compileKeyframeRule';
 import { hashString } from './utils/hashString';
@@ -10,6 +10,6 @@ import { generateCombinedQuery } from './utils/generateCombinedMediaQuery';
 import { isNestedSelector } from './utils/isNestedSelector';
-import { isObject } from './utils/isObject';
 import { isSupportQuerySelector } from './utils/isSupportQuerySelector';
 import { normalizeNestedProperty } from './utils/normalizeNestedProperty';
-export function resolveStyleRules(styles, unstable_cssPriority, pseudo, media, support, result) {
+import { isObject } from './utils/isObject';
+export function resolveStyleRules(styles, unstable_cssPriority, pseudo, media, support, result, rtlValue) {
     if (unstable_cssPriority === void 0) { unstable_cssPriority = 0; }
@@ -44,3 +44,3 @@ if (pseudo === void 0) { pseudo = ''; }
             });
-            var rtl = convertProperty(property, value);
+            var rtl = (rtlValue && { key: property, value: rtlValue }) || convertProperty(property, value);
             var flippedInRtl = rtl.key !== property || rtl.value !== value;
@@ -64,2 +64,29 @@ if (flippedInRtl) {
         }
+        else if (property === 'animationName') {
+            var animationNames = Array.isArray(value) ? value : [value];
+            var keyframeCSS = '';
+            var keyframeRtlCSS = '';
+            var names = [];
+            var namesRtl = [];
+            for (var _i = 0, animationNames_1 = animationNames; _i < animationNames_1.length; _i++) {
+                var val = animationNames_1[_i];
+                var keyframe = compileKeyframeRule(val);
+                var name_1 = HASH_PREFIX + hashString(keyframe);
+                keyframeCSS += compileKeyframesCSS(name_1, keyframe);
+                names.push(name_1);
+                var rtlKeyframe = compileKeyframeRule(convert(val));
+                if (keyframe !== rtlKeyframe) {
+                    var nameRtl = RTL_PREFIX + name_1;
+                    keyframeRtlCSS += compileKeyframesCSS(nameRtl, rtlKeyframe);
+                    namesRtl.push(nameRtl);
+                }
+                else {
+                    namesRtl.push(name_1);
+                }
+            }
+            var animationName = names.join(' ');
+            var animationNameRtl = namesRtl.join(' ');
+            result[animationName] = [undefined, keyframeCSS, keyframeRtlCSS || undefined];
+            resolveStyleRules({ animationName: animationName }, unstable_cssPriority, pseudo, media, support, result, animationNameRtl);
+        }
         else if (isObject(value)) {
@@ -77,11 +104,2 @@ if (isNestedSelector(property)) {
             }
-            else if (property === 'animationName') {
-                // TODO: support RTL!
-                var keyframe = compileKeyframeRule(value);
-                var animationName = HASH_PREFIX + hashString(keyframe);
-                // TODO call Stylis for prefixing
-                var keyframeCSS = "@keyframes " + animationName + "{" + keyframe + "}";
-                result[animationName] = [animationName, keyframeCSS /* rtlCSS */];
-                resolveStyleRules({ animationName: animationName }, unstable_cssPriority, pseudo, media, support, result);
-            }
         }
@@ -88,0 +106,0 @@ });

lib/types.d.ts

 import { Properties as CSSProperties } from 'csstype';
-export interface MakeStyles extends CSSProperties {
+export interface MakeStyles extends Omit<CSSProperties, 'animationName'> {
     [key: string]: any;
-    animationName?: any;
+    animationName?: object | string;
 }
@@ -15,3 +15,3 @@ export declare type MakeStylesMatcher<Selectors> = ((selectors: Selectors) => boolean | undefined) | null;
 }
-export declare type MakeStylesResolvedRule = [/* className */ string, /* css */ string, /* rtlCSS */ string?];
+export declare type MakeStylesResolvedRule = [/* className */ /* className */ string | undefined, /* css */ string, /* rtlCSS */ string?];
 export declare type MakeStylesResolvedDefinition<Selectors, Tokens> = [MakeStylesMatcher<Selectors>, MakeStylesStyleRule<Tokens> | undefined, Record<string, MakeStylesResolvedRule>];
@@ -18,0 +18,0 @@ export declare type MakeStylesMatchedDefinitions = Record<string, MakeStylesResolvedRule>;

lib/version.js

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

package.json

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

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

234946

increased by6.03%

Lines of code

2013

increased by6.34%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes