From 4735d90a436a136b5dcdf0309ecb83ccb8293953 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 21 Mar 2023 18:36:34 +0100
Subject: [PATCH 01/26] feat: Render theme CSS variables in new SSR style slot

Adds a new `serverStyle` slot to the `FluentProvider` that is only
rendered when the provider is a child of an `SSRProvider`.

Also updates `useFluentProviderThemeTag` to return the CSS rule that
contains all CSS variables.

This PR makes use of dangerous HTML, since react will output certain
characters in unicode which can result in invalid CSS, [this approach is
also taken by Emotion](https://github.com/emotion-js/emotion/blob/89b6dbb3c13d49ef1fa3d88888672d810853f05a/packages/react/src/emotion-element.js#L72-L78)
---
 apps/ssr-tests-v9/src/build.ts                |  3 +-
 .../FluentProvider-node.test.tsx              | 59 +++++++++++++++++++
 .../FluentProvider/FluentProvider.test.tsx    | 45 +++++++++++++-
 .../FluentProvider/FluentProvider.types.ts    |  4 ++
 .../FluentProvider/renderFluentProvider.tsx   |  5 +-
 .../FluentProvider/useFluentProvider.ts       | 14 ++++-
 .../FluentProvider/useFluentProviderStyles.ts |  5 ++
 .../useFluentProviderThemeStyleTag.test.tsx   | 14 ++---
 .../useFluentProviderThemeStyleTag.ts         | 26 ++++----
 .../react-utilities/src/index.ts              |  2 +-
 .../src/ssr/SSRContext-node.test.tsx          | 14 ++++-
 .../src/ssr/SSRContext.test.tsx               | 14 ++++-
 .../react-utilities/src/ssr/SSRContext.tsx    |  7 +++
 13 files changed, 186 insertions(+), 26 deletions(-)
 create mode 100644 packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx

diff --git a/apps/ssr-tests-v9/src/build.ts b/apps/ssr-tests-v9/src/build.ts
index d160793a2045a..ad7d352b48572 100644
--- a/apps/ssr-tests-v9/src/build.ts
+++ b/apps/ssr-tests-v9/src/build.ts
@@ -29,7 +29,7 @@ async function build() {
   // https://github.com/facebook/react/issues/13097
   const skippedPaths = ['react-portal'];
 
-  const rawStoriesGlobs = getPackageStoriesGlob({
+  let rawStoriesGlobs = getPackageStoriesGlob({
     packageName: '@fluentui/react-components',
     callerPath: __dirname,
   }).filter(
@@ -44,6 +44,7 @@ async function build() {
   ) as string[];
 
   rawStoriesGlobs.push(path.resolve(path.join(__dirname, './stories/**/index.stories.tsx')));
+  rawStoriesGlobs = rawStoriesGlobs.filter(x => x.includes('react-button'));
   const storiesGlobs = rawStoriesGlobs
     // TODO: Find a better way for this. Pass the path via params? 👇
     .map(pattern => path.resolve(__dirname, pattern));
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
new file mode 100644
index 0000000000000..a47af85d69814
--- /dev/null
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
@@ -0,0 +1,59 @@
+/*
+ * @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 { webLightTheme } from '@fluentui/react-theme';
+import { FluentProvider } from './FluentProvider';
+import * as prettier from 'prettier';
+
+jest.mock('@fluentui/react-theme', () => ({
+  ...jest.requireActual('@fluentui/react-theme'),
+  webLightTheme: {
+    colorNeutralForeground1: 'black',
+    colorNeutralBackground1: 'white',
+  },
+}));
+
+const parseHTMLString = (html: string) => {
+  return prettier.format(html, { parser: 'html' });
+};
+
+describe('FluentProvider (node)', () => {
+  it('should render CSS variables as inline style when wrapped with SSRPRovider', () => {
+    const html = ReactDOM.renderToStaticMarkup(
+      <SSRProvider>
+        <FluentProvider theme={webLightTheme} />
+      </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={webLightTheme} />);
+
+    expect(parseHTMLString(html)).toMatchInlineSnapshot(`
+      "<div
+        dir="ltr"
+        class="fui-FluentProvider fui-FluentProvider1 "
+      ></div>"
+    `);
+  });
+});
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
index 7d0e5992c44da..593da4200ad06 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
+++ b/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>);
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts
index 3d6f2230e564f..84dd0fd098469 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts
+++ b/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
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx b/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
index d7af3e313d314..addade655ad5a 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
+++ b/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>
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
index faf476bb6b2b2..00a9f6e3a30af 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
+++ b/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,10 +79,11 @@ 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', {
@@ -89,6 +91,14 @@ export const useFluentProvider_unstable = (
       dir,
       ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>({ targetDocument })),
     }),
+
+    serverStyle: resolveShorthand(props.serverStyle, {
+      required: useIsInSSRContext(),
+      defaultProps: {
+        id: styleTagId,
+        dangerouslySetInnerHTML: { __html: rule },
+      },
+    }),
   };
 };
 
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
index accc4f7d21087..e25aab7d266b5 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
+++ b/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;
 };
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
index 44e6b104d0b6c..fa15988a78d15 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
+++ b/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');
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
index afe33b6d5bef8..3abf3deaa37b8 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
+++ b/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,20 @@ export const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState
 
   const rule = `.${styleTagId} { ${cssVarsAsString} }`;
 
-  useInsertionEffect(() => {
-    styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });
+  if (!isInSSRContext) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useInsertionEffect(() => {
+      styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });
 
-    if (styleTag.current) {
-      insertSheet(styleTag.current, rule);
+      if (styleTag.current) {
+        insertSheet(styleTag.current, rule);
 
-      return () => {
-        styleTag.current?.remove();
-      };
-    }
-  }, [styleTagId, targetDocument, rule, styleElementAttributes]);
+        return () => {
+          styleTag.current?.remove();
+        };
+      }
+    }, [styleTagId, targetDocument, rule, styleElementAttributes]);
+  }
 
-  return styleTagId;
+  return { styleTagId, rule };
 };
diff --git a/packages/react-components/react-utilities/src/index.ts b/packages/react-components/react-utilities/src/index.ts
index 743ee85e64d6d..bf2a57deac75c 100644
--- a/packages/react-components/react-utilities/src/index.ts
+++ b/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,
diff --git a/packages/react-components/react-utilities/src/ssr/SSRContext-node.test.tsx b/packages/react-components/react-utilities/src/ssr/SSRContext-node.test.tsx
index aa67c1bb3579b..636698c0a8e12 100644
--- a/packages/react-components/react-utilities/src/ssr/SSRContext-node.test.tsx
+++ b/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);
+  });
+});
diff --git a/packages/react-components/react-utilities/src/ssr/SSRContext.test.tsx b/packages/react-components/react-utilities/src/ssr/SSRContext.test.tsx
index fcc7a445cadf9..04f535a50f326 100644
--- a/packages/react-components/react-utilities/src/ssr/SSRContext.test.tsx
+++ b/packages/react-components/react-utilities/src/ssr/SSRContext.test.tsx
@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react-hooks';
-import { SSRProvider, useIsSSR } from './SSRContext';
+import { SSRProvider, useIsSSR, useIsInSSRContext } from './SSRContext';
 
 describe('useIsSSR', () => {
   it('returns "false" outside of SSRProvider', () => {
@@ -14,3 +14,15 @@ describe('useIsSSR', () => {
     expect(result.current).toBe(false);
   });
 });
+
+describe('useIsInSSRContext', () => {
+  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);
+  });
+});
diff --git a/packages/react-components/react-utilities/src/ssr/SSRContext.tsx b/packages/react-components/react-utilities/src/ssr/SSRContext.tsx
index 7cbce13cce005..a96d91fce8d67 100644
--- a/packages/react-components/react-utilities/src/ssr/SSRContext.tsx
+++ b/packages/react-components/react-utilities/src/ssr/SSRContext.tsx
@@ -41,6 +41,13 @@ export const SSRProvider: React.FC<{ children: React.ReactNode }> = props => {
   return <SSRContext.Provider value={value}>{props.children}</SSRContext.Provider>;
 };
 
+/**
+ * @returns Whether the current component is wrapped by an SSRProvider.
+ */
+export function useIsInSSRContext(): boolean {
+  return useSSRContext() !== defaultSSRContextValue;
+}
+
 /**
  * Returns whether the component is currently being server side rendered or hydrated on the client. Can be used to delay
  * browser-specific rendering until after hydration. May cause re-renders on a client when is used within SSRProvider.

From 008b7bb8d4ca0592a4a47737bc1f202f4913c481 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 21 Mar 2023 18:44:35 +0100
Subject: [PATCH 02/26] changefile

---
 ...eact-provider-51de7ed7-e932-4b2f-aa6b-c871f1b8c016.json | 7 +++++++
 ...act-utilities-3fde228b-0da2-4f87-8814-85c1dc4b6515.json | 7 +++++++
 2 files changed, 14 insertions(+)
 create mode 100644 change/@fluentui-react-provider-51de7ed7-e932-4b2f-aa6b-c871f1b8c016.json
 create mode 100644 change/@fluentui-react-utilities-3fde228b-0da2-4f87-8814-85c1dc4b6515.json

diff --git a/change/@fluentui-react-provider-51de7ed7-e932-4b2f-aa6b-c871f1b8c016.json b/change/@fluentui-react-provider-51de7ed7-e932-4b2f-aa6b-c871f1b8c016.json
new file mode 100644
index 0000000000000..55b1ebb5819ae
--- /dev/null
+++ b/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": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-utilities-3fde228b-0da2-4f87-8814-85c1dc4b6515.json b/change/@fluentui-react-utilities-3fde228b-0da2-4f87-8814-85c1dc4b6515.json
new file mode 100644
index 0000000000000..fc26a4dd568e8
--- /dev/null
+++ b/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": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

From 564366c3cb139415a46a13576b79323f094db935 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 21 Mar 2023 18:45:02 +0100
Subject: [PATCH 03/26] revert

---
 apps/ssr-tests-v9/src/build.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/ssr-tests-v9/src/build.ts b/apps/ssr-tests-v9/src/build.ts
index ad7d352b48572..d160793a2045a 100644
--- a/apps/ssr-tests-v9/src/build.ts
+++ b/apps/ssr-tests-v9/src/build.ts
@@ -29,7 +29,7 @@ async function build() {
   // https://github.com/facebook/react/issues/13097
   const skippedPaths = ['react-portal'];
 
-  let rawStoriesGlobs = getPackageStoriesGlob({
+  const rawStoriesGlobs = getPackageStoriesGlob({
     packageName: '@fluentui/react-components',
     callerPath: __dirname,
   }).filter(
@@ -44,7 +44,6 @@ async function build() {
   ) as string[];
 
   rawStoriesGlobs.push(path.resolve(path.join(__dirname, './stories/**/index.stories.tsx')));
-  rawStoriesGlobs = rawStoriesGlobs.filter(x => x.includes('react-button'));
   const storiesGlobs = rawStoriesGlobs
     // TODO: Find a better way for this. Pass the path via params? 👇
     .map(pattern => path.resolve(__dirname, pattern));

From 1f9ca81cc5cd3699e75c98dab05416bab3b435c9 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 21 Mar 2023 18:48:24 +0100
Subject: [PATCH 04/26] remove mock

---
 .../FluentProvider/FluentProvider-node.test.tsx | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
index a47af85d69814..8808eb1f349bc 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
@@ -7,27 +7,22 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/server';
 import { SSRProvider } from '@fluentui/react-utilities';
-import { webLightTheme } from '@fluentui/react-theme';
 import { FluentProvider } from './FluentProvider';
 import * as prettier from 'prettier';
 
-jest.mock('@fluentui/react-theme', () => ({
-  ...jest.requireActual('@fluentui/react-theme'),
-  webLightTheme: {
-    colorNeutralForeground1: 'black',
-    colorNeutralBackground1: 'white',
-  },
-}));
-
 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={webLightTheme} />
+        <FluentProvider theme={testTheme} />
       </SSRProvider>,
     );
 
@@ -47,7 +42,7 @@ describe('FluentProvider (node)', () => {
   });
 
   it('should not render CSS variables as inline style when not wrapped with SSRPRovider', () => {
-    const html = ReactDOM.renderToStaticMarkup(<FluentProvider theme={webLightTheme} />);
+    const html = ReactDOM.renderToStaticMarkup(<FluentProvider theme={testTheme} />);
 
     expect(parseHTMLString(html)).toMatchInlineSnapshot(`
       "<div

From 73c23148ddd2ea160b87a45f4bb0214b007e7c24 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 21 Mar 2023 18:54:31 +0100
Subject: [PATCH 05/26] add explainer

---
 .../components/FluentProvider/useFluentProviderThemeStyleTag.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
index 3abf3deaa37b8..a04c9e12b27d7 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
@@ -66,6 +66,8 @@ export const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState
   const rule = `.${styleTagId} { ${cssVarsAsString} }`;
 
   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 });

From 12696d3db46d3f95fb4f9aa336dc146b3ed0d294 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 21 Mar 2023 19:04:01 +0100
Subject: [PATCH 06/26] update md

---
 .../react-provider/etc/react-provider.api.md                | 6 +++++-
 .../react-utilities/etc/react-utilities.api.md              | 3 +++
 .../react-components/react-utilities/src/ssr/SSRContext.tsx | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/react-provider/etc/react-provider.api.md b/packages/react-components/react-provider/etc/react-provider.api.md
index d0255a7bceaa6..4c58e002e4e81 100644
--- a/packages/react-components/react-provider/etc/react-provider.api.md
+++ b/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)
 
diff --git a/packages/react-components/react-utilities/etc/react-utilities.api.md b/packages/react-components/react-utilities/etc/react-utilities.api.md
index b60ec22357e97..c8cd4d9737b73 100644
--- a/packages/react-components/react-utilities/etc/react-utilities.api.md
+++ b/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;
 
diff --git a/packages/react-components/react-utilities/src/ssr/SSRContext.tsx b/packages/react-components/react-utilities/src/ssr/SSRContext.tsx
index a96d91fce8d67..4291fbfc216f0 100644
--- a/packages/react-components/react-utilities/src/ssr/SSRContext.tsx
+++ b/packages/react-components/react-utilities/src/ssr/SSRContext.tsx
@@ -43,6 +43,7 @@ export const SSRProvider: React.FC<{ children: React.ReactNode }> = props => {
 
 /**
  * @returns Whether the current component is wrapped by an SSRProvider.
+ * @internal
  */
 export function useIsInSSRContext(): boolean {
   return useSSRContext() !== defaultSSRContextValue;

From cc23599cea653cdd3168856b79274f6af1bf2c40 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 21 Mar 2023 20:48:56 +0100
Subject: [PATCH 07/26] add nonce

---
 .../FluentProvider-node.test.tsx              | 35 +++++++++++++++++++
 .../FluentProvider/FluentProvider.test.tsx    | 24 +++++++++++--
 .../FluentProvider/useFluentProvider.ts       |  3 ++
 3 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
index 8808eb1f349bc..42281f06d8927 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
@@ -9,6 +9,8 @@ import * as ReactDOM from 'react-dom/server';
 import { SSRProvider } from '@fluentui/react-utilities';
 import { FluentProvider } from './FluentProvider';
 import * as prettier from 'prettier';
+import { createDOMRenderer } from '@griffel/core';
+import { RendererProvider } from '@griffel/react';
 
 const parseHTMLString = (html: string) => {
   return prettier.format(html, { parser: 'html' });
@@ -51,4 +53,37 @@ describe('FluentProvider (node)', () => {
       ></div>"
     `);
   });
+
+  it('renders nonce with SSR style element', () => {
+    const nonce = 'random';
+    const renderer = createDOMRenderer(undefined, {
+      styleElementAttributes: { nonce },
+    });
+
+    const html = ReactDOM.renderToStaticMarkup(
+      <SSRProvider>
+        <RendererProvider renderer={renderer}>
+          <FluentProvider theme={testTheme} />
+        </RendererProvider>
+      </SSRProvider>,
+    );
+
+    expect(parseHTMLString(html)).toMatchInlineSnapshot(`
+      "<div
+        dir="ltr"
+        class="fui-FluentProvider fui-FluentProvider1 "
+      >
+        <style
+          id="fui-FluentProvider1"
+          nonce="random"
+          class="fui-FluentProvider__serverStyle"
+        >
+          .fui-FluentProvider1 {
+            --colorNeutralForeground1: black;
+            --colorNeutralBackground1: white;
+          }
+        </style>
+      </div>"
+    `);
+  });
 });
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
index 593da4200ad06..37cace8bdfbf7 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
@@ -1,11 +1,14 @@
 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 * as reactTestRenderer from 'react-test-renderer';
 
 import { FluentProvider } from './FluentProvider';
 import { isConformant } from '../../testing/isConformant';
 import { teamsLightTheme } from '@fluentui/react-theme';
+import { createDOMRenderer } from '@griffel/core';
+import { RendererProvider } from '@griffel/react';
+import { fluentProviderClassNames } from './useFluentProviderStyles';
 
 describe('FluentProvider', () => {
   // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -32,7 +35,7 @@ describe('FluentProvider', () => {
    * Note: see more visual regression tests for FluentProvider in /apps/vr-tests.
    */
   it('renders a default state', () => {
-    const component = renderer.create(
+    const component = reactTestRenderer.create(
       <FluentProvider theme={{ colorBrandBackground2: '#fff' }}>Default FluentProvider</FluentProvider>,
     );
     const tree = component.toJSON();
@@ -78,6 +81,23 @@ describe('FluentProvider', () => {
     `);
   });
 
+  it('renders nonce with SSR style element', () => {
+    const nonce = 'random';
+    const renderer = createDOMRenderer(document, {
+      styleElementAttributes: { nonce },
+    });
+
+    const { container } = render(
+      <SSRProvider>
+        <RendererProvider renderer={renderer}>
+          <FluentProvider theme={{ colorNeutralBackground1: 'white', colorNeutralForeground1: 'black' }} />
+        </RendererProvider>
+      </SSRProvider>,
+    );
+
+    expect(container.querySelector(`.${fluentProviderClassNames.serverStyle}`)?.getAttribute('nonce')).toEqual(nonce);
+  });
+
   describe('applies "dir" attribute', () => {
     it('ltr', () => {
       const { getByText } = render(<FluentProvider dir="ltr">Test</FluentProvider>);
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
index 00a9f6e3a30af..a6e3a1f3f7575 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
@@ -14,6 +14,7 @@ import { getNativeElementProps, resolveShorthand, useIsInSSRContext, useMergedRe
 import * as React from 'react';
 import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
 import type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';
+import { useRenderer_unstable } from '@griffel/react';
 
 /**
  * Create the state required to render FluentProvider.
@@ -69,6 +70,7 @@ export const useFluentProvider_unstable = (
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const renderer = useRenderer_unstable();
   const { styleTagId, rule } = useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument });
   return {
     applyStylesToPortals,
@@ -97,6 +99,7 @@ export const useFluentProvider_unstable = (
       defaultProps: {
         id: styleTagId,
         dangerouslySetInnerHTML: { __html: rule },
+        nonce: renderer.styleElementAttributes?.nonce,
       },
     }),
   };

From 5a5d447aed65c08ad35f4a61506637794eb91254 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Wed, 22 Mar 2023 09:44:29 +0100
Subject: [PATCH 08/26] make slot private

---
 .../react-provider/etc/react-provider.api.md        |  3 +--
 .../FluentProvider/FluentProvider-node.test.tsx     |  8 ++------
 .../FluentProvider/FluentProvider.test.tsx          |  4 +---
 .../FluentProvider/FluentProvider.types.ts          |  6 +++++-
 .../FluentProvider/renderFluentProvider.tsx         |  9 +++++++--
 .../components/FluentProvider/useFluentProvider.ts  | 13 ++++++++++---
 .../FluentProvider/useFluentProviderStyles.ts       |  5 -----
 7 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/packages/react-components/react-provider/etc/react-provider.api.md b/packages/react-components/react-provider/etc/react-provider.api.md
index 4c58e002e4e81..ae3055209ba46 100644
--- a/packages/react-components/react-provider/etc/react-provider.api.md
+++ b/packages/react-components/react-provider/etc/react-provider.api.md
@@ -55,11 +55,10 @@ export type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir
 // @public (undocumented)
 export type FluentProviderSlots = {
     root: Slot<'div'>;
-    serverStyle?: Slot<'style'>;
 };
 
 // @public (undocumented)
-export type FluentProviderState = ComponentState<FluentProviderSlots> & Pick<FluentProviderProps, 'targetDocument'> & Required<Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>> & {
+export type FluentProviderState = ComponentState<FluentProviderSlots & FluentProviderInternalSlots> & Pick<FluentProviderProps, 'targetDocument'> & Required<Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>> & {
     theme: ThemeContextValue_unstable;
     themeClassName: string;
 };
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
index 42281f06d8927..2e71761e81378 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
@@ -33,7 +33,7 @@ describe('FluentProvider (node)', () => {
         dir="ltr"
         class="fui-FluentProvider fui-FluentProvider1 "
       >
-        <style id="fui-FluentProvider1" class="fui-FluentProvider__serverStyle">
+        <style id="fui-FluentProvider1">
           .fui-FluentProvider1 {
             --colorNeutralForeground1: black;
             --colorNeutralBackground1: white;
@@ -73,11 +73,7 @@ describe('FluentProvider (node)', () => {
         dir="ltr"
         class="fui-FluentProvider fui-FluentProvider1 "
       >
-        <style
-          id="fui-FluentProvider1"
-          nonce="random"
-          class="fui-FluentProvider__serverStyle"
-        >
+        <style id="fui-FluentProvider1" nonce="random">
           .fui-FluentProvider1 {
             --colorNeutralForeground1: black;
             --colorNeutralBackground1: white;
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
index 37cace8bdfbf7..29524bb3e8433 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
@@ -8,7 +8,6 @@ import { isConformant } from '../../testing/isConformant';
 import { teamsLightTheme } from '@fluentui/react-theme';
 import { createDOMRenderer } from '@griffel/core';
 import { RendererProvider } from '@griffel/react';
-import { fluentProviderClassNames } from './useFluentProviderStyles';
 
 describe('FluentProvider', () => {
   // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -58,7 +57,6 @@ describe('FluentProvider', () => {
           dir="ltr"
         >
           <style
-            class="fui-FluentProvider__serverStyle"
             id="fui-FluentProvider1"
           >
             .fui-FluentProvider1 { --colorNeutralBackground1: white; --colorNeutralForeground1: black;  }
@@ -95,7 +93,7 @@ describe('FluentProvider', () => {
       </SSRProvider>,
     );
 
-    expect(container.querySelector(`.${fluentProviderClassNames.serverStyle}`)?.getAttribute('nonce')).toEqual(nonce);
+    expect(container.querySelector('style')?.getAttribute('nonce')).toEqual(nonce);
   });
 
   describe('applies "dir" attribute', () => {
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts
index 84dd0fd098469..16dcdc51fec76 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts
@@ -11,8 +11,12 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utili
 
 export type FluentProviderSlots = {
   root: Slot<'div'>;
+};
+
+export type FluentProviderInternalSlots = {
   /**
    * HTMLStyleElement rendered during SSR that contains theme CSS variables
+   * @internal
    */
   serverStyle?: Slot<'style'>;
 };
@@ -45,7 +49,7 @@ export type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir
   overrides_unstable?: OverridesContextValue;
 };
 
-export type FluentProviderState = ComponentState<FluentProviderSlots> &
+export type FluentProviderState = ComponentState<FluentProviderSlots & FluentProviderInternalSlots> &
   Pick<FluentProviderProps, 'targetDocument'> &
   Required<
     Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx b/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
index addade655ad5a..6d6031ab6b38d 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
@@ -10,7 +10,12 @@ import {
   CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,
 } from '@fluentui/react-shared-contexts';
 import { getSlots } from '@fluentui/react-utilities';
-import type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';
+import type {
+  FluentProviderInternalSlots,
+  FluentProviderContextValues,
+  FluentProviderState,
+  FluentProviderSlots,
+} from './FluentProvider.types';
 
 /**
  * Render the final JSX of FluentProvider
@@ -19,7 +24,7 @@ export const renderFluentProvider_unstable = (
   state: FluentProviderState,
   contextValues: FluentProviderContextValues,
 ) => {
-  const { slots, slotProps } = getSlots<FluentProviderSlots>(state);
+  const { slots, slotProps } = getSlots<FluentProviderSlots & FluentProviderInternalSlots>(state);
 
   // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable
   // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
index a6e3a1f3f7575..91916f70b7c45 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
@@ -10,7 +10,13 @@ import type {
   ThemeContextValue_unstable as ThemeContextValue,
 } from '@fluentui/react-shared-contexts';
 
-import { getNativeElementProps, resolveShorthand, useIsInSSRContext, useMergedRefs } from '@fluentui/react-utilities';
+import {
+  getNativeElementProps,
+  resolveShorthand,
+  Slot,
+  useIsInSSRContext,
+  useMergedRefs,
+} from '@fluentui/react-utilities';
 import * as React from 'react';
 import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
 import type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';
@@ -94,12 +100,13 @@ export const useFluentProvider_unstable = (
       ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>({ targetDocument })),
     }),
 
-    serverStyle: resolveShorthand(props.serverStyle, {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    serverStyle: resolveShorthand(undefined as undefined | Slot<'style'>, {
       required: useIsInSSRContext(),
       defaultProps: {
         id: styleTagId,
         dangerouslySetInnerHTML: { __html: rule },
-        nonce: renderer.styleElementAttributes?.nonce,
+        ...renderer.styleElementAttributes,
       },
     }),
   };
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
index e25aab7d266b5..accc4f7d21087 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
@@ -6,7 +6,6 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 
 export const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {
   root: 'fui-FluentProvider',
-  serverStyle: 'fui-FluentProvider__serverStyle',
 };
 
 const useStyles = makeStyles({
@@ -30,9 +29,5 @@ export const useFluentProviderStyles_unstable = (state: FluentProviderState) =>
     state.root.className,
   );
 
-  if (state.serverStyle) {
-    state.serverStyle.className = mergeClasses(fluentProviderClassNames.serverStyle, state.serverStyle.className);
-  }
-
   return state;
 };

From 6a5ad4ba6853abdc9e9c78edd4afa8ce9009c0c3 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Wed, 22 Mar 2023 13:44:06 +0100
Subject: [PATCH 09/26] Remove SSR element on first render

---
 .../FluentProvider-node.test.tsx              | 13 +++-
 .../FluentProvider/FluentProvider.test.tsx    | 56 +-----------------
 .../FluentProvider/useFluentProvider.ts       | 28 ++++-----
 .../useFluentProviderThemeStyleTag.test.tsx   | 26 ++++++++
 .../useFluentProviderThemeStyleTag.ts         | 59 +++++++++++++------
 .../react-provider/src/constants.ts           |  1 +
 .../etc/react-utilities.api.md                |  3 -
 .../react-utilities/src/index.ts              |  2 +-
 .../src/ssr/SSRContext-node.test.tsx          | 14 +----
 .../src/ssr/SSRContext.test.tsx               | 14 +----
 .../react-utilities/src/ssr/SSRContext.tsx    |  8 ---
 11 files changed, 95 insertions(+), 129 deletions(-)
 create mode 100644 packages/react-components/react-provider/src/constants.ts

diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
index 2e71761e81378..d90ad655765aa 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
@@ -33,7 +33,7 @@ describe('FluentProvider (node)', () => {
         dir="ltr"
         class="fui-FluentProvider fui-FluentProvider1 "
       >
-        <style id="fui-FluentProvider1">
+        <style data-fui-theme="" id="fui-FluentProvider1">
           .fui-FluentProvider1 {
             --colorNeutralForeground1: black;
             --colorNeutralBackground1: white;
@@ -50,7 +50,14 @@ describe('FluentProvider (node)', () => {
       "<div
         dir="ltr"
         class="fui-FluentProvider fui-FluentProvider1 "
-      ></div>"
+      >
+        <style data-fui-theme="" id="fui-FluentProvider1">
+          .fui-FluentProvider1 {
+            --colorNeutralForeground1: black;
+            --colorNeutralBackground1: white;
+          }
+        </style>
+      </div>"
     `);
   });
 
@@ -73,7 +80,7 @@ describe('FluentProvider (node)', () => {
         dir="ltr"
         class="fui-FluentProvider fui-FluentProvider1 "
       >
-        <style id="fui-FluentProvider1" nonce="random">
+        <style data-fui-theme="" id="fui-FluentProvider1" nonce="random">
           .fui-FluentProvider1 {
             --colorNeutralForeground1: black;
             --colorNeutralBackground1: white;
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
index 29524bb3e8433..ac6144b2474a6 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
@@ -6,8 +6,6 @@ import * as reactTestRenderer from 'react-test-renderer';
 import { FluentProvider } from './FluentProvider';
 import { isConformant } from '../../testing/isConformant';
 import { teamsLightTheme } from '@fluentui/react-theme';
-import { createDOMRenderer } from '@griffel/core';
-import { RendererProvider } from '@griffel/react';
 
 describe('FluentProvider', () => {
   // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -41,59 +39,9 @@ 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
-            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', () => {
+  it('does not render style element when not in SSR', () => {
     const { container } = render(<FluentProvider theme={teamsLightTheme} />);
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <div
-          class="fui-FluentProvider fui-FluentProvider1"
-          dir="ltr"
-        />
-      </div>
-    `);
-  });
-
-  it('renders nonce with SSR style element', () => {
-    const nonce = 'random';
-    const renderer = createDOMRenderer(document, {
-      styleElementAttributes: { nonce },
-    });
-
-    const { container } = render(
-      <SSRProvider>
-        <RendererProvider renderer={renderer}>
-          <FluentProvider theme={{ colorNeutralBackground1: 'white', colorNeutralForeground1: 'black' }} />
-        </RendererProvider>
-      </SSRProvider>,
-    );
-
-    expect(container.querySelector('style')?.getAttribute('nonce')).toEqual(nonce);
+    expect(container.querySelector('style')).toBeNull();
   });
 
   describe('applies "dir" attribute', () => {
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
index 91916f70b7c45..f9f217fec09d4 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
@@ -10,17 +10,12 @@ import type {
   ThemeContextValue_unstable as ThemeContextValue,
 } from '@fluentui/react-shared-contexts';
 
-import {
-  getNativeElementProps,
-  resolveShorthand,
-  Slot,
-  useIsInSSRContext,
-  useMergedRefs,
-} from '@fluentui/react-utilities';
+import { canUseDOM, getNativeElementProps, resolveShorthand, Slot, useMergedRefs } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
 import type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';
 import { useRenderer_unstable } from '@griffel/react';
+import { FUI_THEME_STYLE_ATTR } from '../../constants';
 
 /**
  * Create the state required to render FluentProvider.
@@ -100,15 +95,18 @@ export const useFluentProvider_unstable = (
       ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>({ targetDocument })),
     }),
 
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    serverStyle: resolveShorthand(undefined as undefined | Slot<'style'>, {
-      required: useIsInSSRContext(),
-      defaultProps: {
-        id: styleTagId,
-        dangerouslySetInnerHTML: { __html: rule },
-        ...renderer.styleElementAttributes,
+    serverStyle: resolveShorthand<React.HTMLAttributes<HTMLElement> & { 'data-fui-theme'?: '' }>(
+      undefined as undefined | Slot<'style'>,
+      {
+        required: !canUseDOM(),
+        defaultProps: {
+          [FUI_THEME_STYLE_ATTR]: '',
+          id: styleTagId,
+          dangerouslySetInnerHTML: { __html: rule },
+          ...renderer.styleElementAttributes,
+        },
       },
-    }),
+    ),
   };
 };
 
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
index fa15988a78d15..a65ca6182c383 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
@@ -5,8 +5,17 @@ import { renderHook } from '@testing-library/react-hooks';
 import * as React from 'react';
 
 import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
+import { FUI_THEME_STYLE_ATTR } from '../../constants';
 
 jest.mock('@fluentui/react-theme');
+const createDocumentMock = (): Document => {
+  const externalDocument = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
+  const body = document.createElement('body');
+  const head = document.createElement('head');
+  externalDocument.documentElement.appendChild(head);
+  externalDocument.documentElement.appendChild(body);
+  return externalDocument;
+};
 
 describe('useFluentProviderThemeStyleTag', () => {
   const defaultTheme = {
@@ -87,4 +96,21 @@ describe('useFluentProviderThemeStyleTag', () => {
     expect(tag.getAttribute('id')).toBe('fui-FluentProvider1');
     expect(tag.getAttribute('nonce')).toBe('random');
   });
+
+  it('should move style tags in body to head on first render', () => {
+    const targetDocument = createDocumentMock();
+    const ssrStyleElement = targetDocument.createElement('style');
+    ssrStyleElement.setAttribute(FUI_THEME_STYLE_ATTR, '');
+    // Kinda hacky - assume the useId call returns as expected (ids are reset after each test)
+    ssrStyleElement.setAttribute('id', 'fui-FluentProvider1');
+    targetDocument.body.append(ssrStyleElement);
+
+    jest.spyOn(targetDocument, 'createElement');
+    renderHook(() => useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument }));
+
+    expect(targetDocument.body.querySelector('style')).toBeNull();
+    expect(targetDocument.head.querySelectorAll('style').length).toBe(1);
+    // eslint-disable-next-line deprecation/deprecation
+    expect(targetDocument.createElement).toHaveBeenCalledTimes(0);
+  });
 });
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
index a04c9e12b27d7..267b8e43a2724 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
@@ -1,6 +1,7 @@
-import { useId, useIsInSSRContext, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 import { useRenderer_unstable } from '@griffel/react';
 import * as React from 'react';
+import { FUI_THEME_STYLE_ATTR } from '../../constants';
 
 import type { FluentProviderState } from './FluentProvider.types';
 import { fluentProviderClassNames } from './useFluentProviderStyles';
@@ -17,6 +18,7 @@ const createStyleTag = (target: Document | undefined, elementAttributes: Record<
 
   const tag = target.createElement('style');
 
+  elementAttributes[FUI_THEME_STYLE_ATTR] = '';
   Object.keys(elementAttributes).forEach(attrName => {
     tag.setAttribute(attrName, elementAttributes[attrName]);
   });
@@ -46,10 +48,10 @@ const insertSheet = (tag: HTMLStyleElement, rule: string) => {
  */
 export const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {
   const { targetDocument, theme } = options;
-  const isInSSRContext = useIsInSSRContext();
+  useHandleSSRStyleElements(targetDocument);
 
   const renderer = useRenderer_unstable();
-  const styleTag = React.useRef<HTMLStyleElement>();
+  const styleTag = React.useRef<HTMLStyleElement | undefined | null>();
 
   const styleTagId = useId(fluentProviderClassNames.root);
   const styleElementAttributes = renderer.styleElementAttributes;
@@ -65,22 +67,41 @@ export const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState
 
   const rule = `.${styleTagId} { ${cssVarsAsString} }`;
 
-  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]);
-  }
+  useInsertionEffect(() => {
+    // The style element could already have been created during SSR - no need to recreate it
+    const ssrStyleElement = targetDocument?.getElementById(styleTagId) as HTMLStyleElement;
+    if (ssrStyleElement) {
+      styleTag.current = ssrStyleElement;
+      return () => styleTag.current?.remove();
+    }
+
+    styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });
+
+    if (styleTag.current) {
+      insertSheet(styleTag.current, rule);
+
+      return () => {
+        styleTag.current?.remove();
+      };
+    }
+  }, [styleTagId, targetDocument, rule, styleElementAttributes]);
 
   return { styleTagId, rule };
 };
+
+function useHandleSSRStyleElements(targetDocument: Document | undefined | null) {
+  // Using a state factory so that this logic only runs once per render
+  // Each FluentProvider can create its own style element during SSR as a slot
+  // Moves all theme style elements to document head during render to avoid hydration errors.
+  // Should be strict mode safe since the logic is idempotent.
+  React.useState(() => {
+    if (!targetDocument) {
+      return;
+    }
+
+    const themeStyleElements = targetDocument.body.querySelectorAll(`[${FUI_THEME_STYLE_ATTR}]`);
+    themeStyleElements.forEach(styleElement => {
+      targetDocument.head.append(styleElement);
+    });
+  });
+}
diff --git a/packages/react-components/react-provider/src/constants.ts b/packages/react-components/react-provider/src/constants.ts
new file mode 100644
index 0000000000000..940b75082bcf0
--- /dev/null
+++ b/packages/react-components/react-provider/src/constants.ts
@@ -0,0 +1 @@
+export const FUI_THEME_STYLE_ATTR = 'data-fui-theme';
diff --git a/packages/react-components/react-utilities/etc/react-utilities.api.md b/packages/react-components/react-utilities/etc/react-utilities.api.md
index c8cd4d9737b73..b60ec22357e97 100644
--- a/packages/react-components/react-utilities/etc/react-utilities.api.md
+++ b/packages/react-components/react-utilities/etc/react-utilities.api.md
@@ -197,9 +197,6 @@ 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;
 
diff --git a/packages/react-components/react-utilities/src/index.ts b/packages/react-components/react-utilities/src/index.ts
index bf2a57deac75c..743ee85e64d6d 100644
--- a/packages/react-components/react-utilities/src/index.ts
+++ b/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, useIsInSSRContext, SSRProvider } from './ssr/index';
+export { canUseDOM, useIsSSR, SSRProvider } from './ssr/index';
 
 export {
   clamp,
diff --git a/packages/react-components/react-utilities/src/ssr/SSRContext-node.test.tsx b/packages/react-components/react-utilities/src/ssr/SSRContext-node.test.tsx
index 636698c0a8e12..aa67c1bb3579b 100644
--- a/packages/react-components/react-utilities/src/ssr/SSRContext-node.test.tsx
+++ b/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, useIsInSSRContext } from './SSRContext';
+import { SSRProvider, useIsSSR } from './SSRContext';
 
 describe('useIsSSR (node)', () => {
   afterEach(() => {
@@ -27,15 +27,3 @@ 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);
-  });
-});
diff --git a/packages/react-components/react-utilities/src/ssr/SSRContext.test.tsx b/packages/react-components/react-utilities/src/ssr/SSRContext.test.tsx
index 04f535a50f326..fcc7a445cadf9 100644
--- a/packages/react-components/react-utilities/src/ssr/SSRContext.test.tsx
+++ b/packages/react-components/react-utilities/src/ssr/SSRContext.test.tsx
@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react-hooks';
-import { SSRProvider, useIsSSR, useIsInSSRContext } from './SSRContext';
+import { SSRProvider, useIsSSR } from './SSRContext';
 
 describe('useIsSSR', () => {
   it('returns "false" outside of SSRProvider', () => {
@@ -14,15 +14,3 @@ describe('useIsSSR', () => {
     expect(result.current).toBe(false);
   });
 });
-
-describe('useIsInSSRContext', () => {
-  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);
-  });
-});
diff --git a/packages/react-components/react-utilities/src/ssr/SSRContext.tsx b/packages/react-components/react-utilities/src/ssr/SSRContext.tsx
index 4291fbfc216f0..7cbce13cce005 100644
--- a/packages/react-components/react-utilities/src/ssr/SSRContext.tsx
+++ b/packages/react-components/react-utilities/src/ssr/SSRContext.tsx
@@ -41,14 +41,6 @@ export const SSRProvider: React.FC<{ children: React.ReactNode }> = props => {
   return <SSRContext.Provider value={value}>{props.children}</SSRContext.Provider>;
 };
 
-/**
- * @returns Whether the current component is wrapped by an SSRProvider.
- * @internal
- */
-export function useIsInSSRContext(): boolean {
-  return useSSRContext() !== defaultSSRContextValue;
-}
-
 /**
  * Returns whether the component is currently being server side rendered or hydrated on the client. Can be used to delay
  * browser-specific rendering until after hydration. May cause re-renders on a client when is used within SSRProvider.

From 2bea36312db6c7dd3ec46f330892def561c2e36c Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Wed, 22 Mar 2023 13:45:02 +0100
Subject: [PATCH 10/26] remove changefile

---
 ...act-utilities-3fde228b-0da2-4f87-8814-85c1dc4b6515.json | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 change/@fluentui-react-utilities-3fde228b-0da2-4f87-8814-85c1dc4b6515.json

diff --git a/change/@fluentui-react-utilities-3fde228b-0da2-4f87-8814-85c1dc4b6515.json b/change/@fluentui-react-utilities-3fde228b-0da2-4f87-8814-85c1dc4b6515.json
deleted file mode 100644
index fc26a4dd568e8..0000000000000
--- a/change/@fluentui-react-utilities-3fde228b-0da2-4f87-8814-85c1dc4b6515.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "feat: implement useInSSRContext",
-  "packageName": "@fluentui/react-utilities",
-  "email": "lingfangao@hotmail.com",
-  "dependentChangeType": "patch"
-}

From f795b0858f347f2f9df0b88cd76f8567c67474b7 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Wed, 22 Mar 2023 14:21:13 +0100
Subject: [PATCH 11/26] pr feedback

---
 .../react-provider/etc/react-provider.api.md  |  8 +++++--
 .../FluentProvider-node.test.tsx              |  2 +-
 .../FluentProvider/FluentProvider.types.ts    | 23 +++++++++++--------
 .../FluentProvider/renderFluentProvider.tsx   | 21 +++++++++--------
 .../FluentProvider/useFluentProvider.ts       | 21 +++++++----------
 .../useFluentProviderThemeStyleTag.ts         |  2 +-
 6 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/packages/react-components/react-provider/etc/react-provider.api.md b/packages/react-components/react-provider/etc/react-provider.api.md
index ae3055209ba46..b3d9e7cc5eba5 100644
--- a/packages/react-components/react-provider/etc/react-provider.api.md
+++ b/packages/react-components/react-provider/etc/react-provider.api.md
@@ -58,9 +58,13 @@ export type FluentProviderSlots = {
 };
 
 // @public (undocumented)
-export type FluentProviderState = ComponentState<FluentProviderSlots & FluentProviderInternalSlots> & Pick<FluentProviderProps, 'targetDocument'> & Required<Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>> & {
+export type FluentProviderState = ComponentState<FluentProviderSlots> & Pick<FluentProviderProps, 'targetDocument'> & Required<Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>> & {
     theme: ThemeContextValue_unstable;
     themeClassName: string;
+    serverStyleProps: {
+        cssRule: string;
+        rendererAttributes: Record<string, string>;
+    };
 };
 
 // @public
@@ -75,7 +79,7 @@ export function useFluentProviderContextValues_unstable(state: FluentProviderSta
 // @public
 export const useFluentProviderStyles_unstable: (state: FluentProviderState) => FluentProviderState;
 
-// @public
+// @internal
 export const useFluentProviderThemeStyleTag: (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {
     styleTagId: string;
     rule: string;
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
index d90ad655765aa..4dbafa7c333ae 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
@@ -80,7 +80,7 @@ describe('FluentProvider (node)', () => {
         dir="ltr"
         class="fui-FluentProvider fui-FluentProvider1 "
       >
-        <style data-fui-theme="" id="fui-FluentProvider1" nonce="random">
+        <style nonce="random" data-fui-theme="" id="fui-FluentProvider1">
           .fui-FluentProvider1 {
             --colorNeutralForeground1: black;
             --colorNeutralBackground1: white;
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts
index 16dcdc51fec76..2b7768da2491e 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts
@@ -13,14 +13,6 @@ export type FluentProviderSlots = {
   root: Slot<'div'>;
 };
 
-export type FluentProviderInternalSlots = {
-  /**
-   * HTMLStyleElement rendered during SSR that contains theme CSS variables
-   * @internal
-   */
-  serverStyle?: Slot<'style'>;
-};
-
 // exported for callers to avoid referencing react-shared-context
 // and applying Partial<> when passing custom style hooks.
 export type FluentProviderCustomStyleHooks = Partial<CustomStyleHooksContextValue>;
@@ -49,13 +41,26 @@ export type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir
   overrides_unstable?: OverridesContextValue;
 };
 
-export type FluentProviderState = ComponentState<FluentProviderSlots & FluentProviderInternalSlots> &
+export type FluentProviderState = ComponentState<FluentProviderSlots> &
   Pick<FluentProviderProps, 'targetDocument'> &
   Required<
     Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>
   > & {
     theme: ThemeContextValue;
     themeClassName: string;
+    /**
+     * Props used to render SSR theme variables style element
+     */
+    serverStyleProps: {
+      /**
+       * CSS rule containing CSS variables
+       */
+      cssRule: string;
+      /**
+       * Configured by the Griffel renderer
+       */
+      rendererAttributes: Record<string, string>;
+    };
   };
 
 export type FluentProviderContextValues = Pick<
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx b/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
index 6d6031ab6b38d..46f99bdcb43a2 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
@@ -9,13 +9,8 @@ import {
   CustomStyleHooksProvider_unstable as CustomStyleHooksProvider,
   CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,
 } from '@fluentui/react-shared-contexts';
-import { getSlots } from '@fluentui/react-utilities';
-import type {
-  FluentProviderInternalSlots,
-  FluentProviderContextValues,
-  FluentProviderState,
-  FluentProviderSlots,
-} from './FluentProvider.types';
+import { canUseDOM, getSlots } from '@fluentui/react-utilities';
+import type { FluentProviderContextValues, FluentProviderState, FluentProviderSlots } from './FluentProvider.types';
 
 /**
  * Render the final JSX of FluentProvider
@@ -24,7 +19,7 @@ export const renderFluentProvider_unstable = (
   state: FluentProviderState,
   contextValues: FluentProviderContextValues,
 ) => {
-  const { slots, slotProps } = getSlots<FluentProviderSlots & FluentProviderInternalSlots>(state);
+  const { slots, slotProps } = getSlots<FluentProviderSlots>(state);
 
   // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable
   // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is
@@ -41,7 +36,15 @@ export const renderFluentProvider_unstable = (
               <TextDirectionProvider dir={contextValues.textDirection}>
                 <OverridesProvider value={contextValues.overrides_unstable}>
                   <slots.root {...slotProps.root}>
-                    {slots.serverStyle && <slots.serverStyle {...slotProps.serverStyle} />}
+                    {!canUseDOM() && (
+                      <style
+                        // Using dangerous HTML because react can escape characters
+                        // which can lead to invalid CSS.
+                        // eslint-disable-next-line react/no-danger
+                        dangerouslySetInnerHTML={{ __html: state.serverStyleProps.cssRule }}
+                        {...state.serverStyleProps.rendererAttributes}
+                      />
+                    )}
                     {slotProps.root.children}
                   </slots.root>
                 </OverridesProvider>
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
index f9f217fec09d4..bdc67a8720f85 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
+++ b/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 { canUseDOM, getNativeElementProps, resolveShorthand, Slot, useMergedRefs } from '@fluentui/react-utilities';
+import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
 import type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';
@@ -86,7 +86,6 @@ export const useFluentProvider_unstable = (
 
     components: {
       root: 'div',
-      serverStyle: 'style',
     },
 
     root: getNativeElementProps('div', {
@@ -95,18 +94,14 @@ export const useFluentProvider_unstable = (
       ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>({ targetDocument })),
     }),
 
-    serverStyle: resolveShorthand<React.HTMLAttributes<HTMLElement> & { 'data-fui-theme'?: '' }>(
-      undefined as undefined | Slot<'style'>,
-      {
-        required: !canUseDOM(),
-        defaultProps: {
-          [FUI_THEME_STYLE_ATTR]: '',
-          id: styleTagId,
-          dangerouslySetInnerHTML: { __html: rule },
-          ...renderer.styleElementAttributes,
-        },
+    serverStyleProps: {
+      cssRule: rule,
+      rendererAttributes: {
+        ...renderer.styleElementAttributes,
+        [FUI_THEME_STYLE_ATTR]: '',
+        id: styleTagId,
       },
-    ),
+    },
   };
 };
 
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
index 267b8e43a2724..d6bbd7964181d 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
@@ -43,7 +43,7 @@ const insertSheet = (tag: HTMLStyleElement, rule: string) => {
 
 /**
  * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
- *
+ * @internal
  * @returns CSS class to apply the rule
  */
 export const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {

From bba6470b50349c3bf62327f78c0c3aa3c8633bc6 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Wed, 22 Mar 2023 14:26:03 +0100
Subject: [PATCH 12/26] update changfile

---
 ...tui-react-provider-51de7ed7-e932-4b2f-aa6b-c871f1b8c016.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/change/@fluentui-react-provider-51de7ed7-e932-4b2f-aa6b-c871f1b8c016.json b/change/@fluentui-react-provider-51de7ed7-e932-4b2f-aa6b-c871f1b8c016.json
index 55b1ebb5819ae..f09e6a7a33ed5 100644
--- a/change/@fluentui-react-provider-51de7ed7-e932-4b2f-aa6b-c871f1b8c016.json
+++ b/change/@fluentui-react-provider-51de7ed7-e932-4b2f-aa6b-c871f1b8c016.json
@@ -1,6 +1,6 @@
 {
   "type": "minor",
-  "comment": "feat: Render theme CSS variables in new SSR style slot",
+  "comment": "feat: Render theme CSS variables in SSR style element",
   "packageName": "@fluentui/react-provider",
   "email": "lingfangao@hotmail.com",
   "dependentChangeType": "patch"

From 41751a0178a33e6155832230c46948b806c68f2f Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 23 Mar 2023 12:03:11 +0100
Subject: [PATCH 13/26] stop using query selector

---
 .../FluentProvider/useFluentProviderThemeStyleTag.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
index d6bbd7964181d..f9fe93c8b47d5 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
@@ -48,7 +48,6 @@ const insertSheet = (tag: HTMLStyleElement, rule: string) => {
  */
 export const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {
   const { targetDocument, theme } = options;
-  useHandleSSRStyleElements(targetDocument);
 
   const renderer = useRenderer_unstable();
   const styleTag = React.useRef<HTMLStyleElement | undefined | null>();
@@ -67,6 +66,7 @@ export const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState
 
   const rule = `.${styleTagId} { ${cssVarsAsString} }`;
 
+  useHandleSSRStyleElements(targetDocument, styleTagId);
   useInsertionEffect(() => {
     // The style element could already have been created during SSR - no need to recreate it
     const ssrStyleElement = targetDocument?.getElementById(styleTagId) as HTMLStyleElement;
@@ -89,7 +89,7 @@ export const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState
   return { styleTagId, rule };
 };
 
-function useHandleSSRStyleElements(targetDocument: Document | undefined | null) {
+function useHandleSSRStyleElements(targetDocument: Document | undefined | null, styleTagId: string) {
   // Using a state factory so that this logic only runs once per render
   // Each FluentProvider can create its own style element during SSR as a slot
   // Moves all theme style elements to document head during render to avoid hydration errors.
@@ -99,9 +99,9 @@ function useHandleSSRStyleElements(targetDocument: Document | undefined | null)
       return;
     }
 
-    const themeStyleElements = targetDocument.body.querySelectorAll(`[${FUI_THEME_STYLE_ATTR}]`);
-    themeStyleElements.forEach(styleElement => {
-      targetDocument.head.append(styleElement);
-    });
+    const themeStyleElement = targetDocument.getElementById(`[${FUI_THEME_STYLE_ATTR}]`);
+    if (themeStyleElement) {
+      targetDocument.head.append(themeStyleElement);
+    }
   });
 }

From d12535aa9cc010cd4bd051175a109b57908d0cf1 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 23 Mar 2023 12:10:06 +0100
Subject: [PATCH 14/26] pass renderer to useFluentpRoviderThemeStyleTag hook

---
 .../FluentProvider/useFluentProvider.ts       |  2 +-
 .../useFluentProviderThemeStyleTag.test.tsx   | 22 ++++++++++++-------
 .../useFluentProviderThemeStyleTag.ts         | 11 +++++-----
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
index bdc67a8720f85..56423f71b79b1 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
@@ -72,7 +72,7 @@ export const useFluentProvider_unstable = (
   }, []);
 
   const renderer = useRenderer_unstable();
-  const { styleTagId, rule } = useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument });
+  const { styleTagId, rule } = useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument, renderer });
   return {
     applyStylesToPortals,
     // eslint-disable-next-line @typescript-eslint/naming-convention
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
index a65ca6182c383..d4d538ccb5567 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
@@ -29,8 +29,9 @@ describe('useFluentProviderThemeStyleTag', () => {
 
   it('should render style tag', () => {
     // Act
+    const renderer = createDOMRenderer(document);
     const { result } = renderHook(() =>
-      useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document }),
+      useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document, renderer }),
     );
 
     // Assert
@@ -39,8 +40,9 @@ describe('useFluentProviderThemeStyleTag', () => {
 
   it('should remove style tag on unmount', () => {
     // Arrange
+    const renderer = createDOMRenderer(document);
     const { result, unmount } = renderHook(() =>
-      useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document }),
+      useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document, renderer }),
     );
 
     // Act
@@ -52,8 +54,9 @@ describe('useFluentProviderThemeStyleTag', () => {
 
   it('should render css variables in theme', () => {
     // Act
+    const renderer = createDOMRenderer(document);
     const { result } = renderHook(() =>
-      useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document }),
+      useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document, renderer }),
     );
 
     // Assert
@@ -68,7 +71,10 @@ describe('useFluentProviderThemeStyleTag', () => {
   it('should update style tag on theme change', () => {
     // Arrange
     let theme = defaultTheme;
-    const { result, rerender } = renderHook(() => useFluentProviderThemeStyleTag({ theme, targetDocument: document }));
+    const renderer = createDOMRenderer(document);
+    const { result, rerender } = renderHook(() =>
+      useFluentProviderThemeStyleTag({ theme, targetDocument: document, renderer }),
+    );
 
     // Act
     theme = { 'css-variable-update': 'xxx' } as unknown as Theme;
@@ -87,9 +93,8 @@ describe('useFluentProviderThemeStyleTag', () => {
       styleElementAttributes: { nonce: 'random' },
     });
 
-    const { result } = renderHook(
-      () => useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document }),
-      { wrapper: props => <RendererProvider renderer={renderer}>{props.children}</RendererProvider> },
+    const { result } = renderHook(() =>
+      useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document, renderer }),
     );
     const tag = document.getElementById(result.current.styleTagId) as HTMLStyleElement;
 
@@ -106,7 +111,8 @@ describe('useFluentProviderThemeStyleTag', () => {
     targetDocument.body.append(ssrStyleElement);
 
     jest.spyOn(targetDocument, 'createElement');
-    renderHook(() => useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument }));
+    const renderer = createDOMRenderer(targetDocument);
+    renderHook(() => useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument, renderer }));
 
     expect(targetDocument.body.querySelector('style')).toBeNull();
     expect(targetDocument.head.querySelectorAll('style').length).toBe(1);
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
index f9fe93c8b47d5..7d0f770ae3353 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
@@ -1,5 +1,5 @@
 import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
-import { useRenderer_unstable } from '@griffel/react';
+import { GriffelRenderer } from '@griffel/react';
 import * as React from 'react';
 import { FUI_THEME_STYLE_ATTR } from '../../constants';
 
@@ -46,10 +46,11 @@ const insertSheet = (tag: HTMLStyleElement, rule: string) => {
  * @internal
  * @returns CSS class to apply the rule
  */
-export const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {
-  const { targetDocument, theme } = options;
+export const useFluentProviderThemeStyleTag = (
+  options: Pick<FluentProviderState, 'theme' | 'targetDocument'> & { renderer: GriffelRenderer },
+) => {
+  const { targetDocument, theme, renderer } = options;
 
-  const renderer = useRenderer_unstable();
   const styleTag = React.useRef<HTMLStyleElement | undefined | null>();
 
   const styleTagId = useId(fluentProviderClassNames.root);
@@ -99,7 +100,7 @@ function useHandleSSRStyleElements(targetDocument: Document | undefined | null,
       return;
     }
 
-    const themeStyleElement = targetDocument.getElementById(`[${FUI_THEME_STYLE_ATTR}]`);
+    const themeStyleElement = targetDocument.getElementById(styleTagId);
     if (themeStyleElement) {
       targetDocument.head.append(themeStyleElement);
     }

From 53f6ad00d43945f16cab7309aef5fb64682ac26f Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 23 Mar 2023 12:11:33 +0100
Subject: [PATCH 15/26] rename rendererAttributes to attributes

---
 .../src/components/FluentProvider/FluentProvider.types.ts     | 4 ++--
 .../src/components/FluentProvider/renderFluentProvider.tsx    | 2 +-
 .../src/components/FluentProvider/useFluentProvider.ts        | 2 +-
 .../FluentProvider/useFluentProviderThemeStyleTag.test.tsx    | 3 +--
 4 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts
index 2b7768da2491e..462d4293f76a8 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts
@@ -57,9 +57,9 @@ export type FluentProviderState = ComponentState<FluentProviderSlots> &
        */
       cssRule: string;
       /**
-       * Configured by the Griffel renderer
+       * Additional attributes applied to the style element
        */
-      rendererAttributes: Record<string, string>;
+      attributes: Record<string, string>;
     };
   };
 
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx b/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
index 46f99bdcb43a2..dd61f081d1592 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
@@ -42,7 +42,7 @@ export const renderFluentProvider_unstable = (
                         // which can lead to invalid CSS.
                         // eslint-disable-next-line react/no-danger
                         dangerouslySetInnerHTML={{ __html: state.serverStyleProps.cssRule }}
-                        {...state.serverStyleProps.rendererAttributes}
+                        {...state.serverStyleProps.attributes}
                       />
                     )}
                     {slotProps.root.children}
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
index 56423f71b79b1..5007907aa8553 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
@@ -96,7 +96,7 @@ export const useFluentProvider_unstable = (
 
     serverStyleProps: {
       cssRule: rule,
-      rendererAttributes: {
+      attributes: {
         ...renderer.styleElementAttributes,
         [FUI_THEME_STYLE_ATTR]: '',
         id: styleTagId,
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
index d4d538ccb5567..1c369c2278966 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
@@ -1,8 +1,7 @@
-import { createDOMRenderer, RendererProvider } from '@griffel/react';
+import { createDOMRenderer } from '@griffel/react';
 import type { Theme } from '@fluentui/react-theme';
 import { resetIdsForTests } from '@fluentui/react-utilities';
 import { renderHook } from '@testing-library/react-hooks';
-import * as React from 'react';
 
 import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
 import { FUI_THEME_STYLE_ATTR } from '../../constants';

From be477702f49f7e3920b7d42dc5892a87bfbb5816 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 23 Mar 2023 12:12:46 +0100
Subject: [PATCH 16/26] simplify logic

---
 .../useFluentProviderThemeStyleTag.ts         | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
index 7d0f770ae3353..366663ac6a0c0 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
@@ -70,21 +70,19 @@ export const useFluentProviderThemeStyleTag = (
   useHandleSSRStyleElements(targetDocument, styleTagId);
   useInsertionEffect(() => {
     // The style element could already have been created during SSR - no need to recreate it
-    const ssrStyleElement = targetDocument?.getElementById(styleTagId) as HTMLStyleElement;
+    const ssrStyleElement = targetDocument?.getElementById(styleTagId);
     if (ssrStyleElement) {
-      styleTag.current = ssrStyleElement;
-      return () => styleTag.current?.remove();
+      styleTag.current = ssrStyleElement as HTMLStyleElement;
+    } else {
+      styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });
+      if (styleTag.current) {
+        insertSheet(styleTag.current, rule);
+      }
     }
 
-    styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });
-
-    if (styleTag.current) {
-      insertSheet(styleTag.current, rule);
-
-      return () => {
-        styleTag.current?.remove();
-      };
-    }
+    return () => {
+      styleTag.current?.remove();
+    };
   }, [styleTagId, targetDocument, rule, styleElementAttributes]);
 
   return { styleTagId, rule };

From a38edf82a329f48d888c67fda7ff4396277fbbb1 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 23 Mar 2023 12:14:19 +0100
Subject: [PATCH 17/26] remove data attribute

---
 .../components/FluentProvider/FluentProvider-node.test.tsx  | 6 +++---
 .../src/components/FluentProvider/useFluentProvider.ts      | 2 --
 .../FluentProvider/useFluentProviderThemeStyleTag.test.tsx  | 2 --
 .../FluentProvider/useFluentProviderThemeStyleTag.ts        | 2 --
 packages/react-components/react-provider/src/constants.ts   | 1 -
 5 files changed, 3 insertions(+), 10 deletions(-)
 delete mode 100644 packages/react-components/react-provider/src/constants.ts

diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
index 4dbafa7c333ae..60f1a5ad5322f 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
@@ -33,7 +33,7 @@ describe('FluentProvider (node)', () => {
         dir="ltr"
         class="fui-FluentProvider fui-FluentProvider1 "
       >
-        <style data-fui-theme="" id="fui-FluentProvider1">
+        <style id="fui-FluentProvider1">
           .fui-FluentProvider1 {
             --colorNeutralForeground1: black;
             --colorNeutralBackground1: white;
@@ -51,7 +51,7 @@ describe('FluentProvider (node)', () => {
         dir="ltr"
         class="fui-FluentProvider fui-FluentProvider1 "
       >
-        <style data-fui-theme="" id="fui-FluentProvider1">
+        <style id="fui-FluentProvider1">
           .fui-FluentProvider1 {
             --colorNeutralForeground1: black;
             --colorNeutralBackground1: white;
@@ -80,7 +80,7 @@ describe('FluentProvider (node)', () => {
         dir="ltr"
         class="fui-FluentProvider fui-FluentProvider1 "
       >
-        <style nonce="random" data-fui-theme="" id="fui-FluentProvider1">
+        <style nonce="random" id="fui-FluentProvider1">
           .fui-FluentProvider1 {
             --colorNeutralForeground1: black;
             --colorNeutralBackground1: white;
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
index 5007907aa8553..909300f7da60f 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
@@ -15,7 +15,6 @@ import * as React from 'react';
 import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
 import type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';
 import { useRenderer_unstable } from '@griffel/react';
-import { FUI_THEME_STYLE_ATTR } from '../../constants';
 
 /**
  * Create the state required to render FluentProvider.
@@ -98,7 +97,6 @@ export const useFluentProvider_unstable = (
       cssRule: rule,
       attributes: {
         ...renderer.styleElementAttributes,
-        [FUI_THEME_STYLE_ATTR]: '',
         id: styleTagId,
       },
     },
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
index 1c369c2278966..71d4fc5bc9454 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
@@ -4,7 +4,6 @@ import { resetIdsForTests } from '@fluentui/react-utilities';
 import { renderHook } from '@testing-library/react-hooks';
 
 import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
-import { FUI_THEME_STYLE_ATTR } from '../../constants';
 
 jest.mock('@fluentui/react-theme');
 const createDocumentMock = (): Document => {
@@ -104,7 +103,6 @@ describe('useFluentProviderThemeStyleTag', () => {
   it('should move style tags in body to head on first render', () => {
     const targetDocument = createDocumentMock();
     const ssrStyleElement = targetDocument.createElement('style');
-    ssrStyleElement.setAttribute(FUI_THEME_STYLE_ATTR, '');
     // Kinda hacky - assume the useId call returns as expected (ids are reset after each test)
     ssrStyleElement.setAttribute('id', 'fui-FluentProvider1');
     targetDocument.body.append(ssrStyleElement);
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
index 366663ac6a0c0..ffd10e4c2518a 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
@@ -1,7 +1,6 @@
 import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 import { GriffelRenderer } from '@griffel/react';
 import * as React from 'react';
-import { FUI_THEME_STYLE_ATTR } from '../../constants';
 
 import type { FluentProviderState } from './FluentProvider.types';
 import { fluentProviderClassNames } from './useFluentProviderStyles';
@@ -18,7 +17,6 @@ const createStyleTag = (target: Document | undefined, elementAttributes: Record<
 
   const tag = target.createElement('style');
 
-  elementAttributes[FUI_THEME_STYLE_ATTR] = '';
   Object.keys(elementAttributes).forEach(attrName => {
     tag.setAttribute(attrName, elementAttributes[attrName]);
   });
diff --git a/packages/react-components/react-provider/src/constants.ts b/packages/react-components/react-provider/src/constants.ts
deleted file mode 100644
index 940b75082bcf0..0000000000000
--- a/packages/react-components/react-provider/src/constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const FUI_THEME_STYLE_ATTR = 'data-fui-theme';

From 4bfde2d74efbd4ead5169881a12d3e157c08e15f Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 23 Mar 2023 12:15:04 +0100
Subject: [PATCH 18/26] use PartialTheme type

---
 .../src/components/FluentProvider/FluentProvider-node.test.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
index 60f1a5ad5322f..ecabea804ed82 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
@@ -11,13 +11,14 @@ import { FluentProvider } from './FluentProvider';
 import * as prettier from 'prettier';
 import { createDOMRenderer } from '@griffel/core';
 import { RendererProvider } from '@griffel/react';
+import { PartialTheme } from '@fluentui/react-theme';
 
 const parseHTMLString = (html: string) => {
   return prettier.format(html, { parser: 'html' });
 };
 
 describe('FluentProvider (node)', () => {
-  const testTheme = {
+  const testTheme: PartialTheme = {
     colorNeutralForeground1: 'black',
     colorNeutralBackground1: 'white',
   };

From c184f6c9ca6cf755a71bb67b24ae5fa4efde405f Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 23 Mar 2023 12:16:30 +0100
Subject: [PATCH 19/26] remove SSRPRovider from tests

---
 .../FluentProvider-node.test.tsx              | 25 +++----------------
 1 file changed, 4 insertions(+), 21 deletions(-)

diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
index ecabea804ed82..8a1d213bce03a 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
@@ -6,7 +6,7 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/server';
-import { SSRProvider } from '@fluentui/react-utilities';
+import { resetIdsForTests, SSRProvider } from '@fluentui/react-utilities';
 import { FluentProvider } from './FluentProvider';
 import * as prettier from 'prettier';
 import { createDOMRenderer } from '@griffel/core';
@@ -22,29 +22,12 @@ describe('FluentProvider (node)', () => {
     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">
-          .fui-FluentProvider1 {
-            --colorNeutralForeground1: black;
-            --colorNeutralBackground1: white;
-          }
-        </style>
-      </div>"
-    `);
+  afterEach(() => {
+    resetIdsForTests();
   });
 
-  it('should not render CSS variables as inline style when not wrapped with SSRPRovider', () => {
+  it('should render CSS variables as inline style', () => {
     const html = ReactDOM.renderToStaticMarkup(<FluentProvider theme={testTheme} />);
 
     expect(parseHTMLString(html)).toMatchInlineSnapshot(`

From 8ee281aeab66648d3ff7908f9dec5073025d2e58 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 23 Mar 2023 12:16:51 +0100
Subject: [PATCH 20/26] remove cruft

---
 .../src/components/FluentProvider/FluentProvider.test.tsx    | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
index ac6144b2474a6..edf895890f0d7 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
@@ -1,4 +1,4 @@
-import { resetIdsForTests, SSRProvider } from '@fluentui/react-utilities';
+import { resetIdsForTests } from '@fluentui/react-utilities';
 import { render } from '@testing-library/react';
 import * as React from 'react';
 import * as reactTestRenderer from 'react-test-renderer';
@@ -18,9 +18,6 @@ describe('FluentProvider', () => {
   isConformant({
     disabledTests: ['component-handles-classname'],
     Component: FluentProvider,
-    renderOptions: {
-      wrapper: SSRProvider,
-    },
     displayName: 'FluentProvider',
   });
 

From cc056f7ec4c0fcd3c535fc6cf1f431e5e60ca4b4 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 23 Mar 2023 12:17:32 +0100
Subject: [PATCH 21/26] use ternary render

---
 .../src/components/FluentProvider/renderFluentProvider.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx b/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
index dd61f081d1592..9276aab3c6f29 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
@@ -36,7 +36,7 @@ export const renderFluentProvider_unstable = (
               <TextDirectionProvider dir={contextValues.textDirection}>
                 <OverridesProvider value={contextValues.overrides_unstable}>
                   <slots.root {...slotProps.root}>
-                    {!canUseDOM() && (
+                    {canUseDOM() ? null : (
                       <style
                         // Using dangerous HTML because react can escape characters
                         // which can lead to invalid CSS.

From a110b5cd00dceffd21383ec18bd675e1686dfb15 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 23 Mar 2023 13:30:10 +0100
Subject: [PATCH 22/26] update md

---
 .../react-provider/etc/react-provider.api.md               | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/react-provider/etc/react-provider.api.md b/packages/react-components/react-provider/etc/react-provider.api.md
index b3d9e7cc5eba5..c9141019144ef 100644
--- a/packages/react-components/react-provider/etc/react-provider.api.md
+++ b/packages/react-components/react-provider/etc/react-provider.api.md
@@ -7,6 +7,7 @@
 import { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { CustomStyleHooksContextValue_unstable } from '@fluentui/react-shared-contexts';
+import { GriffelRenderer } from '@griffel/react';
 import { OverridesContextValue_unstable } from '@fluentui/react-shared-contexts';
 import type { PartialTheme } from '@fluentui/react-theme';
 import type { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
@@ -63,7 +64,7 @@ export type FluentProviderState = ComponentState<FluentProviderSlots> & Pick<Flu
     themeClassName: string;
     serverStyleProps: {
         cssRule: string;
-        rendererAttributes: Record<string, string>;
+        attributes: Record<string, string>;
     };
 };
 
@@ -80,7 +81,9 @@ export function useFluentProviderContextValues_unstable(state: FluentProviderSta
 export const useFluentProviderStyles_unstable: (state: FluentProviderState) => FluentProviderState;
 
 // @internal
-export const useFluentProviderThemeStyleTag: (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {
+export const useFluentProviderThemeStyleTag: (options: Pick<FluentProviderState, 'theme' | 'targetDocument'> & {
+    renderer: GriffelRenderer;
+}) => {
     styleTagId: string;
     rule: string;
 };

From db16298f002649a47534fc0d0062936e1dad4147 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 23 Mar 2023 13:59:47 +0100
Subject: [PATCH 23/26] only pass attributes

---
 .../src/components/FluentProvider/useFluentProvider.ts      | 6 +++++-
 .../FluentProvider/useFluentProviderThemeStyleTag.ts        | 6 +++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
index 909300f7da60f..d1ef14183c685 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
@@ -71,7 +71,11 @@ export const useFluentProvider_unstable = (
   }, []);
 
   const renderer = useRenderer_unstable();
-  const { styleTagId, rule } = useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument, renderer });
+  const { styleTagId, rule } = useFluentProviderThemeStyleTag({
+    theme: mergedTheme,
+    targetDocument,
+    rendererAttributes: renderer.styleElementAttributes ?? {},
+  });
   return {
     applyStylesToPortals,
     // eslint-disable-next-line @typescript-eslint/naming-convention
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
index ffd10e4c2518a..8b5a864de0c6d 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
@@ -45,14 +45,14 @@ const insertSheet = (tag: HTMLStyleElement, rule: string) => {
  * @returns CSS class to apply the rule
  */
 export const useFluentProviderThemeStyleTag = (
-  options: Pick<FluentProviderState, 'theme' | 'targetDocument'> & { renderer: GriffelRenderer },
+  options: Pick<FluentProviderState, 'theme' | 'targetDocument'> & { rendererAttributes: Record<string, string> },
 ) => {
-  const { targetDocument, theme, renderer } = options;
+  const { targetDocument, theme, rendererAttributes } = options;
 
   const styleTag = React.useRef<HTMLStyleElement | undefined | null>();
 
   const styleTagId = useId(fluentProviderClassNames.root);
-  const styleElementAttributes = renderer.styleElementAttributes;
+  const styleElementAttributes = rendererAttributes;
 
   const cssVarsAsString = React.useMemo(() => {
     return theme

From 094b7f754955633260330a8247349f04dc59b7e5 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 23 Mar 2023 14:00:19 +0100
Subject: [PATCH 24/26] remove ssr provider

---
 .../FluentProvider/FluentProvider-node.test.tsx        | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
index 8a1d213bce03a..178716721acbd 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
@@ -6,7 +6,7 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/server';
-import { resetIdsForTests, SSRProvider } from '@fluentui/react-utilities';
+import { resetIdsForTests } from '@fluentui/react-utilities';
 import { FluentProvider } from './FluentProvider';
 import * as prettier from 'prettier';
 import { createDOMRenderer } from '@griffel/core';
@@ -52,11 +52,9 @@ describe('FluentProvider (node)', () => {
     });
 
     const html = ReactDOM.renderToStaticMarkup(
-      <SSRProvider>
-        <RendererProvider renderer={renderer}>
-          <FluentProvider theme={testTheme} />
-        </RendererProvider>
-      </SSRProvider>,
+      <RendererProvider renderer={renderer}>
+        <FluentProvider theme={testTheme} />
+      </RendererProvider>,
     );
 
     expect(parseHTMLString(html)).toMatchInlineSnapshot(`

From 6c04a92cf07bb9f7ed72dac5cb8070d43633ae91 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 23 Mar 2023 14:19:17 +0100
Subject: [PATCH 25/26] fix tests

---
 .../useFluentProviderThemeStyleTag.test.tsx   | 30 +++++++++----------
 .../useFluentProviderThemeStyleTag.ts         |  1 -
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
index 71d4fc5bc9454..4f59835acae0a 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
@@ -1,4 +1,3 @@
-import { createDOMRenderer } from '@griffel/react';
 import type { Theme } from '@fluentui/react-theme';
 import { resetIdsForTests } from '@fluentui/react-utilities';
 import { renderHook } from '@testing-library/react-hooks';
@@ -27,9 +26,12 @@ describe('useFluentProviderThemeStyleTag', () => {
 
   it('should render style tag', () => {
     // Act
-    const renderer = createDOMRenderer(document);
     const { result } = renderHook(() =>
-      useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document, renderer }),
+      useFluentProviderThemeStyleTag({
+        theme: defaultTheme,
+        targetDocument: document,
+        rendererAttributes: {},
+      }),
     );
 
     // Assert
@@ -38,9 +40,8 @@ describe('useFluentProviderThemeStyleTag', () => {
 
   it('should remove style tag on unmount', () => {
     // Arrange
-    const renderer = createDOMRenderer(document);
     const { result, unmount } = renderHook(() =>
-      useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document, renderer }),
+      useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document, rendererAttributes: {} }),
     );
 
     // Act
@@ -52,9 +53,8 @@ describe('useFluentProviderThemeStyleTag', () => {
 
   it('should render css variables in theme', () => {
     // Act
-    const renderer = createDOMRenderer(document);
     const { result } = renderHook(() =>
-      useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document, renderer }),
+      useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document, rendererAttributes: {} }),
     );
 
     // Assert
@@ -69,9 +69,8 @@ describe('useFluentProviderThemeStyleTag', () => {
   it('should update style tag on theme change', () => {
     // Arrange
     let theme = defaultTheme;
-    const renderer = createDOMRenderer(document);
     const { result, rerender } = renderHook(() =>
-      useFluentProviderThemeStyleTag({ theme, targetDocument: document, renderer }),
+      useFluentProviderThemeStyleTag({ theme, targetDocument: document, rendererAttributes: {} }),
     );
 
     // Act
@@ -87,12 +86,12 @@ describe('useFluentProviderThemeStyleTag', () => {
   });
 
   it('should update style tag on theme change', () => {
-    const renderer = createDOMRenderer(document, {
-      styleElementAttributes: { nonce: 'random' },
-    });
-
     const { result } = renderHook(() =>
-      useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document, renderer }),
+      useFluentProviderThemeStyleTag({
+        theme: defaultTheme,
+        targetDocument: document,
+        rendererAttributes: { nonce: 'random' },
+      }),
     );
     const tag = document.getElementById(result.current.styleTagId) as HTMLStyleElement;
 
@@ -108,8 +107,7 @@ describe('useFluentProviderThemeStyleTag', () => {
     targetDocument.body.append(ssrStyleElement);
 
     jest.spyOn(targetDocument, 'createElement');
-    const renderer = createDOMRenderer(targetDocument);
-    renderHook(() => useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument, renderer }));
+    renderHook(() => useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument, rendererAttributes: {} }));
 
     expect(targetDocument.body.querySelector('style')).toBeNull();
     expect(targetDocument.head.querySelectorAll('style').length).toBe(1);
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
index 8b5a864de0c6d..4145979442488 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
@@ -1,5 +1,4 @@
 import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
-import { GriffelRenderer } from '@griffel/react';
 import * as React from 'react';
 
 import type { FluentProviderState } from './FluentProvider.types';

From 3b7afda7508d4520f860fd53e628a38cce9ffc76 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 23 Mar 2023 14:27:55 +0100
Subject: [PATCH 26/26] update md

---
 .../react-components/react-provider/etc/react-provider.api.md  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react-components/react-provider/etc/react-provider.api.md b/packages/react-components/react-provider/etc/react-provider.api.md
index c9141019144ef..af4ee0d9cbc89 100644
--- a/packages/react-components/react-provider/etc/react-provider.api.md
+++ b/packages/react-components/react-provider/etc/react-provider.api.md
@@ -7,7 +7,6 @@
 import { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { CustomStyleHooksContextValue_unstable } from '@fluentui/react-shared-contexts';
-import { GriffelRenderer } from '@griffel/react';
 import { OverridesContextValue_unstable } from '@fluentui/react-shared-contexts';
 import type { PartialTheme } from '@fluentui/react-theme';
 import type { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
@@ -82,7 +81,7 @@ export const useFluentProviderStyles_unstable: (state: FluentProviderState) => F
 
 // @internal
 export const useFluentProviderThemeStyleTag: (options: Pick<FluentProviderState, 'theme' | 'targetDocument'> & {
-    renderer: GriffelRenderer;
+    rendererAttributes: Record<string, string>;
 }) => {
     styleTagId: string;
     rule: string;