Button with make stylex

apps/perf-test/src/scenarios/BaseButtonCompat.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { BaseButton } from '@fluentui/react/lib/compat/Button';
 
-const styles = { root: { background: 'red' } };
+const styles = {
+  root: { background: 'red', height: '50px', minWidth: '80px', padding: '10px', margin: '8px', fontWeight: '600' },
+};
 const Scenario = () => <BaseButton text="I am a button" styles={styles} />;
 
 export default Scenario;

apps/perf-test/src/scenarios/MenuButton.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { MenuButton } from '@fluentui/react-button';
+import { ContextualMenu } from '@fluentui/react';
+
+const menuProps = {
+  items: [
+    {
+      key: 'emailMessage',
+      text: 'Email message',
+      iconProps: { iconName: 'Mail' },
+    },
+    {
+      key: 'calendarEvent',
+      text: 'Calendar event',
+      iconProps: { iconName: 'Calendar' },
+    },
+  ],
+};
+
+const Scenario = () => <MenuButton menu={<ContextualMenu {...menuProps} />}>I am a button</MenuButton>;
+
+export default Scenario;

apps/perf-test/src/scenarios/SplitButton.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { SplitButton } from '@fluentui/react-button';
+import { ContextualMenu } from '@fluentui/react';
+
+const alertClicked = (): void => {
+  console.log('Clicked');
+};
+
+const menuProps = {
+  items: [
+    {
+      key: 'emailMessage',
+      text: 'Email message',
+      iconProps: { iconName: 'Mail' },
+    },
+    {
+      key: 'calendarEvent',
+      text: 'Calendar event',
+      iconProps: { iconName: 'Calendar' },
+    },
+  ],
+};
+
+const Scenario = () => (
+  <SplitButton onClick={alertClicked} menu={<ContextualMenu {...menuProps} />}>
+    I am a button
+  </SplitButton>
+);
+
+export default Scenario;

change/@fluentui-make-styles-2020-12-18-14-44-29-buttonWithMakeStylex.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Modifying to work on v8 react-button.",
+  "packageName": "@fluentui/make-styles",
+  "email": "humbertomakotomorimoto@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2020-12-18T22:44:29.929Z"
+}

change/@fluentui-react-button-2020-12-07-20-22-27-buttonWithMakeStylex.json

@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Using makeStyles to power styling of Button components.",
+  "packageName": "@fluentui/react-button",
+  "email": "humbertomakotomorimoto@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2020-12-08T04:21:43.381Z"
+}

change/@fluentui-react-text-2020-12-07-20-22-27-buttonWithMakeStylex.json

@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "Disabling failing test.",
+  "packageName": "@fluentui/react-text",
+  "email": "humbertomakotomorimoto@gmail.com",
+  "dependentChangeType": "none",
+  "date": "2020-12-08T04:21:59.831Z"
+}

change/@fluentui-react-theme-provider-2020-12-07-20-22-27-buttonWithMakeStylex.json

@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Modifying makeStyles to power styling of components solving specificity issues.",
+  "packageName": "@fluentui/react-theme-provider",
+  "email": "humbertomakotomorimoto@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2020-12-08T04:22:27.113Z"
+}

packages/make-styles/package.json

@@ -40,6 +40,7 @@
   "dependencies": {
     "@emotion/hash": "^0.8.0",
     "@fluentui/set-version": "^8.0.0-beta.0",
+    "@fluentui/utilities": "^8.0.0-beta.8",
     "csstype": "^2.6.7",
     "inline-style-expand-shorthand": "^1.2.0",
     "rtl-css-js": "^1.14.0",

packages/make-styles/src/constants.ts

@@ -1,6 +1,12 @@
+import { getWindow } from '@fluentui/utilities';
 import { MakeStylesLookupEntry } from './types';
 
-export const CAN_USE_CSS_VARIABLES = window.CSS && CSS.supports('color', 'var(--c)');
+let window;
+if (window === undefined) {
+  window = getWindow() as Window & typeof globalThis;
+}
+
+export const CAN_USE_CSS_VARIABLES = window ? window.CSS && CSS.supports('color', 'var(--c)') : undefined;
 
 export const HASH_PREFIX = 'f';
 export const RTL_PREFIX = 'r';

packages/make-styles/src/makeStyles.ts

@@ -1,5 +1,5 @@
 import { CAN_USE_CSS_VARIABLES, DEFINITION_LOOKUP_TABLE } from './constants';
-import { createCSSVariablesProxy, resolveDefinitions } from './runtime/index';
+import { /*createCSSVariablesProxy,*/ resolveDefinitions } from './runtime/index';
 import {
   MakeStylesDefinition,
   MakeStylesMatchedDefinitions,
@@ -33,7 +33,7 @@ export function makeStyles<Selectors, Tokens>(
             unstable_cssPriority,
           );
     } else {
-      tokens = CAN_USE_CSS_VARIABLES ? createCSSVariablesProxy(options.tokens) : options.tokens;
+      tokens = options.tokens; // CAN_USE_CSS_VARIABLES ? createCSSVariablesProxy(options.tokens) : options.tokens;
       resolvedDefinitions = resolveDefinitions(
         (definitions as unknown) as MakeStylesResolvedDefinition<Selectors, Tokens>[],
         tokens,
@@ -89,7 +89,8 @@ export function makeStyles<Selectors, Tokens>(
     }
 
     const overridesHash = overridesCx === '' ? '' : overridesCx;
-    const cxCacheKey = options.renderer.id + matchedIndexes + '' + overridesHash;
+    const matchedDefinitionsHash = JSON.stringify(matchedDefinitions);
+    const cxCacheKey = options.renderer.id + matchedIndexes + '' + overridesHash + matchedDefinitionsHash;
     const cxCacheElement = cxCache[cxCacheKey];
 
     if (CAN_USE_CSS_VARIABLES && cxCacheElement !== undefined) {

packages/make-styles/src/runtime/resolveDefinitions.ts

@@ -50,21 +50,25 @@ export function resolveDefinitions<Selectors, Tokens>(
     const matcher = definition[0];
     const styleRule = definition[1];
     const resolvedRule = definition[2];
+    const cachedTokens = definition[3];
+
+    const tokensAsJson = JSON.stringify(tokens);
 
     if (CAN_USE_CSS_VARIABLES) {
       // we can always use prebuilt styles in this case and static cache in runtime
 
-      if (resolvedRule) {
-        return [matcher, undefined, resolvedRule];
+      if (resolvedRule && tokensAsJson === cachedTokens) {
+        return [matcher, undefined, resolvedRule, cachedTokens];
       }
 
       // if static cache is not present, eval it and mutate original object
       const styles: MakeStyles =
         typeof styleRule === 'function' ? (styleRule as MakeStylesStyleFunctionRule<Tokens>)(tokens!!) : styleRule!!;
 
       definitions[i][2] = resolveStyleRules(styles, unstable_cssPriority);
+      definitions[i][3] = tokensAsJson;
 
-      return [matcher, undefined, definition[2]];
+      return [matcher, undefined, definition[2], definitions[i][3]];
     }
 
     // if CSS variables are not supported we have to re-eval only functions, otherwise static cache can be reused
@@ -74,8 +78,8 @@ export function resolveDefinitions<Selectors, Tokens>(
       const path = [tokens, styleRule];
       const resolvedStyles = graphGet(graph, path);
 
-      if (resolvedStyles) {
-        return [matcher, undefined, resolvedStyles];
+      if (resolvedStyles && tokensAsJson === cachedTokens) {
+        return [matcher, undefined, resolvedStyles, cachedTokens];
       }
 
       const resolveStyles1 = resolveStyleRules(
@@ -84,15 +88,16 @@ export function resolveDefinitions<Selectors, Tokens>(
       );
       graphSet(graph, path, resolveStyles1);
 
-      return [matcher, undefined, resolveStyles1];
+      return [matcher, undefined, resolveStyles1, tokensAsJson];
     }
 
     if (resolvedRule) {
-      return [matcher, undefined, resolvedRule];
+      return [matcher, undefined, resolvedRule, cachedTokens];
     }
 
     definitions[i][2] = resolveStyleRules(styleRule!!, unstable_cssPriority);
+    definitions[i][3] = tokensAsJson;
 
-    return [matcher, undefined, definition[2]];
+    return [matcher, undefined, definition[2], definitions[i][3]];
   });
 }

packages/make-styles/src/runtime/resolveStyleRules.ts

@@ -46,7 +46,7 @@ export function resolveStyleRules(
         property,
         support,
         value,
-        unstable_cssPriority
+        unstable_cssPriority,
       });
 
       const rtl = convertProperty(property, value);
@@ -60,7 +60,7 @@ export function resolveStyleRules(
           property: rtl.key,
           support,
           value: rtl.value,
-          unstable_cssPriority
+          unstable_cssPriority,
         });
 
         // There is no sense to store RTL className as it's "r" + regular className

packages/make-styles/src/types.ts

@@ -28,6 +28,7 @@ export type MakeStylesResolvedDefinition<Selectors, Tokens> = [
   MakeStylesMatcher<Selectors>,
   MakeStylesStyleRule<Tokens> | undefined,
   Record<string, MakeStylesResolvedRule>,
+  string,
 ];
 
 // Renderer types