From ee3b017cac1181ceacf4ccefef8210fb51ee9000 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Mon, 15 Nov 2021 12:00:12 +0100
Subject: [PATCH 1/8] proto: use compat layer between makeStyles & Fela

---
 package.json                                  | 11 +--
 .../VariableResolver/VariableResolver.tsx     |  9 +-
 .../VariableResolver/useEnhancedRenderer.ts   | 15 +--
 packages/fluentui/react-bindings/package.json |  1 +
 .../fluentui/react-bindings/src/context.ts    | 14 ++-
 .../react-bindings/src/hooks/useStyles.ts     |  5 +-
 .../react-bindings/src/styles/types.ts        |  2 +
 .../package.json                              |  2 +-
 .../src/createFelaRenderer.tsx                | 97 +++++++++----------
 .../src/felaPerformanceEnhancer.ts            | 10 +-
 .../src/felaStylisEnhancer.ts                 | 21 +---
 .../src/makeStylesCompat/generateClassName.ts |  8 ++
 .../makeStylesCompat/getStyleBucketName.ts    | 67 +++++++++++++
 .../getStyleSheetForBucket.ts                 | 61 ++++++++++++
 .../src/makeStylesCompat/index.ts             |  5 +
 .../src/makeStylesCompat/insertRule.ts        | 93 ++++++++++++++++++
 .../src/makeStylesCompat/types.ts             | 36 +++++++
 .../src/types.ts                              | 13 +++
 .../Animation/useAnimationStyles.ts           |  4 +-
 .../src/components/Design/Design.tsx          |  5 +-
 .../src/components/Provider/Provider.tsx      | 14 +--
 .../src/utils/createComponentInternal.ts      |  4 +-
 .../src/utils/mergeProviderContexts.ts        | 34 +------
 .../src/utils/renderComponent.tsx             | 17 +++-
 24 files changed, 401 insertions(+), 147 deletions(-)
 create mode 100644 packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/generateClassName.ts
 create mode 100644 packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/getStyleBucketName.ts
 create mode 100644 packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/getStyleSheetForBucket.ts
 create mode 100644 packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/index.ts
 create mode 100644 packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts
 create mode 100644 packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/types.ts

diff --git a/package.json b/package.json
index 4d853eefe82ea1..f5604c4afbb576 100644
--- a/package.json
+++ b/package.json
@@ -249,11 +249,6 @@
       "typings"
     ],
     "nohoist": [
-      "@fluentui/make-styles/@types/stylis",
-      "@fluentui/make-styles/stylis",
-      "@fluentui/react-northstar-fela-renderer/stylis",
-      "@fluentui/react-northstar-emotion-renderer/@types/stylis",
-      "@fluentui/react-northstar-emotion-renderer/stylis",
       "@fluentui/web-components/@microsoft/eslint-config-fast-dna",
       "@fluentui/web-components/@storybook/html",
       "@fluentui/web-components/ts-loader",
@@ -370,8 +365,7 @@
           "@fluentui/dom-utilities",
           "@fluentui/eslint-plugin",
           "@fluentui/react",
-          "@fluentui/react-conformance",
-          "stylis"
+          "@fluentui/react-conformance"
         ]
       },
       {
@@ -379,8 +373,7 @@
           "@fluentui/react-northstar-emotion-renderer"
         ],
         "dependencies": [
-          "@fluentui/eslint-plugin",
-          "stylis"
+          "@fluentui/eslint-plugin"
         ]
       },
       {
diff --git a/packages/fluentui/docs/src/components/VariableResolver/VariableResolver.tsx b/packages/fluentui/docs/src/components/VariableResolver/VariableResolver.tsx
index 56d09788c4c102..012d5d21cf22f5 100644
--- a/packages/fluentui/docs/src/components/VariableResolver/VariableResolver.tsx
+++ b/packages/fluentui/docs/src/components/VariableResolver/VariableResolver.tsx
@@ -1,4 +1,4 @@
-import { useFluentContext, Unstable_FluentContextProvider } from '@fluentui/react-northstar';
+import { useFluentContext, useNorthstarRenderer, Unstable_NorthstarRendererContext } from '@fluentui/react-northstar';
 import * as _ from 'lodash';
 import * as React from 'react';
 
@@ -15,8 +15,9 @@ const VariableResolver: React.FunctionComponent<VariableResolverProps> = props =
   const elementRef = React.useRef<HTMLDivElement>();
   const latestVariables = React.useRef<UsedVariables>({});
 
+  const renderer = useNorthstarRenderer();
   const context = useFluentContext();
-  const [enhancedContext, resolvedVariables] = useEnhancedRenderer(context);
+  const [enhancedRenderer, resolvedVariables] = useEnhancedRenderer(context, renderer);
 
   const onClassNamesChange = React.useCallback(() => {
     if (!_.isEqual(resolvedVariables.current, latestVariables.current)) {
@@ -32,9 +33,9 @@ const VariableResolver: React.FunctionComponent<VariableResolverProps> = props =
   useClassNamesListener(elementRef, onClassNamesChange);
 
   return (
-    <Unstable_FluentContextProvider value={enhancedContext}>
+    <Unstable_NorthstarRendererContext.Provider value={enhancedRenderer}>
       <div ref={elementRef}>{props.children}</div>
-    </Unstable_FluentContextProvider>
+    </Unstable_NorthstarRendererContext.Provider>
   );
 };
 
diff --git a/packages/fluentui/docs/src/components/VariableResolver/useEnhancedRenderer.ts b/packages/fluentui/docs/src/components/VariableResolver/useEnhancedRenderer.ts
index c4a3e47394213d..41bf2e6869db52 100644
--- a/packages/fluentui/docs/src/components/VariableResolver/useEnhancedRenderer.ts
+++ b/packages/fluentui/docs/src/components/VariableResolver/useEnhancedRenderer.ts
@@ -9,7 +9,8 @@ export type UsedVariables = Record<string, Record<string, null>>;
 /** Enhances passed Fela or Emotion renderer to get actual variables. */
 const useEnhancedRenderer = (
   context: ProviderContextPrepared,
-): [ProviderContextPrepared, React.RefObject<UsedVariables>] => {
+  renderer: Renderer,
+): [Renderer, React.RefObject<UsedVariables>] => {
   const resolvedVariables = React.useRef<UsedVariables>({});
   const renderRule: Renderer['renderRule'] = React.useCallback(
     (styles, rendererParam) => {
@@ -26,20 +27,14 @@ const useEnhancedRenderer = (
         }
       });
 
-      return context.renderer.renderRule(styles, rendererParam);
+      return renderer.renderRule(styles, rendererParam);
     },
     [context],
   );
 
-  const enhancedContext: ProviderContextPrepared = React.useMemo(
-    () => ({
-      ...context,
-      renderer: { ...context.renderer, renderRule },
-    }),
-    [context, renderRule],
-  );
+  const enhancedRenderer: Renderer = React.useMemo(() => ({ ...renderer, renderRule }), [context, renderRule]);
 
-  return [enhancedContext, resolvedVariables];
+  return [enhancedRenderer, resolvedVariables];
 };
 
 export default useEnhancedRenderer;
diff --git a/packages/fluentui/react-bindings/package.json b/packages/fluentui/react-bindings/package.json
index 1e78894a711cb4..18605f7f8c4a49 100644
--- a/packages/fluentui/react-bindings/package.json
+++ b/packages/fluentui/react-bindings/package.json
@@ -7,6 +7,7 @@
   "dependencies": {
     "@babel/runtime": "^7.10.4",
     "@fluentui/accessibility": "^0.59.0",
+    "@fluentui/make-styles": "9.0.0-beta.2",
     "@fluentui/react-component-event-listener": "^0.59.0",
     "@fluentui/react-component-ref": "^0.59.0",
     "@fluentui/react-northstar-fela-renderer": "^0.59.0",
diff --git a/packages/fluentui/react-bindings/src/context.ts b/packages/fluentui/react-bindings/src/context.ts
index 5d2f35bdfc3d26..255b78ba68f997 100644
--- a/packages/fluentui/react-bindings/src/context.ts
+++ b/packages/fluentui/react-bindings/src/context.ts
@@ -1,4 +1,6 @@
-import { noopRenderer, Renderer } from '@fluentui/react-northstar-styles-renderer';
+import { createDOMRenderer } from '@fluentui/make-styles';
+import { Renderer } from '@fluentui/react-northstar-styles-renderer';
+import { createFelaRenderer } from '@fluentui/react-northstar-fela-renderer';
 import { emptyTheme, ThemeInput, ThemePrepared } from '@fluentui/styles';
 import * as React from 'react';
 
@@ -27,7 +29,6 @@ export type ProviderContextPrepared = {
   rtl: boolean;
   disableAnimations: boolean;
   performance: StylesContextPerformance;
-  renderer: Renderer;
   theme: ThemePrepared;
   telemetry: Telemetry | undefined;
   // `target` can be undefined for SSR
@@ -46,7 +47,6 @@ export const defaultContextValue: ProviderContextPrepared = {
   rtl: undefined as any,
   disableAnimations: false,
   performance: defaultPerformanceFlags,
-  renderer: noopRenderer,
   theme: emptyTheme,
   telemetry: undefined,
   target: undefined,
@@ -59,3 +59,11 @@ export function useFluentContext(): ProviderContextPrepared {
 }
 
 export const Unstable_FluentContextProvider = FluentContext.Provider;
+
+export const Unstable_NorthstarRendererContext = React.createContext<Renderer>(
+  createFelaRenderer(document, createDOMRenderer(document)),
+);
+
+export function useNorthstarRenderer(): Renderer {
+  return React.useContext(Unstable_NorthstarRendererContext);
+}
diff --git a/packages/fluentui/react-bindings/src/hooks/useStyles.ts b/packages/fluentui/react-bindings/src/hooks/useStyles.ts
index 05817a9341387f..38c43f8e6fc586 100644
--- a/packages/fluentui/react-bindings/src/hooks/useStyles.ts
+++ b/packages/fluentui/react-bindings/src/hooks/useStyles.ts
@@ -2,7 +2,7 @@ import { ComposePreparedOptions } from '../compose';
 import { ComponentSlotStyle, ComponentSlotStylesResolved, ComponentVariablesInput, DebugData } from '@fluentui/styles';
 import * as React from 'react';
 
-import { useFluentContext } from '../context';
+import { useFluentContext, useNorthstarRenderer } from '../context';
 import { ComponentDesignProp, ComponentSlotClasses, PrimitiveProps } from '../styles/types';
 import { getStyles } from '../styles/getStyles';
 
@@ -57,6 +57,7 @@ export const useStyles = <StyleProps extends PrimitiveProps>(
   displayName: string,
   options: UseStylesOptions<StyleProps>,
 ): UseStylesResult => {
+  const renderer = useNorthstarRenderer();
   const context = useFluentContext();
 
   const {
@@ -91,7 +92,7 @@ export const useStyles = <StyleProps extends PrimitiveProps>(
 
     // Context values
     disableAnimations: context.disableAnimations,
-    renderer: context.renderer,
+    renderer,
     rtl,
     saveDebug: fluentUIDebug => (debug.current = { fluentUIDebug }),
     theme: context.theme,
diff --git a/packages/fluentui/react-bindings/src/styles/types.ts b/packages/fluentui/react-bindings/src/styles/types.ts
index bdc6a4ce4bd14c..7f528fcaa7e7fb 100644
--- a/packages/fluentui/react-bindings/src/styles/types.ts
+++ b/packages/fluentui/react-bindings/src/styles/types.ts
@@ -1,5 +1,6 @@
 import { DebugData, ICSSInJSStyle, PropsWithVarsAndStyles } from '@fluentui/styles';
 import { ProviderContextPrepared } from '../context';
+import { Renderer } from '@fluentui/react-northstar-styles-renderer';
 
 // Notice:
 // This temporary lives here, will be remove once `animation` prop will be dropped
@@ -57,5 +58,6 @@ export type ResolveStylesOptions = Omit<ProviderContextPrepared, 'target'> & {
   componentProps: Record<string, any>;
   inlineStylesProps: PropsWithVarsAndStyles & { design?: ComponentDesignProp };
   rtl: boolean;
+  renderer: Renderer;
   saveDebug: (debug: DebugData | null) => void;
 };
diff --git a/packages/fluentui/react-northstar-fela-renderer/package.json b/packages/fluentui/react-northstar-fela-renderer/package.json
index f91d9daef646db..bd9c6f79194e21 100644
--- a/packages/fluentui/react-northstar-fela-renderer/package.json
+++ b/packages/fluentui/react-northstar-fela-renderer/package.json
@@ -17,7 +17,7 @@
     "inline-style-expand-shorthand": "^1.2.0",
     "lodash": "^4.17.15",
     "react-fela": "^10.6.1",
-    "stylis": "^3.5.4"
+    "stylis": "^4.0.6"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx b/packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx
index c8e0bbaf59ad84..484315794f25e1 100644
--- a/packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx
+++ b/packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx
@@ -1,5 +1,5 @@
-import { CreateRenderer } from '@fluentui/react-northstar-styles-renderer';
-import { createRenderer, IRenderer, IStyle, TPlugin } from 'fela';
+import { Renderer } from '@fluentui/react-northstar-styles-renderer';
+import { createRenderer, IConfig, IRenderer, IStyle, TPlugin } from 'fela';
 import felaPluginEmbedded from 'fela-plugin-embedded';
 import felaPluginFallbackValue from 'fela-plugin-fallback-value';
 import felaPluginPlaceholderPrefixer from 'fela-plugin-placeholder-prefixer';
@@ -14,7 +14,9 @@ import { felaInvokeKeyframesPlugin } from './felaInvokeKeyframesPlugin';
 import { felaPerformanceEnhancer } from './felaPerformanceEnhancer';
 import { felaSanitizeCssPlugin } from './felaSanitizeCssPlugin';
 import { felaStylisEnhancer } from './felaStylisEnhancer';
-import { FelaRendererParam } from './types';
+import { insertRule } from './makeStylesCompat';
+import { FelaRenderer, FelaRendererParam } from './types';
+import type { MakeStylesRenderer } from './makeStylesCompat';
 
 let felaDevMode = false;
 
@@ -46,67 +48,60 @@ if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
   }
 }
 
-const blocklistedClassNames = [
-  // Blocklist contains a list of classNames that are used by FontAwesome
-  // https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
-  'fa',
-  'fas',
-  'far',
-  'fal',
-  'fab',
-  // Used by https://github.com/fullcalendar/fullcalendar
-  'fc',
-  // .cke is used by CKEditor
-  'ck',
-  'cke',
-];
-
-const filterClassName = (className: string): boolean => {
-  // Also ensure that class name does not contain 'ad' as it might
-  // cause compatibility issues regarding Ad blockers.
-  return className.indexOf('ad') === -1 && blocklistedClassNames.indexOf(className) === -1;
+const filterClassName = (): boolean => {
+  return true;
 };
 
-const rendererConfig = {
-  devMode: felaDevMode,
-  filterClassName,
-  enhancers: [felaPerformanceEnhancer, felaFocusVisibleEnhancer, felaStylisEnhancer],
-  plugins: [
-    felaDisableAnimationsPlugin as TPlugin,
+type CreateFelaRenderer = (target?: Document, makeStylesRenderer?: MakeStylesRenderer) => Renderer;
 
-    // is necessary to prevent accidental style typos
-    // from breaking ALL the styles on the page
-    felaSanitizeCssPlugin as TPlugin,
+export const createFelaRenderer: CreateFelaRenderer = (target, makeStylesRenderer) => {
+  const rendererConfig: IConfig = {
+    devMode: felaDevMode,
+    filterClassName,
+    enhancers: [felaPerformanceEnhancer, felaFocusVisibleEnhancer, felaStylisEnhancer],
+    plugins: [
+      felaDisableAnimationsPlugin as TPlugin,
 
-    felaPluginPlaceholderPrefixer(),
-    felaInvokeKeyframesPlugin as TPlugin,
-    felaPluginEmbedded(),
+      // is necessary to prevent accidental style typos
+      // from breaking ALL the styles on the page
+      felaSanitizeCssPlugin as TPlugin,
 
-    felaExpandCssShorthandsPlugin as TPlugin,
+      felaPluginPlaceholderPrefixer(),
+      felaInvokeKeyframesPlugin as TPlugin,
+      felaPluginEmbedded(),
 
-    // Heads up!
-    // This is required after fela-plugin-prefixer to resolve the array of fallback values prefixer produces.
-    felaPluginFallbackValue(),
+      felaExpandCssShorthandsPlugin as TPlugin,
 
-    felaPluginRtl(),
-  ],
-};
+      // Heads up!
+      // This is required after fela-plugin-prefixer to resolve the array of fallback values prefixer produces.
+      felaPluginFallbackValue(),
 
-export const createFelaRenderer: CreateRenderer = target => {
-  const felaRenderer = createRenderer(rendererConfig) as IRenderer & {
-    listeners: [];
-    nodes: Record<string, HTMLStyleElement>;
-    updateSubscription: Function | undefined;
+      felaPluginRtl(),
+    ],
   };
+  const felaRenderer = createRenderer(rendererConfig) as FelaRenderer;
+
+  felaRenderer.isCompat = !!makeStylesRenderer;
   let usedRenderers: number = 0;
 
   // rehydration disabled to avoid leaking styles between renderers
   // https://github.com/rofrischmann/fela/blob/master/docs/api/fela-dom/rehydrate.md
-  const Provider: React.FC = props => (
-    <RendererProvider renderer={felaRenderer} {...{ rehydrate: false, targetDocument: target }}>
-      {props.children}
-    </RendererProvider>
-  );
+  const Provider: React.FC = props => {
+    if (felaRenderer.isCompat) {
+      if (!felaRenderer.updateSubscription) {
+        felaRenderer.updateSubscription = insertRule(target, makeStylesRenderer!);
+        felaRenderer.subscribe(felaRenderer.updateSubscription);
+      }
+
+      return <>{props.children}</>;
+    }
+
+    return (
+      <RendererProvider renderer={felaRenderer} {...{ rehydrate: false, targetDocument: target }}>
+        {props.children}
+      </RendererProvider>
+    );
+  };
 
   return {
     registerUsage: () => {
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/felaPerformanceEnhancer.ts b/packages/fluentui/react-northstar-fela-renderer/src/felaPerformanceEnhancer.ts
index c4ec7bf3ecc4d2..1214a34ecf41c9 100644
--- a/packages/fluentui/react-northstar-fela-renderer/src/felaPerformanceEnhancer.ts
+++ b/packages/fluentui/react-northstar-fela-renderer/src/felaPerformanceEnhancer.ts
@@ -25,6 +25,7 @@ import {
   RULE_TYPE,
 } from 'fela-utils';
 
+import { generateClassName as generateCompatClassName, getStyleBucketName } from './makeStylesCompat';
 import { FelaRenderer, FelaRendererChange } from './types';
 
 function isPlainObject(val: any) {
@@ -120,13 +121,15 @@ Check http://fela.js.org/docs/basics/Rules.html#styleobject for more information
             /* eslint-enable */
           }
 
-          const className =
-            renderer.selectorPrefix + generateClassName(renderer.getNextRuleIdentifier, renderer.filterClassName);
+          const atomicClassName = renderer.isCompat
+            ? generateCompatClassName(property, value, pseudo, media, support)
+            : generateClassName(renderer.getNextRuleIdentifier, renderer.filterClassName);
+          const className = renderer.selectorPrefix + atomicClassName;
 
           const declaration = cssifyDeclaration(property, value);
           const selector = generateCSSSelector(className, pseudo);
 
-          const change = {
+          const change: FelaRendererChange = {
             type: RULE_TYPE,
             className,
             selector,
@@ -134,6 +137,7 @@ Check http://fela.js.org/docs/basics/Rules.html#styleobject for more information
             pseudo,
             media,
             support,
+            bucket: getStyleBucketName(pseudo, media, support),
           };
 
           renderer.cache[declarationReference] = change;
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/felaStylisEnhancer.ts b/packages/fluentui/react-northstar-fela-renderer/src/felaStylisEnhancer.ts
index e9b842afd92353..30c0b9880b63b2 100644
--- a/packages/fluentui/react-northstar-fela-renderer/src/felaStylisEnhancer.ts
+++ b/packages/fluentui/react-northstar-fela-renderer/src/felaStylisEnhancer.ts
@@ -1,32 +1,17 @@
 import { RULE_TYPE } from 'fela-utils';
-// @ts-ignore
-import _Stylis from 'stylis';
+import { compile, middleware, serialize, stringify, prefixer } from 'stylis';
 
 import { FelaRenderer, FelaRendererChange } from './types';
 
-// `stylis@3` is a CJS library, there are known issues with them:
-// https://github.com/rollup/rollup/issues/1267#issuecomment-446681320
-const Stylis = (_Stylis as any).default || _Stylis;
-
-// We use Stylis only for vendor prefixing, all other capabilities are disabled
-const stylis = new Stylis({
-  cascade: false,
-  compress: false,
-  global: false,
-  keyframe: false,
-  preserve: false,
-  semicolon: false,
-});
-
 export const felaStylisEnhancer = (renderer: FelaRenderer) => {
   const existingEmitChange = renderer._emitChange.bind(renderer);
 
   renderer._emitChange = (change: FelaRendererChange) => {
     if (change.type === RULE_TYPE) {
-      const prefixed: string = stylis('', change.declaration);
+      const prefixed: string = serialize(compile(change.declaration), middleware([prefixer, stringify]));
 
       // Fela uses objects by references, it's safe to override properties
-      change.declaration = prefixed.slice(1, -1);
+      change.declaration = prefixed.slice(0, -1);
     }
 
     existingEmitChange(change);
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/generateClassName.ts b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/generateClassName.ts
new file mode 100644
index 00000000000000..79c2ab5591e35a
--- /dev/null
+++ b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/generateClassName.ts
@@ -0,0 +1,8 @@
+import hashString from '@emotion/hash';
+
+const HASH_PREFIX = 'f';
+
+export function generateClassName(property: string, value: any, pseudo?: string, media?: string, support?: string) {
+  // Trimming of value is required to generate consistent hashes
+  return HASH_PREFIX + hashString(pseudo! + media! + support + property + value.toString().trim());
+}
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/getStyleBucketName.ts b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/getStyleBucketName.ts
new file mode 100644
index 00000000000000..50569bedf03832
--- /dev/null
+++ b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/getStyleBucketName.ts
@@ -0,0 +1,67 @@
+import { StyleBucketName } from './types';
+
+/**
+ * Maps the long pseudo name to the short pseudo name. Pseudos that match here will be ordered, everything else will
+ * make their way to default style bucket. We reduce the pseudo name to save bundlesize.
+ * Thankfully there aren't any overlaps, see: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes.
+ */
+const pseudosMap: Record<string, StyleBucketName | undefined> = {
+  // :focus-within
+  'us-w': 'w',
+  // :focus-visible
+  'us-v': 'i',
+
+  // :link
+  nk: 'l',
+  // :visited
+  si: 'v',
+  // :focus
+  cu: 'f',
+  // :hover
+  ve: 'h',
+  // :active
+  ti: 'a',
+};
+
+/**
+ * Gets the bucket depending on the pseudo.
+ *
+ * Input:
+ *
+ * ```
+ * ":hover"
+ * ":focus:hover"
+ * ```
+ *
+ * Output:
+ *
+ * ```
+ * "h"
+ * "f"
+ * ```
+ */
+export function getStyleBucketName(pseudo: string, media: string, support: string): StyleBucketName {
+  // We are grouping all the at-rules like @media, @supports etc under `t` bucket.
+  if (media || support) {
+    return 't';
+  }
+
+  const normalizedPseudo = pseudo.trim();
+
+  if (normalizedPseudo.charCodeAt(0) === 58 /* ":" */) {
+    // We send through a subset of the string instead of the full pseudo name.
+    // For example:
+    // - `"focus-visible"` name would instead of `"us-v"`.
+    // - `"focus"` name would instead of `"us"`.
+    // Return a mapped pseudo else default bucket.
+
+    return (
+      pseudosMap[normalizedPseudo.slice(4, 8)] /* allows to avoid collisions between "focus-visible" & "focus" */ ||
+      pseudosMap[normalizedPseudo.slice(3, 5)] ||
+      'd'
+    );
+  }
+
+  // Return default bucket
+  return 'd';
+}
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/getStyleSheetForBucket.ts b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/getStyleSheetForBucket.ts
new file mode 100644
index 00000000000000..df2b0a1c4f851d
--- /dev/null
+++ b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/getStyleSheetForBucket.ts
@@ -0,0 +1,61 @@
+import { MakeStylesRenderer, StyleBucketName } from './types';
+
+/**
+ * Ordered style buckets using their short pseudo name.
+ *
+ * @private
+ */
+export const styleBucketOrdering: StyleBucketName[] = [
+  // catch-all
+  'd',
+  // link
+  'l',
+  // visited
+  'v',
+  // focus-within
+  'w',
+  // focus
+  'f',
+  // focus-visible
+  'i',
+  // hover
+  'h',
+  // active
+  'a',
+  // keyframes
+  'k',
+  // at-rules
+  't',
+];
+
+/**
+ * Lazily adds a `<style>` bucket to the `<head>`. This will ensure that the style buckets are ordered.
+ */
+export function getStyleSheetForBucket(
+  bucketName: StyleBucketName,
+  target: Document,
+  renderer: MakeStylesRenderer,
+): CSSStyleSheet {
+  if (!renderer.styleElements[bucketName]) {
+    let currentBucketIndex = styleBucketOrdering.indexOf(bucketName) + 1;
+    let nextBucketFromCache = null;
+
+    // Find the next bucket which we will add our new style bucket before.
+    for (; currentBucketIndex < styleBucketOrdering.length; currentBucketIndex++) {
+      const nextBucket = renderer.styleElements[styleBucketOrdering[currentBucketIndex]];
+      if (nextBucket) {
+        nextBucketFromCache = nextBucket;
+        break;
+      }
+    }
+
+    const tag = target.createElement('style');
+
+    tag.dataset.makeStylesBucket = bucketName;
+    renderer.styleElements[bucketName] = tag;
+
+    target.head.insertBefore(tag, nextBucketFromCache);
+  }
+
+  return renderer.styleElements[bucketName]!.sheet as CSSStyleSheet;
+}
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/index.ts b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/index.ts
new file mode 100644
index 00000000000000..6fb33b2c9a3234
--- /dev/null
+++ b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/index.ts
@@ -0,0 +1,5 @@
+export { generateClassName } from './generateClassName';
+export { getStyleBucketName } from './getStyleBucketName';
+export { insertRule } from './insertRule';
+
+export type { MakeStylesRenderer, StyleBucketName } from './types';
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts
new file mode 100644
index 00000000000000..ee972c779630bd
--- /dev/null
+++ b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts
@@ -0,0 +1,93 @@
+import {
+  FONT_TYPE,
+  // @ts-ignore
+  generateCSSRule,
+  KEYFRAME_TYPE,
+  RULE_TYPE,
+  STATIC_TYPE,
+} from 'fela-utils';
+import { compile, middleware, serialize, rulesheet, stringify, prefixer } from 'stylis';
+
+import { getStyleSheetForBucket } from './getStyleSheetForBucket';
+import type { FelaRendererChange } from '../types';
+import type { MakeStylesRenderer, StyleBucketName } from './types';
+
+/**
+ * Suffixes to be ignored in case of error
+ */
+const ignoreSuffixes = [
+  '-moz-placeholder',
+  '-moz-focus-inner',
+  '-moz-focusring',
+  '-ms-input-placeholder',
+  '-moz-read-write',
+  '-moz-read-only',
+].join('|');
+const ignoreSuffixesRegex = new RegExp(`:(${ignoreSuffixes})`);
+
+function safeInsertToDOM(
+  renderer: MakeStylesRenderer,
+  sheet: CSSStyleSheet | undefined,
+  bucket: StyleBucketName,
+  ruleCSS: string,
+) {
+  if (renderer.insertionCache[ruleCSS]) {
+    return;
+  }
+
+  renderer.insertionCache[ruleCSS] = bucket!;
+
+  if (sheet) {
+    try {
+      sheet.insertRule(ruleCSS, sheet.cssRules.length);
+    } 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);
+      }
+    }
+  }
+}
+
+export function insertRule(target: Document | undefined, renderer: MakeStylesRenderer) {
+  return function (change: FelaRendererChange) {
+    const { css, selector, declaration, bucket = 'd', type } = change;
+    const sheet = target && getStyleSheetForBucket(bucket, target, renderer);
+
+    switch (type) {
+      case KEYFRAME_TYPE:
+        // if (node.textContent.indexOf(change.keyframe) === -1) {
+        //   node.textContent += change.keyframe
+        // }
+        break;
+      case FONT_TYPE:
+        // if (node.textContent.indexOf(change.fontFace) === -1) {
+        //   node.textContent += change.fontFace
+        // }
+        break;
+      case STATIC_TYPE:
+        serialize(
+          compile(selector ? generateCSSRule(selector, css) : css),
+          middleware([
+            prefixer,
+            stringify,
+
+            // 💡 we are using `.insertRule()` API for DOM operations, which does not support
+            // insertion of multiple CSS rules in a single call. `rulesheet` plugin extracts
+            // individual rules to be used with this API
+            rulesheet(rule => {
+              safeInsertToDOM(renderer, sheet, bucket, rule);
+            }),
+          ]),
+        );
+
+        break;
+      case RULE_TYPE:
+        safeInsertToDOM(renderer, sheet, bucket, generateCSSRule(selector, declaration));
+        break;
+      default:
+        return;
+    }
+  };
+}
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/types.ts b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/types.ts
new file mode 100644
index 00000000000000..62438565208e0a
--- /dev/null
+++ b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/types.ts
@@ -0,0 +1,36 @@
+export interface MakeStylesRenderer {
+  /**
+   * @private
+   */
+  insertionCache: Record<string, StyleBucketName>;
+
+  /**
+   * @private
+   */
+  styleElements: Partial<Record<StyleBucketName, HTMLStyleElement>>;
+}
+
+/**
+ * Buckets under which we will group our stylesheets.
+ */
+export type StyleBucketName =
+  // default
+  | 'd'
+  // link
+  | 'l'
+  // visited
+  | 'v'
+  // focus-within
+  | 'w'
+  // focus
+  | 'f'
+  // focus-visible
+  | 'i'
+  // hover
+  | 'h'
+  // active
+  | 'a'
+  // @keyframes definitions
+  | 'k'
+  // at-rules (@media, @support)
+  | 't';
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/types.ts b/packages/fluentui/react-northstar-fela-renderer/src/types.ts
index 83082b141ebfe4..ba9e45c027f82d 100644
--- a/packages/fluentui/react-northstar-fela-renderer/src/types.ts
+++ b/packages/fluentui/react-northstar-fela-renderer/src/types.ts
@@ -2,6 +2,8 @@ import { IRenderer } from 'fela';
 import { RendererParam } from '@fluentui/react-northstar-styles-renderer';
 import { ICSSInJSStyle } from '@fluentui/styles';
 
+import type { StyleBucketName } from './makeStylesCompat';
+
 export type FelaRenderer = IRenderer & {
   cache: Record<string, FelaRendererChange>;
   selectorPrefix?: string;
@@ -16,6 +18,12 @@ export type FelaRenderer = IRenderer & {
     media?: string,
     support?: string,
   ): string;
+
+  listeners: [];
+  nodes: Record<string, HTMLStyleElement>;
+  updateSubscription: Parameters<IRenderer['subscribe']>[0] | undefined;
+
+  isCompat: boolean;
 };
 
 export type FelaRendererChange = {
@@ -26,6 +34,11 @@ export type FelaRendererChange = {
   pseudo: string;
   media: string;
   support: string;
+
+  // Optional for "type: RULE"
+  bucket?: StyleBucketName;
+  // Optional for "type: STATIC"
+  css?: string;
 };
 
 export type FelaRendererParam = Omit<RendererParam, 'direction'> & { theme: { direction: RendererParam['direction'] } };
diff --git a/packages/fluentui/react-northstar/src/components/Animation/useAnimationStyles.ts b/packages/fluentui/react-northstar/src/components/Animation/useAnimationStyles.ts
index e62087ec23b9db..e639328f4bad9e 100644
--- a/packages/fluentui/react-northstar/src/components/Animation/useAnimationStyles.ts
+++ b/packages/fluentui/react-northstar/src/components/Animation/useAnimationStyles.ts
@@ -3,6 +3,7 @@ import {
   unstable_getStyles as getStyles,
   unstable_createAnimationStyles as createAnimationStyles,
   useFluentContext,
+  useNorthstarRenderer,
 } from '@fluentui/react-bindings';
 import { ThemePrepared } from '@fluentui/styles';
 
@@ -19,7 +20,8 @@ const animationCache = new WeakMap<ThemePrepared, Record<string, UseAnimationSty
 export const animationClassName = 'ui-animation';
 
 export const useAnimationStyles = (displayName: string, props: AnimationProps): UseAnimationStylesResult => {
-  const { theme, rtl, disableAnimations, renderer, performance } = useFluentContext();
+  const renderer = useNorthstarRenderer();
+  const { theme, rtl, disableAnimations, performance } = useFluentContext();
 
   if (disableAnimations) {
     return {
diff --git a/packages/fluentui/react-northstar/src/components/Design/Design.tsx b/packages/fluentui/react-northstar/src/components/Design/Design.tsx
index e0eaa9afc3d174..138c6d94d7fee0 100644
--- a/packages/fluentui/react-northstar/src/components/Design/Design.tsx
+++ b/packages/fluentui/react-northstar/src/components/Design/Design.tsx
@@ -1,4 +1,4 @@
-import { ComponentDesignProp, useFluentContext } from '@fluentui/react-bindings';
+import { ComponentDesignProp, useFluentContext, useNorthstarRenderer } from '@fluentui/react-bindings';
 import { RendererParam } from '@fluentui/react-northstar-styles-renderer';
 import * as customPropTypes from '@fluentui/react-proptypes';
 import { ICSSInJSStyle } from '@fluentui/styles';
@@ -20,6 +20,7 @@ export type DesignProps = {
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function Design<DesignProps>({ config, children }) {
+  const renderer = useNorthstarRenderer();
   const context = useFluentContext();
   const getConfig = React.useCallback(() => config, [config]);
 
@@ -31,7 +32,7 @@ export function Design<DesignProps>({ config, children }) {
     sanitizeCss: context.performance.enableSanitizeCssPlugin,
   };
 
-  const className = context.renderer.renderRule(getConfig as ICSSInJSStyle, styleParam);
+  const className = renderer.renderRule(getConfig as ICSSInJSStyle, styleParam);
 
   return children({ className });
 }
diff --git a/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx b/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx
index ccca900c4c06de..cfa70315b0b1c4 100644
--- a/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx
+++ b/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx
@@ -11,6 +11,7 @@ import {
   Telemetry,
   useFluentContext,
   unstable_getStyles,
+  useNorthstarRenderer,
   useIsomorphicLayoutEffect,
   Unstable_FluentContextProvider,
 } from '@fluentui/react-bindings';
@@ -99,6 +100,7 @@ export const Provider: ComponentWithAs<'div', ProviderProps> & {
 } = props => {
   const { children, className, design, overwrite, styles, variables, telemetryRef } = props;
 
+  const renderer = useNorthstarRenderer();
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(Provider.handledProps, props);
 
@@ -160,7 +162,7 @@ export const Provider: ComponentWithAs<'div', ProviderProps> & {
 
     disableAnimations: outgoingContext.disableAnimations,
     performance: outgoingContext.performance,
-    renderer: outgoingContext.renderer,
+    renderer,
     rtl: outgoingContext.rtl,
     theme: outgoingContext.theme,
     saveDebug: _.noop,
@@ -174,21 +176,21 @@ export const Provider: ComponentWithAs<'div', ProviderProps> & {
   });
 
   useIsomorphicLayoutEffect(() => {
-    renderFontFaces(outgoingContext.renderer, props.theme);
-    renderStaticStyles(outgoingContext.renderer, props.theme, outgoingContext.theme.siteVariables);
+    renderFontFaces(renderer, props.theme);
+    renderStaticStyles(renderer, props.theme, outgoingContext.theme.siteVariables);
 
     if (props.target) {
       setUpWhatInput(props.target);
     }
 
-    outgoingContext.renderer.registerUsage();
+    renderer.registerUsage();
 
     return () => {
       if (props.target) {
         tryCleanupWhatInput(props.target);
       }
 
-      outgoingContext.renderer.unregisterUsage();
+      renderer.unregisterUsage();
     };
   }, []);
 
@@ -201,7 +203,7 @@ export const Provider: ComponentWithAs<'div', ProviderProps> & {
           ...rtlProps,
           ...unhandledProps,
         };
-  const RenderProvider = outgoingContext.renderer.Provider;
+  const RenderProvider = renderer.Provider;
 
   return (
     <RenderProvider>
diff --git a/packages/fluentui/react-northstar/src/utils/createComponentInternal.ts b/packages/fluentui/react-northstar/src/utils/createComponentInternal.ts
index 25e09074f69f0a..0b4731db109c92 100644
--- a/packages/fluentui/react-northstar/src/utils/createComponentInternal.ts
+++ b/packages/fluentui/react-northstar/src/utils/createComponentInternal.ts
@@ -1,4 +1,4 @@
-import { AccessibilityActionHandlers, useFluentContext } from '@fluentui/react-bindings';
+import { AccessibilityActionHandlers, useFluentContext, useNorthstarRenderer } from '@fluentui/react-bindings';
 import * as React from 'react';
 import * as _ from 'lodash';
 
@@ -43,6 +43,7 @@ export const createComponentInternal = <P extends ObjectOf<any> = any>({
     const ref = React.useRef(null);
 
     const context = useFluentContext();
+    const renderer = useNorthstarRenderer();
     const isFirstRenderRef = React.useRef<boolean>(true);
 
     return renderComponent(
@@ -52,6 +53,7 @@ export const createComponentInternal = <P extends ObjectOf<any> = any>({
         handledProps: _.keys(propTypes).concat(handledProps),
         props,
         state: {},
+        renderer,
         actionHandlers,
         render: config => render(config, props),
         saveDebug: fluentUIDebug => (ref.current = { fluentUIDebug }),
diff --git a/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts b/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts
index ccd6e83a260759..e995bb0385f1b4 100644
--- a/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts
+++ b/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts
@@ -4,41 +4,11 @@ import {
   StylesContextPerformance,
   StylesContextPerformanceInput,
 } from '@fluentui/react-bindings';
-import { CreateRenderer, Renderer } from '@fluentui/react-northstar-styles-renderer';
+import { CreateRenderer } from '@fluentui/react-northstar-styles-renderer';
 import { mergeThemes } from '@fluentui/styles';
 
 import { isBrowser } from './isBrowser';
 
-const defaultDocument = { document: 'document' };
-const registeredRenderers = new WeakMap<Document | typeof defaultDocument, Renderer>();
-
-export const getRenderer = (createRenderer: CreateRenderer, target?: Document): Renderer => {
-  let actualTarget: Document | typeof defaultDocument = target || defaultDocument;
-
-  // A valid comparisons, default renderer will be used
-  if (!isBrowser() || typeof target === 'undefined') {
-    actualTarget = defaultDocument;
-  }
-
-  // SSR logic will be handled by condition above
-  // eslint-disable-next-line no-undef
-  if (isBrowser() && target === document) {
-    actualTarget = defaultDocument;
-  }
-
-  if (registeredRenderers.has(actualTarget)) {
-    return registeredRenderers.get(actualTarget);
-  }
-
-  // To avoid errors related to SSR as `document` may not exist we are using a fake object `defaultDocument`.
-  // When a value matches `defaultDocument` we will pass `undefined` to `createRenderer()` and it should handle it
-  // properly.
-  const createdRenderer = createRenderer(actualTarget === defaultDocument ? undefined : (actualTarget as Document));
-  registeredRenderers.set(actualTarget, createdRenderer);
-
-  return createdRenderer;
-};
-
 export const mergePerformanceOptions = (
   target: StylesContextPerformance | StylesContextPerformanceInput,
   ...sources: StylesContextPerformanceInput[]
@@ -77,7 +47,6 @@ export const mergeProviderContexts = (
       enableBooleanVariablesCaching: false,
     },
     telemetry: undefined,
-    renderer: undefined,
   };
 
   return contexts.reduce<ProviderContextPrepared>(
@@ -94,7 +63,6 @@ export const mergeProviderContexts = (
 
       // Use provided renderer if it is defined
       acc.target = next.target || acc.target;
-      acc.renderer = getRenderer(createRenderer, acc.target);
 
       // Latest disableAnimations value wins
       const mergedDisableAnimations = mergeBooleanValues(acc.disableAnimations, next.disableAnimations);
diff --git a/packages/fluentui/react-northstar/src/utils/renderComponent.tsx b/packages/fluentui/react-northstar/src/utils/renderComponent.tsx
index e50704a8245932..9d89ff462417f2 100644
--- a/packages/fluentui/react-northstar/src/utils/renderComponent.tsx
+++ b/packages/fluentui/react-northstar/src/utils/renderComponent.tsx
@@ -10,7 +10,7 @@ import {
   unstable_getStyles as getStyles,
   ProviderContextPrepared,
 } from '@fluentui/react-bindings';
-import { noopRenderer } from '@fluentui/react-northstar-styles-renderer';
+import { Renderer } from '@fluentui/react-northstar-styles-renderer';
 import {
   emptyTheme,
   ComponentSlotStylesResolved,
@@ -44,6 +44,7 @@ export interface RenderConfig<P> {
   handledProps: string[];
   props: PropsWithVarsAndStyles;
   state: Record<string, any>;
+  renderer: Renderer;
   actionHandlers: AccessibilityActionHandlers;
   render: RenderComponentCallback<P>;
   saveDebug: (debug: DebugData | null) => void;
@@ -54,7 +55,17 @@ export const renderComponent = <P extends {}>(
   config: RenderConfig<P>,
   context?: ProviderContextPrepared,
 ): React.ReactElement<P> => {
-  const { className, displayName, handledProps, props, state, actionHandlers, render, saveDebug = () => {} } = config;
+  const {
+    className,
+    displayName,
+    handledProps,
+    props,
+    state,
+    actionHandlers,
+    render,
+    renderer,
+    saveDebug = () => {},
+  } = config;
 
   if (_.isEmpty(context)) {
     logProviderMissingWarning();
@@ -83,7 +94,7 @@ export const renderComponent = <P extends {}>(
     primaryDisplayName: displayName,
     componentProps: stateAndProps,
     inlineStylesProps: stateAndProps,
-    renderer: context.renderer || noopRenderer,
+    renderer,
     rtl,
     saveDebug,
     theme: context.theme || emptyTheme,

From c1270dd3d45d8cc580e579caaf0282fc646a74bd Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Mon, 15 Nov 2021 12:15:05 +0100
Subject: [PATCH 2/8] "fix" pipeline

---
 azure-pipelines.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index a3d95de7d93945..5df762522db327 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -122,6 +122,7 @@ jobs:
         displayName: yarn
 
       - script: |
+          yarn buildto @fluentui/make-styles --no-cache
           yarn workspace @fluentui/docs vr:build
         displayName: build FUI N* VR Test
         env:

From bb0b4f6582d45e2eabec0a24fcde74c0ad3b9476 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Mon, 15 Nov 2021 12:31:32 +0100
Subject: [PATCH 3/8] fix insertion, fix var usage

---
 packages/fluentui/react-bindings/src/context.ts              | 5 ++++-
 .../react-northstar-fela-renderer/src/createFelaRenderer.tsx | 4 ++++
 .../src/makeStylesCompat/insertRule.ts                       | 5 ++++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/fluentui/react-bindings/src/context.ts b/packages/fluentui/react-bindings/src/context.ts
index 255b78ba68f997..4849779f6c8313 100644
--- a/packages/fluentui/react-bindings/src/context.ts
+++ b/packages/fluentui/react-bindings/src/context.ts
@@ -61,7 +61,10 @@ export function useFluentContext(): ProviderContextPrepared {
 export const Unstable_FluentContextProvider = FluentContext.Provider;
 
 export const Unstable_NorthstarRendererContext = React.createContext<Renderer>(
-  createFelaRenderer(document, createDOMRenderer(document)),
+  createFelaRenderer(
+    typeof document === 'undefined' ? undefined : document,
+    createDOMRenderer(typeof document === 'undefined' ? undefined : document),
+  ),
 );
 
 export function useNorthstarRenderer(): Renderer {
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx b/packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx
index 484315794f25e1..ba8fd386e7798f 100644
--- a/packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx
+++ b/packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx
@@ -91,6 +91,10 @@ export const createFelaRenderer: CreateFelaRenderer = (target, makeStylesRendere
       if (!felaRenderer.updateSubscription) {
         felaRenderer.updateSubscription = insertRule(target, makeStylesRenderer!);
         felaRenderer.subscribe(felaRenderer.updateSubscription);
+
+        // simulate rendering to ensure all styles rendered prior to
+        // calling FelaDOM.render are correctly injected as well
+        Object.values(felaRenderer.cache).forEach(felaRenderer._emitChange);
       }
 
       return <>{props.children}</>;
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts
index ee972c779630bd..af34c45a848144 100644
--- a/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts
+++ b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts
@@ -54,7 +54,7 @@ export function insertRule(target: Document | undefined, renderer: MakeStylesRen
   return function (change: FelaRendererChange) {
     const { css, selector, declaration, bucket = 'd', type } = change;
     const sheet = target && getStyleSheetForBucket(bucket, target, renderer);
-
+    console.log('change', change);
     switch (type) {
       case KEYFRAME_TYPE:
         // if (node.textContent.indexOf(change.keyframe) === -1) {
@@ -84,6 +84,9 @@ export function insertRule(target: Document | undefined, renderer: MakeStylesRen
 
         break;
       case RULE_TYPE:
+        console.log('insert:css', generateCSSRule(selector, declaration));
+        console.log('insert:sheet', sheet);
+        console.log('insert:bucket', bucket);
         safeInsertToDOM(renderer, sheet, bucket, generateCSSRule(selector, declaration));
         break;
       default:

From 30a2192a43edbd8ac1f9d9da36fc381cd8d354fb Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Mon, 15 Nov 2021 12:57:22 +0100
Subject: [PATCH 4/8] remove log

---
 .../src/makeStylesCompat/insertRule.ts                       | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts
index af34c45a848144..ee972c779630bd 100644
--- a/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts
+++ b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts
@@ -54,7 +54,7 @@ export function insertRule(target: Document | undefined, renderer: MakeStylesRen
   return function (change: FelaRendererChange) {
     const { css, selector, declaration, bucket = 'd', type } = change;
     const sheet = target && getStyleSheetForBucket(bucket, target, renderer);
-    console.log('change', change);
+
     switch (type) {
       case KEYFRAME_TYPE:
         // if (node.textContent.indexOf(change.keyframe) === -1) {
@@ -84,9 +84,6 @@ export function insertRule(target: Document | undefined, renderer: MakeStylesRen
 
         break;
       case RULE_TYPE:
-        console.log('insert:css', generateCSSRule(selector, declaration));
-        console.log('insert:sheet', sheet);
-        console.log('insert:bucket', bucket);
         safeInsertToDOM(renderer, sheet, bucket, generateCSSRule(selector, declaration));
         break;
       default:

From cd078d09f542eb0f1389bc732ee1346bb72348a7 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Mon, 15 Nov 2021 15:08:05 +0100
Subject: [PATCH 5/8] fix font insertion

---
 .../src/makeStylesCompat/insertRule.ts                        | 4 +---
 packages/fluentui/react-northstar-fela-renderer/src/types.ts  | 2 ++
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts
index ee972c779630bd..d238ce5b66bf53 100644
--- a/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts
+++ b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts
@@ -62,9 +62,7 @@ export function insertRule(target: Document | undefined, renderer: MakeStylesRen
         // }
         break;
       case FONT_TYPE:
-        // if (node.textContent.indexOf(change.fontFace) === -1) {
-        //   node.textContent += change.fontFace
-        // }
+        safeInsertToDOM(renderer, sheet, bucket, change.fontFace);
         break;
       case STATIC_TYPE:
         serialize(
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/types.ts b/packages/fluentui/react-northstar-fela-renderer/src/types.ts
index ba9e45c027f82d..8d53cd3970cf53 100644
--- a/packages/fluentui/react-northstar-fela-renderer/src/types.ts
+++ b/packages/fluentui/react-northstar-fela-renderer/src/types.ts
@@ -37,6 +37,8 @@ export type FelaRendererChange = {
 
   // Optional for "type: RULE"
   bucket?: StyleBucketName;
+  // Optional for "type: FONT"
+  fontFace?: string;
   // Optional for "type: STATIC"
   css?: string;
 };

From cf7f62b2f9cf0b9d994aee54c90395ceb88c33ea Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Mon, 15 Nov 2021 16:33:29 +0100
Subject: [PATCH 6/8] fix config

---
 scripts/webpack/webpack.config.perf.ts | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/scripts/webpack/webpack.config.perf.ts b/scripts/webpack/webpack.config.perf.ts
index 754cc06d7aa7cf..5094b036dc7ae4 100644
--- a/scripts/webpack/webpack.config.perf.ts
+++ b/scripts/webpack/webpack.config.perf.ts
@@ -1,7 +1,6 @@
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import { webpack as lernaAliases } from '../lernaAliasNorthstar';
-import { argv } from 'yargs';
 import webpack from 'webpack';
 import getDefaultEnvironmentVars from './getDefaultEnvironmentVars';
 import config from '../config';
@@ -11,7 +10,7 @@ const { paths } = config;
 const webpackConfig: webpack.Configuration = {
   name: 'client',
   target: 'web',
-  mode: 'development',
+  mode: 'production',
   entry: {
     app: paths.perfSrc('index'),
   },
@@ -39,7 +38,7 @@ const webpackConfig: webpack.Configuration = {
     ],
   },
   plugins: [
-    new webpack.DefinePlugin(getDefaultEnvironmentVars()),
+    new webpack.DefinePlugin(getDefaultEnvironmentVars(true)),
     new ForkTsCheckerWebpackPlugin({
       typescript: {
         configFile: paths.e2e('tsconfig.json'),
@@ -67,18 +66,11 @@ const webpackConfig: webpack.Configuration = {
       // https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977
       'react-dom$': 'react-dom/profiling',
       'scheduler/tracing': 'scheduler/tracing-profiling',
-
-      // Can be removed once Prettier will be upgraded to v2
-      // https://github.com/prettier/prettier/issues/6903
-      '@microsoft/typescript-etw': false,
     },
   },
   performance: {
     hints: false, // to (temporarily) disable "WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit")
   },
-  optimization: {
-    nodeEnv: !!argv.debug ? 'development' : 'production',
-  },
 };
 
 export default webpackConfig;

From 25de3db0fa14bb83c85e01ce17dbca2f461bd34d Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Tue, 16 Nov 2021 11:39:19 +0100
Subject: [PATCH 7/8] "fix" ts errors

---
 .../test/compose/useCompose-test.tsx          | 25 ++++++++++---------
 .../src/makeStylesCompat/insertRule.ts        |  2 +-
 .../mergeProviderContexts-test.ts             | 22 +---------------
 .../test/utils/withProvider.tsx               |  6 ++---
 4 files changed, 18 insertions(+), 37 deletions(-)

diff --git a/packages/fluentui/react-bindings/test/compose/useCompose-test.tsx b/packages/fluentui/react-bindings/test/compose/useCompose-test.tsx
index 50f5a1c490d5f4..1181c7ca1d0f92 100644
--- a/packages/fluentui/react-bindings/test/compose/useCompose-test.tsx
+++ b/packages/fluentui/react-bindings/test/compose/useCompose-test.tsx
@@ -5,25 +5,26 @@ import {
   useUnhandledProps,
   Unstable_FluentContextProvider,
 } from '@fluentui/react-bindings';
-import { noopRenderer } from '@fluentui/react-northstar-styles-renderer';
+// import { noopRenderer } from '@fluentui/react-northstar-styles-renderer';
 import { ComponentSlotStylesPrepared, emptyTheme, ThemeInput } from '@fluentui/styles';
-import cx from 'classnames';
+// import cx from 'classnames';
 import { mount, shallow } from 'enzyme';
 import * as React from 'react';
 
 const TestProvider: React.FC<{ theme: ThemeInput }> = props => {
   const value: ProviderContextPrepared = {
     disableAnimations: false,
-    renderer: {
-      ...noopRenderer,
-      renderRule: (props: any) => {
-        return cx(
-          props.color && `color-${props.color}`,
-          props.hidden && `hidden-${props.hidden}`,
-          props.visible && `visible-${props.visible}`,
-        );
-      },
-    },
+    // TODO: fix me
+    // renderer: {
+    //   ...noopRenderer,
+    //   renderRule: (props: any) => {
+    //     return cx(
+    //       props.color && `color-${props.color}`,
+    //       props.hidden && `hidden-${props.hidden}`,
+    //       props.visible && `visible-${props.visible}`,
+    //     );
+    //   },
+    // },
     performance: {
       enableStylesCaching: false,
       enableVariablesCaching: false,
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts
index d238ce5b66bf53..e61a7112a0909e 100644
--- a/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts
+++ b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts
@@ -62,7 +62,7 @@ export function insertRule(target: Document | undefined, renderer: MakeStylesRen
         // }
         break;
       case FONT_TYPE:
-        safeInsertToDOM(renderer, sheet, bucket, change.fontFace);
+        safeInsertToDOM(renderer, sheet, bucket, change.fontFace!);
         break;
       case STATIC_TYPE:
         serialize(
diff --git a/packages/fluentui/react-northstar/test/specs/utils/mergeProviderContexts/mergeProviderContexts-test.ts b/packages/fluentui/react-northstar/test/specs/utils/mergeProviderContexts/mergeProviderContexts-test.ts
index e922944ffb01ba..69e66606414773 100644
--- a/packages/fluentui/react-northstar/test/specs/utils/mergeProviderContexts/mergeProviderContexts-test.ts
+++ b/packages/fluentui/react-northstar/test/specs/utils/mergeProviderContexts/mergeProviderContexts-test.ts
@@ -1,25 +1,5 @@
 import { ProviderContextInput } from '@fluentui/react-bindings';
-import { mergeProviderContexts, mergePerformanceOptions, getRenderer } from 'src/utils/mergeProviderContexts';
-
-describe('getRenderer', () => {
-  const createRenderer = jest.fn().mockImplementation(target => ({ target }));
-
-  test(`without "target" defaults to a document`, () => {
-    // will be "undefined" as we call createRenderer() with "undefined"
-    expect(getRenderer(createRenderer)).toHaveProperty('target', undefined);
-  });
-
-  test(`with "target" equals a default document will use its renderer`, () => {
-    // will be "undefined" as we call createRenderer() with "undefined"
-    expect(getRenderer(createRenderer)).toHaveProperty('target', undefined);
-  });
-
-  test(`creates a new renderer for a new "target" and keeps it`, () => {
-    const target = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
-
-    expect(getRenderer(createRenderer, target)).toHaveProperty('target', target);
-  });
-});
+import { mergeProviderContexts, mergePerformanceOptions } from 'src/utils/mergeProviderContexts';
 
 describe('mergePerformanceOptions', () => {
   test(`options from "sources" always override`, () => {
diff --git a/packages/fluentui/react-northstar/test/utils/withProvider.tsx b/packages/fluentui/react-northstar/test/utils/withProvider.tsx
index a24f18caca6a4a..e2d70a66823928 100644
--- a/packages/fluentui/react-northstar/test/utils/withProvider.tsx
+++ b/packages/fluentui/react-northstar/test/utils/withProvider.tsx
@@ -1,5 +1,5 @@
 import { Telemetry, Unstable_FluentContextProvider, ProviderContextPrepared } from '@fluentui/react-bindings';
-import { Renderer, noopRenderer } from '@fluentui/react-northstar-styles-renderer';
+import { Renderer /*, noopRenderer */ } from '@fluentui/react-northstar-styles-renderer';
 import { emptyTheme, ThemePrepared } from '@fluentui/styles';
 import { mount, MountRendererProps, ComponentType } from 'enzyme';
 import * as React from 'react';
@@ -10,9 +10,9 @@ export const EmptyThemeProvider: React.FunctionComponent<{
   renderer?: Renderer;
   theme?: ThemePrepared;
   rtl?: boolean;
-}> = ({ children, disableAnimations, renderer = noopRenderer, telemetry, theme = emptyTheme, rtl = false }) => {
+}> = ({ children, disableAnimations, /* renderer = noopRenderer, */ telemetry, theme = emptyTheme, rtl = false }) => {
   const value: ProviderContextPrepared = {
-    renderer,
+    // renderer,
     target: document,
     disableAnimations,
     rtl,

From 7f24406590df1677b932f790cf8443e2f1c708b5 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Tue, 16 Nov 2021 14:21:09 +0100
Subject: [PATCH 8/8] add trailing comma

---
 .../src/makeStylesCompat/insertRule.ts                          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts
index e61a7112a0909e..dae3b9cd2f6c21 100644
--- a/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts
+++ b/packages/fluentui/react-northstar-fela-renderer/src/makeStylesCompat/insertRule.ts
@@ -82,7 +82,7 @@ export function insertRule(target: Document | undefined, renderer: MakeStylesRen
 
         break;
       case RULE_TYPE:
-        safeInsertToDOM(renderer, sheet, bucket, generateCSSRule(selector, declaration));
+        safeInsertToDOM(renderer, sheet, bucket, generateCSSRule(selector, declaration + ';'));
         break;
       default:
         return;