proto: use compat layer between makeStyles & Fela

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:

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,17 +365,15 @@
           "@fluentui/dom-utilities",
           "@fluentui/eslint-plugin",
           "@fluentui/react",
-          "@fluentui/react-conformance",
-          "stylis"
+          "@fluentui/react-conformance"
         ]
       },
       {
         "packages": [
           "@fluentui/react-northstar-emotion-renderer"
         ],
         "dependencies": [
-          "@fluentui/eslint-plugin",
-          "stylis"
+          "@fluentui/eslint-plugin"
         ]
       },
       {

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>
   );
 };
 

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;

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",

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,14 @@ export function useFluentContext(): ProviderContextPrepared {
 }
 
 export const Unstable_FluentContextProvider = FluentContext.Provider;
+
+export const Unstable_NorthstarRendererContext = React.createContext<Renderer>(
+  createFelaRenderer(
+    typeof document === 'undefined' ? undefined : document,
+    createDOMRenderer(typeof document === 'undefined' ? undefined : document),
+  ),
+);
+
+export function useNorthstarRenderer(): Renderer {
+  return React.useContext(Unstable_NorthstarRendererContext);
+}

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,

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;
 };

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,

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": "*",

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,64 @@ 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);
+
+        // 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}</>;
+    }
+
+    return (
+      <RendererProvider renderer={felaRenderer} {...{ rehydrate: false, targetDocument: target }}>
+        {props.children}
+      </RendererProvider>
+    );
+  };
 
   return {
     registerUsage: () => {