feat: Render theme CSS variables in SSR style element

change/@fluentui-react-provider-51de7ed7-e932-4b2f-aa6b-c871f1b8c016.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Render theme CSS variables in new SSR style slot",
+  "packageName": "@fluentui/react-provider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-utilities-3fde228b-0da2-4f87-8814-85c1dc4b6515.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: implement useInSSRContext",
+  "packageName": "@fluentui/react-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-provider/etc/react-provider.api.md

@@ -55,6 +55,7 @@ export type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir
 // @public (undocumented)
 export type FluentProviderSlots = {
     root: Slot<'div'>;
+    serverStyle?: Slot<'style'>;
 };
 
 // @public (undocumented)
@@ -76,7 +77,10 @@ export function useFluentProviderContextValues_unstable(state: FluentProviderSta
 export const useFluentProviderStyles_unstable: (state: FluentProviderState) => FluentProviderState;
 
 // @public
-export const useFluentProviderThemeStyleTag: (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => string;
+export const useFluentProviderThemeStyleTag: (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {
+    styleTagId: string;
+    rule: string;
+};
 
 // (No @packageDocumentation comment for this package)
 

packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx

@@ -0,0 +1,54 @@
+/*
+ * @jest-environment node
+ */
+
+// 👆 this is intentionally to test in SSR like environment
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/server';
+import { SSRProvider } from '@fluentui/react-utilities';
+import { FluentProvider } from './FluentProvider';
+import * as prettier from 'prettier';
+
+const parseHTMLString = (html: string) => {
+  return prettier.format(html, { parser: 'html' });
+};
+
+describe('FluentProvider (node)', () => {
+  const testTheme = {
+    colorNeutralForeground1: 'black',
+    colorNeutralBackground1: 'white',
+  };
+  it('should render CSS variables as inline style when wrapped with SSRPRovider', () => {
+    const html = ReactDOM.renderToStaticMarkup(
+      <SSRProvider>
+        <FluentProvider theme={testTheme} />
+      </SSRProvider>,
+    );
+
+    expect(parseHTMLString(html)).toMatchInlineSnapshot(`
+      "<div
+        dir="ltr"
+        class="fui-FluentProvider fui-FluentProvider1 "
+      >
+        <style id="fui-FluentProvider1" class="fui-FluentProvider__serverStyle">
+          .fui-FluentProvider1 {
+            --colorNeutralForeground1: black;
+            --colorNeutralBackground1: white;
+          }
+        </style>
+      </div>"
+    `);
+  });
+
+  it('should not render CSS variables as inline style when not wrapped with SSRPRovider', () => {
+    const html = ReactDOM.renderToStaticMarkup(<FluentProvider theme={testTheme} />);
+
+    expect(parseHTMLString(html)).toMatchInlineSnapshot(`
+      "<div
+        dir="ltr"
+        class="fui-FluentProvider fui-FluentProvider1 "
+      ></div>"
+    `);
+  });
+});

packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx

@@ -1,10 +1,11 @@
-import { resetIdsForTests } from '@fluentui/react-utilities';
+import { resetIdsForTests, SSRProvider } from '@fluentui/react-utilities';
 import { render } from '@testing-library/react';
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
 
 import { FluentProvider } from './FluentProvider';
 import { isConformant } from '../../testing/isConformant';
+import { teamsLightTheme } from '@fluentui/react-theme';
 
 describe('FluentProvider', () => {
   // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -17,6 +18,9 @@ describe('FluentProvider', () => {
   isConformant({
     disabledTests: ['component-handles-classname'],
     Component: FluentProvider,
+    renderOptions: {
+      wrapper: SSRProvider,
+    },
     displayName: 'FluentProvider',
   });
 
@@ -35,6 +39,45 @@ describe('FluentProvider', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('renders style element with css variables if wrapped with a SSRProvider', () => {
+    const { container } = render(
+      <SSRProvider>
+        <FluentProvider theme={{ colorNeutralBackground1: 'white', colorNeutralForeground1: 'black' }}>
+          foo
+        </FluentProvider>
+      </SSRProvider>,
+    );
+
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div
+          class="fui-FluentProvider fui-FluentProvider1"
+          dir="ltr"
+        >
+          <style
+            class="fui-FluentProvider__serverStyle"
+            id="fui-FluentProvider1"
+          >
+            .fui-FluentProvider1 { --colorNeutralBackground1: white; --colorNeutralForeground1: black;  }
+          </style>
+          foo
+        </div>
+      </div>
+    `);
+  });
+
+  it('does not render style element with css variables if not wrapped with a SSRProvider', () => {
+    const { container } = render(<FluentProvider theme={teamsLightTheme} />);
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div
+          class="fui-FluentProvider fui-FluentProvider1"
+          dir="ltr"
+        />
+      </div>
+    `);
+  });
+
   describe('applies "dir" attribute', () => {
     it('ltr', () => {
       const { getByText } = render(<FluentProvider dir="ltr">Test</FluentProvider>);

packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts

@@ -11,6 +11,10 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utili
 
 export type FluentProviderSlots = {
   root: Slot<'div'>;
+  /**
+   * HTMLStyleElement rendered during SSR that contains theme CSS variables
+   */
+  serverStyle?: Slot<'style'>;
 };
 
 // exported for callers to avoid referencing react-shared-context

packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx

@@ -35,7 +35,10 @@ export const renderFluentProvider_unstable = (
             <TooltipVisibilityProvider value={contextValues.tooltip}>
               <TextDirectionProvider dir={contextValues.textDirection}>
                 <OverridesProvider value={contextValues.overrides_unstable}>
-                  <slots.root {...slotProps.root}>{state.root.children}</slots.root>
+                  <slots.root {...slotProps.root}>
+                    {slots.serverStyle && <slots.serverStyle {...slotProps.serverStyle} />}
+                    {slotProps.root.children}
+                  </slots.root>
                 </OverridesProvider>
               </TextDirectionProvider>
             </TooltipVisibilityProvider>

packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts

@@ -10,7 +10,7 @@ import type {
   ThemeContextValue_unstable as ThemeContextValue,
 } from '@fluentui/react-shared-contexts';
 
-import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
+import { getNativeElementProps, resolveShorthand, useIsInSSRContext, useMergedRefs } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
 import type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';
@@ -69,6 +69,7 @@ export const useFluentProvider_unstable = (
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const { styleTagId, rule } = useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument });
   return {
     applyStylesToPortals,
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -78,17 +79,26 @@ export const useFluentProvider_unstable = (
     theme: mergedTheme,
     // eslint-disable-next-line @typescript-eslint/naming-convention
     overrides_unstable: mergedOverrides,
-    themeClassName: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),
+    themeClassName: styleTagId,
 
     components: {
       root: 'div',
+      serverStyle: 'style',
     },
 
     root: getNativeElementProps('div', {
       ...props,
       dir,
       ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>({ targetDocument })),
     }),
+
+    serverStyle: resolveShorthand(props.serverStyle, {
+      required: useIsInSSRContext(),
+      defaultProps: {
+        id: styleTagId,
+        dangerouslySetInnerHTML: { __html: rule },
+      },
+    }),
   };
 };
 

packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts

@@ -6,6 +6,7 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 
 export const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {
   root: 'fui-FluentProvider',
+  serverStyle: 'fui-FluentProvider__serverStyle',
 };
 
 const useStyles = makeStyles({
@@ -29,5 +30,9 @@ export const useFluentProviderStyles_unstable = (state: FluentProviderState) =>
     state.root.className,
   );
 
+  if (state.serverStyle) {
+    state.serverStyle.className = mergeClasses(fluentProviderClassNames.serverStyle, state.serverStyle.className);
+  }
+
   return state;
 };

packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx

@@ -25,7 +25,7 @@ describe('useFluentProviderThemeStyleTag', () => {
     );
 
     // Assert
-    expect(document.getElementById(result.current)).not.toBeNull();
+    expect(document.getElementById(result.current.styleTagId)).not.toBeNull();
   });
 
   it('should remove style tag on unmount', () => {
@@ -38,7 +38,7 @@ describe('useFluentProviderThemeStyleTag', () => {
     unmount();
 
     // Assert
-    expect(document.getElementById(result.current)).toBeNull();
+    expect(document.getElementById(result.current.styleTagId)).toBeNull();
   });
 
   it('should render css variables in theme', () => {
@@ -48,11 +48,11 @@ describe('useFluentProviderThemeStyleTag', () => {
     );
 
     // Assert
-    const tag = document.getElementById(result.current) as HTMLStyleElement;
+    const tag = document.getElementById(result.current.styleTagId) as HTMLStyleElement;
     const sheet = tag.sheet as CSSStyleSheet;
     const rule = sheet.cssRules[0] as CSSStyleRule;
 
-    expect(rule.selectorText).toEqual(`.${result.current}`);
+    expect(rule.selectorText).toEqual(`.${result.current.styleTagId}`);
     expect(rule.cssText).toMatchInlineSnapshot(`".fui-FluentProvider1 {--css-variable-1: 1; --css-variable-2: 2;}"`);
   });
 
@@ -66,10 +66,10 @@ describe('useFluentProviderThemeStyleTag', () => {
     rerender();
 
     // Assert
-    const tag = document.getElementById(result.current) as HTMLStyleElement;
+    const tag = document.getElementById(result.current.styleTagId) as HTMLStyleElement;
     const sheet = tag.sheet as CSSStyleSheet;
     const rule = sheet.cssRules[0] as CSSStyleRule;
-    expect(rule.selectorText).toEqual(`.${result.current}`);
+    expect(rule.selectorText).toEqual(`.${result.current.styleTagId}`);
     expect(rule.cssText).toMatchInlineSnapshot(`".fui-FluentProvider1 {--css-variable-update: xxx;}"`);
   });
 
@@ -82,7 +82,7 @@ describe('useFluentProviderThemeStyleTag', () => {
       () => useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document }),
       { wrapper: props => <RendererProvider renderer={renderer}>{props.children}</RendererProvider> },
     );
-    const tag = document.getElementById(result.current) as HTMLStyleElement;
+    const tag = document.getElementById(result.current.styleTagId) as HTMLStyleElement;
 
     expect(tag.getAttribute('id')).toBe('fui-FluentProvider1');
     expect(tag.getAttribute('nonce')).toBe('random');

packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts

@@ -1,4 +1,4 @@
-import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import { useId, useIsInSSRContext, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 import { useRenderer_unstable } from '@griffel/react';
 import * as React from 'react';
 
@@ -46,6 +46,7 @@ const insertSheet = (tag: HTMLStyleElement, rule: string) => {
  */
 export const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {
   const { targetDocument, theme } = options;
+  const isInSSRContext = useIsInSSRContext();
 
   const renderer = useRenderer_unstable();
   const styleTag = React.useRef<HTMLStyleElement>();
@@ -64,17 +65,22 @@ export const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState
 
   const rule = `.${styleTagId} { ${cssVarsAsString} }`;
 
-  useInsertionEffect(() => {
-    styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });
-
-    if (styleTag.current) {
-      insertSheet(styleTag.current, rule);
-
-      return () => {
-        styleTag.current?.remove();
-      };
-    }
-  }, [styleTagId, targetDocument, rule, styleElementAttributes]);
+  if (!isInSSRContext) {
+    // Not really breaking the rules of hooks here, this condition will only change if the parent
+    // tree is different (i.e. an SSRProvider is added/removed)
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useInsertionEffect(() => {
+      styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });
+
+      if (styleTag.current) {
+        insertSheet(styleTag.current, rule);
+
+        return () => {
+          styleTag.current?.remove();
+        };
+      }
+    }, [styleTagId, targetDocument, rule, styleElementAttributes]);
+  }
 
-  return styleTagId;
+  return { styleTagId, rule };
 };

packages/react-components/react-utilities/etc/react-utilities.api.md

@@ -197,6 +197,9 @@ export function useForceUpdate(): DispatchWithoutAction;
 // @public
 export function useId(prefix?: string, providedId?: string): string;
 
+// @internal (undocumented)
+export function useIsInSSRContext(): boolean;
+
 // @public
 export const useIsomorphicLayoutEffect: typeof React_2.useEffect;
 

packages/react-components/react-utilities/src/index.ts

@@ -32,7 +32,7 @@ export {
 } from './hooks/index';
 export type { RefObjectFunction, UseControllableStateOptions, UseOnClickOrScrollOutsideOptions } from './hooks/index';
 
-export { canUseDOM, useIsSSR, SSRProvider } from './ssr/index';
+export { canUseDOM, useIsSSR, useIsInSSRContext, SSRProvider } from './ssr/index';
 
 export {
   clamp,

packages/react-components/react-utilities/src/ssr/SSRContext-node.test.tsx

@@ -5,7 +5,7 @@
 // 👆 this is intentionally to test in SSR like environment
 
 import { renderHook } from '@testing-library/react-hooks';
-import { SSRProvider, useIsSSR } from './SSRContext';
+import { SSRProvider, useIsSSR, useIsInSSRContext } from './SSRContext';
 
 describe('useIsSSR (node)', () => {
   afterEach(() => {
@@ -27,3 +27,15 @@ describe('useIsSSR (node)', () => {
     expect(result.current).toBe(true);
   });
 });
+
+describe('useIsInSSRContext (node)', () => {
+  it('returns true if wrapped by an SSRProvider', () => {
+    const { result } = renderHook(() => useIsInSSRContext(), { wrapper: SSRProvider });
+    expect(result.current).toBe(true);
+  });
+
+  it('returns false if not wrapped by an SSRProvider', () => {
+    const { result } = renderHook(() => useIsInSSRContext());
+    expect(result.current).toBe(false);
+  });
+});