@fluentui/make-styles - npm Package Compare versions

Comparing version 9.0.0-alpha.10 to 9.0.0-alpha.11

CHANGELOG.json

@@ -5,6 +5,66 @@ {
     {
-      "date": "Fri, 09 Apr 2021 07:29:42 GMT",
+      "date": "Tue, 20 Apr 2021 07:29:23 GMT",
+      "tag": "@fluentui/make-styles_v9.0.0-alpha.11",
+      "version": "9.0.0-alpha.11",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "feat: add __styles() to handle prebuilt styles",
+            "author": "[e-mail]",
+            "commit": "5dbd4e4b1e03fca01f164911f11150979354a056",
+            "package": "@fluentui/make-styles"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 19 Apr 2021 07:33:33 GMT",
       "tag": "@fluentui/make-styles_v9.0.0-alpha.10",
       "version": "9.0.0-alpha.10",
       "comments": {
+        "none": [
+          {
+            "comment": "Bump @fluentui/test-utilities to v8.0.2",
+            "author": "[e-mail]",
+            "commit": "fdc32557d49e5d70ea7e4af8957102d415b44547",
+            "package": "@fluentui/make-styles"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 16 Apr 2021 18:08:21 GMT",
+      "tag": "@fluentui/make-styles_v9.0.0-alpha.10",
+      "version": "9.0.0-alpha.10",
+      "comments": {
+        "none": [
+          {
+            "comment": "Adds API extractor on make-styles",
+            "author": "[e-mail]",
+            "commit": "e158c65f9712556cfcca1e80c7156889885c95b0",
+            "package": "@fluentui/make-styles"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 09 Apr 2021 23:42:49 GMT",
+      "tag": "@fluentui/make-styles_v9.0.0-alpha.10",
+      "version": "9.0.0-alpha.10",
+      "comments": {
+        "none": [
+          {
+            "comment": "update README",
+            "author": "[e-mail]",
+            "commit": "3febbf40a59f1acb8e37516559fed1dd6f5b62fb",
+            "package": "@fluentui/make-styles"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 09 Apr 2021 07:31:06 GMT",
+      "tag": "@fluentui/make-styles_v9.0.0-alpha.10",
+      "version": "9.0.0-alpha.10",
+      "comments": {
         "prerelease": [
@@ -11,0 +71,0 @@ {

CHANGELOG.md

 # Change Log - @fluentui/make-styles
 
-This log was last generated on Fri, 09 Apr 2021 07:29:42 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Apr 2021 07:29:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.11](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v9.0.0-alpha.11)
+
+Tue, 20 Apr 2021 07:29:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v9.0.0-alpha.10..@fluentui/make-styles_v9.0.0-alpha.11)
+
+### Changes
+
+- feat: add __styles() to handle prebuilt styles ([PR #17798](https://github.com/microsoft/fluentui/pull/17798) by [e-mail])
+
 ## [9.0.0-alpha.10](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v9.0.0-alpha.10)
 
-Fri, 09 Apr 2021 07:29:42 GMT 
+Fri, 09 Apr 2021 07:31:06 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v9.0.0-alpha.9..@fluentui/make-styles_v9.0.0-alpha.10)
@@ -11,0 +20,0 @@

lib-amd/index.d.ts

@@ -5,2 +5,5 @@ export { createDOMRenderer } from './renderer/createDOMRenderer';
 export { makeStyles } from './makeStyles';
+export { createCSSVariablesProxy } from './runtime/createCSSVariablesProxy';
+export { resolveStyleRules } from './runtime/resolveStyleRules';
+export { __styles } from './__styles';
 export * from './types';

lib-amd/index.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./renderer/createDOMRenderer", "./ax", "./makeStaticStyles", "./makeStyles"], function (require, exports, createDOMRenderer_1, ax_1, makeStaticStyles_1, makeStyles_1) {
+define(["require", "exports", "./renderer/createDOMRenderer", "./ax", "./makeStaticStyles", "./makeStyles", "./runtime/createCSSVariablesProxy", "./runtime/resolveStyleRules", "./__styles"], function (require, exports, createDOMRenderer_1, ax_1, makeStaticStyles_1, makeStyles_1, createCSSVariablesProxy_1, resolveStyleRules_1, __styles_1) {
     "use strict";
@@ -8,3 +8,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
     exports.makeStyles = makeStyles_1.makeStyles;
+    exports.createCSSVariablesProxy = createCSSVariablesProxy_1.createCSSVariablesProxy;
+    exports.resolveStyleRules = resolveStyleRules_1.resolveStyleRules;
+    exports.__styles = __styles_1.__styles;
 });
 //# sourceMappingURL=index.js.map

lib-amd/makeStaticStyles.d.ts

 import { MakeStaticStylesOptions, MakeStaticStyles } from './types';
 /**
  * Register static css.
- * @param styles styles object or string.
+ * @param styles - styles object or string.
  */
 export declare function makeStaticStyles(styles: MakeStaticStyles | MakeStaticStyles[]): (options: MakeStaticStylesOptions) => void;

lib-amd/makeStaticStyles.js

@@ -6,3 +6,3 @@ define(["require", "exports", "./runtime/resolveStaticStyleRules"], function (require, exports, resolveStaticStyleRules_1) {
      * Register static css.
-     * @param styles styles object or string.
+     * @param styles - styles object or string.
      */
@@ -9,0 +9,0 @@ function makeStaticStyles(styles) {

lib-amd/makeStyles.js

@@ -1,16 +0,4 @@
-define(["require", "exports", "./constants", "./runtime/createCSSVariablesProxy", "./runtime/utils/hashString", "./runtime/resolveStyleRules"], function (require, exports, constants_1, createCSSVariablesProxy_1, hashString_1, resolveStyleRules_1) {
+define(["require", "exports", "./runtime/createCSSVariablesProxy", "./runtime/resolveClassesBySlots", "./runtime/resolveStyleRules"], function (require, exports, createCSSVariablesProxy_1, resolveClassesBySlots_1, resolveStyleRules_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], dir === 'rtl'];
-            resolvedClasses[slotName] = resultSlotClasses;
-        }
-        return resolvedClasses;
-    }
     function makeStyles(stylesBySlots, unstable_cssPriority) {
@@ -40,3 +28,3 @@ if (unstable_cssPriority === void 0) { unstable_cssPriority = 0; }
                 if (resolvedClassesRtl === null || insertionCache[rendererId] === undefined) {
-                    resolvedClassesRtl = resolveClasses(resolvedStyles, dir, renderer);
+                    resolvedClassesRtl = resolveClassesBySlots_1.resolveClassesBySlots(resolvedStyles, dir, renderer);
                     insertionCache[rendererId] = true;
@@ -47,3 +35,3 @@ }
                 if (resolvedClasses === null || insertionCache[renderer.id] === undefined) {
-                    resolvedClasses = resolveClasses(resolvedStyles, dir, renderer);
+                    resolvedClasses = resolveClassesBySlots_1.resolveClassesBySlots(resolvedStyles, dir, renderer);
                     insertionCache[options.renderer.id] = true;
@@ -50,0 +38,0 @@ }

lib-amd/runtime/createCSSVariablesProxy.d.ts

@@ -0,1 +1,6 @@
+/**
+ * A temporary solution that transforms passed theme to return CSS variables instead of actual values.
+ *
+ * @internal
+ */
 export declare function createCSSVariablesProxy<Tokens>(tokens: Tokens): Tokens;

lib-amd/runtime/createCSSVariablesProxy.js

@@ -5,2 +5,7 @@ define(["require", "exports", "tslib", "./utils/isObject"], function (require, exports, tslib_1, isObject_1) {
     /* eslint-disable */
+    /**
+     * A temporary solution that transforms passed theme to return CSS variables instead of actual values.
+     *
+     * @internal
+     */
     function createCSSVariablesProxy(tokens) {
@@ -7,0 +12,0 @@ var g = {

lib-amd/runtime/resolveStyleRules.d.ts

 import { MakeStyles, MakeStylesResolvedRule } from '../types';
+/**
+ * Transforms input styles to resolved rules: generates classnames and CSS.
+ *
+ * @internal
+ */
 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

 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", "./getStyleBucketName"], 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, getStyleBucketName_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    /**
+     * Transforms input styles to resolved rules: generates classnames and CSS.
+     *
+     * @internal
+     */
     function resolveStyleRules(styles, unstable_cssPriority, pseudo, media, support, result, rtlValue) {
@@ -37,3 +42,7 @@ if (unstable_cssPriority === void 0) { unstable_cssPriority = 0; }
                 }), ltrCSS = _a[0], rtlCSS = _a[1];
-                result[key] = [getStyleBucketName_1.getStyleBucketName(pseudo, media, support), className, ltrCSS, rtlCSS];
+                var resolvedRule = [getStyleBucketName_1.getStyleBucketName(pseudo, media, support), className, ltrCSS];
+                if (rtlCSS) {
+                    resolvedRule.push(rtlCSS);
+                }
+                result[key] = resolvedRule;
             }
@@ -40,0 +49,0 @@ else if (property === 'animationName') {

lib-amd/types.d.ts

@@ -33,2 +33,8 @@ import { Properties as CSSProperties } from 'csstype';
 export declare type MakeStylesReducedDefinitions = Record<string, MakeStylesResolvedRule>;
+/**
+ * A type for transformed styles, matches an output from build time transforms.
+ *
+ * @internal
+ */
+export declare type ResolvedStylesBySlots<Slots extends string> = Record<Slots, Record<string, MakeStylesResolvedRule>>;
 export interface MakeStylesRenderer {
@@ -35,0 +41,0 @@ id: string;

lib-commonjs/index.d.ts

@@ -5,2 +5,5 @@ export { createDOMRenderer } from './renderer/createDOMRenderer';
 export { makeStyles } from './makeStyles';
+export { createCSSVariablesProxy } from './runtime/createCSSVariablesProxy';
+export { resolveStyleRules } from './runtime/resolveStyleRules';
+export { __styles } from './__styles';
 export * from './types';

lib-commonjs/index.js

@@ -11,2 +11,9 @@ "use strict";
 exports.makeStyles = makeStyles_1.makeStyles;
+// Private exports, are used by build time transforms
+var createCSSVariablesProxy_1 = require("./runtime/createCSSVariablesProxy");
+exports.createCSSVariablesProxy = createCSSVariablesProxy_1.createCSSVariablesProxy;
+var resolveStyleRules_1 = require("./runtime/resolveStyleRules");
+exports.resolveStyleRules = resolveStyleRules_1.resolveStyleRules;
+var __styles_1 = require("./__styles");
+exports.__styles = __styles_1.__styles;
 //# sourceMappingURL=index.js.map

lib-commonjs/makeStaticStyles.d.ts

 import { MakeStaticStylesOptions, MakeStaticStyles } from './types';
 /**
  * Register static css.
- * @param styles styles object or string.
+ * @param styles - styles object or string.
  */
 export declare function makeStaticStyles(styles: MakeStaticStyles | MakeStaticStyles[]): (options: MakeStaticStylesOptions) => void;

lib-commonjs/makeStaticStyles.js

@@ -6,3 +6,3 @@ "use strict";
  * Register static css.
- * @param styles styles object or string.
+ * @param styles - styles object or string.
  */
@@ -9,0 +9,0 @@ function makeStaticStyles(styles) {

lib-commonjs/makeStyles.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var constants_1 = require("./constants");
 var createCSSVariablesProxy_1 = require("./runtime/createCSSVariablesProxy");
-var hashString_1 = require("./runtime/utils/hashString");
+var resolveClassesBySlots_1 = require("./runtime/resolveClassesBySlots");
 var resolveStyleRules_1 = require("./runtime/resolveStyleRules");
-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], dir === 'rtl'];
-        resolvedClasses[slotName] = resultSlotClasses;
-    }
-    return resolvedClasses;
-}
 function makeStyles(stylesBySlots, unstable_cssPriority) {
@@ -43,3 +30,3 @@ if (unstable_cssPriority === void 0) { unstable_cssPriority = 0; }
             if (resolvedClassesRtl === null || insertionCache[rendererId] === undefined) {
-                resolvedClassesRtl = resolveClasses(resolvedStyles, dir, renderer);
+                resolvedClassesRtl = resolveClassesBySlots_1.resolveClassesBySlots(resolvedStyles, dir, renderer);
                 insertionCache[rendererId] = true;
@@ -50,3 +37,3 @@ }
             if (resolvedClasses === null || insertionCache[renderer.id] === undefined) {
-                resolvedClasses = resolveClasses(resolvedStyles, dir, renderer);
+                resolvedClasses = resolveClassesBySlots_1.resolveClassesBySlots(resolvedStyles, dir, renderer);
                 insertionCache[options.renderer.id] = true;
@@ -53,0 +40,0 @@ }

lib-commonjs/runtime/createCSSVariablesProxy.d.ts

@@ -0,1 +1,6 @@
+/**
+ * A temporary solution that transforms passed theme to return CSS variables instead of actual values.
+ *
+ * @internal
+ */
 export declare function createCSSVariablesProxy<Tokens>(tokens: Tokens): Tokens;

lib-commonjs/runtime/createCSSVariablesProxy.js

@@ -6,2 +6,7 @@ "use strict";
 /* eslint-disable */
+/**
+ * A temporary solution that transforms passed theme to return CSS variables instead of actual values.
+ *
+ * @internal
+ */
 function createCSSVariablesProxy(tokens) {
@@ -8,0 +13,0 @@ var g = {

lib-commonjs/runtime/resolveStyleRules.d.ts

 import { MakeStyles, MakeStylesResolvedRule } from '../types';
+/**
+ * Transforms input styles to resolved rules: generates classnames and CSS.
+ *
+ * @internal
+ */
 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

@@ -16,2 +16,7 @@ "use strict";
 var getStyleBucketName_1 = require("./getStyleBucketName");
+/**
+ * Transforms input styles to resolved rules: generates classnames and CSS.
+ *
+ * @internal
+ */
 function resolveStyleRules(styles, unstable_cssPriority, pseudo, media, support, result, rtlValue) {
@@ -50,3 +55,7 @@ if (unstable_cssPriority === void 0) { unstable_cssPriority = 0; }
             }), ltrCSS = _a[0], rtlCSS = _a[1];
-            result[key] = [getStyleBucketName_1.getStyleBucketName(pseudo, media, support), className, ltrCSS, rtlCSS];
+            var resolvedRule = [getStyleBucketName_1.getStyleBucketName(pseudo, media, support), className, ltrCSS];
+            if (rtlCSS) {
+                resolvedRule.push(rtlCSS);
+            }
+            result[key] = resolvedRule;
         }
@@ -53,0 +62,0 @@ else if (property === 'animationName') {

lib-commonjs/types.d.ts

@@ -33,2 +33,8 @@ import { Properties as CSSProperties } from 'csstype';
 export declare type MakeStylesReducedDefinitions = Record<string, MakeStylesResolvedRule>;
+/**
+ * A type for transformed styles, matches an output from build time transforms.
+ *
+ * @internal
+ */
+export declare type ResolvedStylesBySlots<Slots extends string> = Record<Slots, Record<string, MakeStylesResolvedRule>>;
 export interface MakeStylesRenderer {
@@ -35,0 +41,0 @@ id: string;

lib/index.d.ts

@@ -5,2 +5,5 @@ export { createDOMRenderer } from './renderer/createDOMRenderer';
 export { makeStyles } from './makeStyles';
+export { createCSSVariablesProxy } from './runtime/createCSSVariablesProxy';
+export { resolveStyleRules } from './runtime/resolveStyleRules';
+export { __styles } from './__styles';
 export * from './types';

lib/index.js

@@ -5,2 +5,6 @@ export { createDOMRenderer } from './renderer/createDOMRenderer';
 export { makeStyles } from './makeStyles';
+// Private exports, are used by build time transforms
+export { createCSSVariablesProxy } from './runtime/createCSSVariablesProxy';
+export { resolveStyleRules } from './runtime/resolveStyleRules';
+export { __styles } from './__styles';
 //# sourceMappingURL=index.js.map

lib/makeStaticStyles.d.ts

 import { MakeStaticStylesOptions, MakeStaticStyles } from './types';
 /**
  * Register static css.
- * @param styles styles object or string.
+ * @param styles - styles object or string.
  */
 export declare function makeStaticStyles(styles: MakeStaticStyles | MakeStaticStyles[]): (options: MakeStaticStylesOptions) => void;

lib/makeStaticStyles.js

 import { resolveStaticStyleRules } from './runtime/resolveStaticStyleRules';
 /**
  * Register static css.
- * @param styles styles object or string.
+ * @param styles - styles object or string.
  */
@@ -6,0 +6,0 @@ export function makeStaticStyles(styles) {

lib/makeStyles.js

@@ -1,17 +0,4 @@
-import { DEFINITION_LOOKUP_TABLE, SEQUENCE_PREFIX } from './constants';
 import { createCSSVariablesProxy } from './runtime/createCSSVariablesProxy';
-import { hashString } from './runtime/utils/hashString';
+import { resolveClassesBySlots } from './runtime/resolveClassesBySlots';
 import { resolveStyleRules } from './runtime/resolveStyleRules';
-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], dir === 'rtl'];
-        resolvedClasses[slotName] = resultSlotClasses;
-    }
-    return resolvedClasses;
-}
 export function makeStyles(stylesBySlots, unstable_cssPriority) {
@@ -41,3 +28,3 @@ if (unstable_cssPriority === void 0) { unstable_cssPriority = 0; }
             if (resolvedClassesRtl === null || insertionCache[rendererId] === undefined) {
-                resolvedClassesRtl = resolveClasses(resolvedStyles, dir, renderer);
+                resolvedClassesRtl = resolveClassesBySlots(resolvedStyles, dir, renderer);
                 insertionCache[rendererId] = true;
@@ -48,3 +35,3 @@ }
             if (resolvedClasses === null || insertionCache[renderer.id] === undefined) {
-                resolvedClasses = resolveClasses(resolvedStyles, dir, renderer);
+                resolvedClasses = resolveClassesBySlots(resolvedStyles, dir, renderer);
                 insertionCache[options.renderer.id] = true;
@@ -51,0 +38,0 @@ }

lib/runtime/createCSSVariablesProxy.d.ts

@@ -0,1 +1,6 @@
+/**
+ * A temporary solution that transforms passed theme to return CSS variables instead of actual values.
+ *
+ * @internal
+ */
 export declare function createCSSVariablesProxy<Tokens>(tokens: Tokens): Tokens;

lib/runtime/createCSSVariablesProxy.js

 import { __assign } from "tslib";
 import { isObject } from './utils/isObject';
 /* eslint-disable */
+/**
+ * A temporary solution that transforms passed theme to return CSS variables instead of actual values.
+ *
+ * @internal
+ */
 export function createCSSVariablesProxy(tokens) {
@@ -5,0 +10,0 @@ var g = {

lib/runtime/resolveStyleRules.d.ts

 import { MakeStyles, MakeStylesResolvedRule } from '../types';
+/**
+ * Transforms input styles to resolved rules: generates classnames and CSS.
+ *
+ * @internal
+ */
 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

@@ -14,2 +14,7 @@ import { convert, convertProperty } from 'rtl-css-js/core';
 import { getStyleBucketName } from './getStyleBucketName';
+/**
+ * Transforms input styles to resolved rules: generates classnames and CSS.
+ *
+ * @internal
+ */
 export function resolveStyleRules(styles, unstable_cssPriority, pseudo, media, support, result, rtlValue) {
@@ -48,3 +53,7 @@ if (unstable_cssPriority === void 0) { unstable_cssPriority = 0; }
             }), ltrCSS = _a[0], rtlCSS = _a[1];
-            result[key] = [getStyleBucketName(pseudo, media, support), className, ltrCSS, rtlCSS];
+            var resolvedRule = [getStyleBucketName(pseudo, media, support), className, ltrCSS];
+            if (rtlCSS) {
+                resolvedRule.push(rtlCSS);
+            }
+            result[key] = resolvedRule;
         }
@@ -51,0 +60,0 @@ else if (property === 'animationName') {

lib/types.d.ts

@@ -33,2 +33,8 @@ import { Properties as CSSProperties } from 'csstype';
 export declare type MakeStylesReducedDefinitions = Record<string, MakeStylesResolvedRule>;
+/**
+ * A type for transformed styles, matches an output from build time transforms.
+ *
+ * @internal
+ */
+export declare type ResolvedStylesBySlots<Slots extends string> = Record<Slots, Record<string, MakeStylesResolvedRule>>;
 export interface MakeStylesRenderer {
@@ -35,0 +41,0 @@ id: string;

package.json

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

README.md

@@ -5,142 +5,4 @@ # @fluentui/make-styles
 
-These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+These are not production-ready modules and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
 
-## 😕 Problems
-
-### Perf is a problem
-
-Styles are computed for each part of each component, including duplicate calculations when there are multiple instances of the same component on the page. Even with caching it slow compared to native CSS.
-
-### Predictable style overrides
-
-Current version of `makeStyles()` is heavily inspired by Material UI and depends on file evaluation order which makes complicated to use it with React Suspense, for example: https://codesandbox.io/s/kind-davinci-xvwxg
-
-There is also no way to solve CSS specificity issues for styles overrides.
-
-### Improve Developer Experience
-
-_For Northstar:_ Style files are currently hard to read and manage due to their complexity. The complexity is caused by heavily nested conditionals and the use of abstractions (like helper functions). Styles also decoupled from components that caused an additional indirection.
-
-## 📜 Key notes
-
-The new iteration of `makeStyles()` splits the expensive part (processing styles, generating classnames) and the cheap part (merging classnames), expensive part can be done build time. Code also intentionally separated to highlight required part of `makeStyles()` and runtime. A production version of `makeStyles()` currently is less than 200 LoC.
-
-It uses the similar side effect approach as in `useCSS` hook and Emotion ([#14470](https://github.com/microsoft/fluentui/pull/14470)) (passing down classnames but referrencing a dictionary when merging).
-
-We use hash based atomic classnames, this makes deterministic (vs Fela is sequential = non-deterministic), it simplifies support server side rendering.
-
-Tokens (theme, siteVariables) are injected as CSS variables, can easily fallback to runtime evaluation in IE 11 without any change required on component/overrides side. However, this will require bundling of runtime part.
-
-## 📦 Current API proposal
-
-Anything can change based on feedback, but current API is shown below:
-
-```ts
-const useStyles = makeStyles([
-  [null, { color: 'red' }],
-  [selectors => selectors.color === 'green', { color: 'green' }]
-])
-
-//
-
-useStyles() // returns a classname for "color: red"
-useStyles({ color: 'green' }}  // returns a classname for "color: green"
-```
-
-### Why selectors and styles are separated?
-
-It removes any conditions in styles and and allows easily transform them to CSS.
-
-### Why selectors are functions?
-
-This allows to match styles in a single loop i.e. the best performance option that we have.
-
-I also evaluated matchers approach (https://github.com/microsoft/fluent-ui-react/pull/1301), but we need have to compare there two objects:
-
-```ts
-// ⚠️ not a real API
-
-const useStyles = makeStyles([
-  [null, { color: 'red' }],
-  [{ color: 'green' }, { color: 'green' }],
-]);
-```
-
-Another idea that was not enough performant is to transform these matchers to bitmasks. It also was slower as we need to transform user's input masks which gives us a second loop 🐌:
-
-```ts
-const masks = {
-  default: 0, // null
-  colorgreen: 1,
-};
-```
-
-It also made code complicated for understanding and debugging.
-
-### How about static styles?
-
-There is a separate API `makeStaticStyles` for this case.
-
-It can be used to register styles object:
-
-```ts
-makeStaticStyles({
-  '@font-face': {
-    fontFamily: 'Open Sans',
-    src: `url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
-         url("/fonts/OpenSans-Regular-webfont.woff") format("woff")`,
-  },
-  body: {
-    background: 'red',
-  },
-
-  /**
-   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting
-   *
-   * Not supported:
-   * .some {
-   *   .class { ... },
-   *   ':hover': { ... }
-   * }
-   *
-   * Supported:
-   * '.some.class': { ... }
-   * '.some.class:hover': { ... }
-   */
-});
-```
-
-Or string:
-
-```ts
-makeStaticStyles('body { background: red; } .foo { color: green; }');
-```
-
-Or array of styles object/string:
-
-```ts
-makeStaticStyles([
-  {
-    '@font-face': {
-      fontFamily: 'Open Sans',
-      src: `url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
-          url("/fonts/OpenSans-Regular-webfont.woff") format("woff")`,
-    },
-  },
-  {
-    '@font-face': {
-      fontFamily: 'My Font',
-      src: `url(my_font.woff)`,
-    },
-  },
-});
-```
-
-# Proposed build structure
-
-```
-/make-styles
-  /babel - contains babel plugin/preset for built time - 0 kb
-  /runtime - in dev contains all required utils, in prod - noop i.e. 0kb
-  /runtime-ie11 - in dev - alias to runtime, in prod - optimized runtime 20kb
-```
+Please refer to [react-make-styles/README.md](../react-make-styles/README.md) for more details.

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

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Number of package files

244

increased by9.42%

Number of low license alerts

0

decreased by-100%

License quality

100

increased by25%

Lines of code

3567

increased by13.2%

Worsened metrics

Total package byte prevSize

354785

decreased by-7.49%

Number of lines in readme file

8

decreased by-94.52%

No dependency changes