microsoft · layershifter · Feb 25, 2021 · Feb 8, 2021 · Feb 8, 2021 · Feb 9, 2021
diff --git a/packages/make-styles/src/makeStyles.ts b/packages/make-styles/src/makeStyles.ts
@@ -8,6 +8,20 @@ import {
   MakeStylesResolvedDefinition,
 } from './types';
 
+class UsedVariables {
+  public tokens: Record<string, boolean> = {};
+  public addUsed(vars: string[]) {
+    vars.forEach(v => {
+      this.tokens[v] = true;
+    });
+  }
+  public addOther(vars: string[]) {
+    vars.forEach(v => {
+      this.tokens[v] = this.tokens[v] ?? false;
+    });
+  }
+}
+
 export function makeStyles<Selectors, Tokens>(
   definitions: MakeStylesDefinition<Selectors, Tokens>[],
   unstable_cssPriority: number = 0,
@@ -29,6 +43,9 @@ export function makeStyles<Selectors, Tokens>(
     //         unstable_cssPriority,
     //       );
     // } else {
+    const { debug } = options;
+    // DEBUG // console.groupCollapsed(`computeClasses[${debug?.debugId}]`);
+
     const tokens = CAN_USE_CSS_VARIABLES ? createCSSVariablesProxy(options.tokens) : options.tokens;
     const resolvedDefinitions = resolveDefinitions(
       (definitions as unknown) as MakeStylesResolvedDefinition<Selectors, Tokens>[],
@@ -40,14 +57,46 @@ export function makeStyles<Selectors, Tokens>(
     let matchedIndexes = '';
     const matchedDefinitions: MakeStylesMatchedDefinitions[] = [];
 
+    const usedVariables = new UsedVariables();
+
     for (let i = 0, l = resolvedDefinitions.length; i < l; i++) {
       const matcherFn = resolvedDefinitions[i][0];
 
+      const referencedVars: string[] = [];
+      Object.keys(resolvedDefinitions[i][2])
+        .map(key => resolvedDefinitions[i][2][key][1])
+        .reduce((sum, style) => {
+          const regexp = RegExp('\\Wvar\\s*\\(\\s*(--[\\w-]+)', 'g');
+          let match;
+          while ((match = regexp.exec(style)) !== null) {
+            sum.add(match[1]);
+          }
+          return sum;
+        }, new Set())
+        .forEach(cssVar => referencedVars.push(cssVar));
+
       if (matcherFn === null || matcherFn(selectors)) {
+        // DEBUG // console.group(`%c HIT - ${debug?.debugId} matcher:`, 'color: green', matcherFn, {
+        // DEBUG //   definition: resolvedDefinitions[i][2],
+        // DEBUG // });
+        usedVariables.addUsed(referencedVars);
+
         matchedDefinitions.push(resolvedDefinitions[i][2]);
         matchedIndexes += i;
+      } else {
+        // DEBUG // console.group(`%c MISS ${debug?.debugId} matcher:`, 'color: red', matcherFn, {
+        // DEBUG //   definition: resolvedDefinitions[i][2],
+        // DEBUG // });
+        usedVariables.addOther(referencedVars);
       }
+      // DEBUG // console.log(referencedVars);
+      // DEBUG // console.groupEnd();
+    }
+
+    if (debug?.tokens) {
+      debug.tokens = usedVariables.tokens;
     }
+    // DEBUG // console.groupEnd();
 
     const cxCacheKey = options.renderer.id + matchedIndexes;
     const cxCacheElement = cxCache[cxCacheKey];

diff --git a/packages/make-styles/src/renderer/createDOMRenderer.ts b/packages/make-styles/src/renderer/createDOMRenderer.ts
@@ -58,8 +58,16 @@ export function createDOMRenderer(targetDocument: Document = document): MakeStyl
 
         renderer.insertionCache[cacheKey] = true;
 
-        (renderer.styleElement.sheet as CSSStyleSheet).insertRule(ruleCSS, renderer.index);
-        renderer.index++;
+        // The browser will fail to insert rule syntax it doesn't understand, such as :-moz-focusring selectors
+        // We want to log the error but continue with other rules instead of aborting
+        // See also: https://github.com/vercel/styled-jsx/issues/295
+        try {
+          (renderer.styleElement.sheet as CSSStyleSheet).insertRule(ruleCSS, renderer.index);
+          renderer.index++;
+        } catch (err) {
+          // eslint-disable-next-line no-console
+          console.error(err);
+        }
       }
 
       return classes.slice(0, -1);

diff --git a/packages/make-styles/src/runtime/resolveDefinitions.ts b/packages/make-styles/src/runtime/resolveDefinitions.ts
@@ -55,9 +55,11 @@ export function resolveDefinitions<Selectors, Tokens>(
       // we can always use prebuilt styles in this case and static cache in runtime
 
       if (resolvedRule) {
+        // DEBUG // console.log(`resolveDefinitions[${i}] - already resolved`);
         return [matcher, undefined, resolvedRule];
       }
 
+      // DEBUG // console.log(`resolveDefinitions[${i}] - resolving`);
       // if static cache is not present, eval it and mutate original object
       const styles: MakeStyles =
         typeof styleRule === 'function' ? (styleRule as MakeStylesStyleFunctionRule<Tokens>)(tokens!!) : styleRule!!;

diff --git a/packages/make-styles/src/types.ts b/packages/make-styles/src/types.ts
@@ -16,6 +16,10 @@ export interface MakeStylesOptions<Tokens> {
   rtl?: boolean;
   renderer: MakeStylesRenderer;
   tokens: Tokens;
+  debug?: {
+    debugId?: string;
+    tokens?: Record<string, boolean>;
+  };
 }
 
 export type MakeStaticStyles =

@@ -50,7 +50,9 @@
     "@fluentui/keyboard-key": "^0.2.13",
     "@fluentui/react-hooks": "^8.0.0-beta.11",
     "@fluentui/react-icons-mdl2": "^1.0.0-beta.13",
+    "@fluentui/react-make-styles": "^0.2.2",
     "@fluentui/react-shared-contexts": "^1.0.0-beta.5",
+    "@fluentui/react-theme": "^0.3.0",
     "@fluentui/react-theme-provider": "^1.0.0-beta.23",
     "@fluentui/react-utils": "^0.3.1",
     "@fluentui/theme": "^2.0.0-beta.15",