diff --git a/packages/fluentui/docs/package.json b/packages/fluentui/docs/package.json
index 78c58d3c241122..3c441ecd2af456 100644
--- a/packages/fluentui/docs/package.json
+++ b/packages/fluentui/docs/package.json
@@ -16,7 +16,6 @@
     "@fluentui/react-northstar": "*",
     "@fluentui/react-northstar-fela-renderer": "*",
     "@fluentui/react-northstar-prototypes": "*",
-    "@fluentui/react-northstar-styles-renderer": "*",
     "@fluentui/styles": "*",
     "@hot-loader/react-dom": "17.0.2",
     "@mdx-js/react": "^2.3.0",
diff --git a/packages/fluentui/docs/src/components/VariableResolver/useEnhancedRenderer.ts b/packages/fluentui/docs/src/components/VariableResolver/useEnhancedRenderer.ts
index c4a3e47394213d..6675aafb0d61df 100644
--- a/packages/fluentui/docs/src/components/VariableResolver/useEnhancedRenderer.ts
+++ b/packages/fluentui/docs/src/components/VariableResolver/useEnhancedRenderer.ts
@@ -1,5 +1,5 @@
 import { ProviderContextPrepared } from '@fluentui/react-northstar';
-import { Renderer } from '@fluentui/react-northstar-styles-renderer';
+import { Renderer } from '@fluentui/react-northstar-fela-renderer';
 import { callable } from '@fluentui/styles';
 import * as _ from 'lodash';
 import * as React from 'react';
@@ -12,7 +12,7 @@ const useEnhancedRenderer = (
 ): [ProviderContextPrepared, React.RefObject<UsedVariables>] => {
   const resolvedVariables = React.useRef<UsedVariables>({});
   const renderRule: Renderer['renderRule'] = React.useCallback(
-    (styles, rendererParam) => {
+    (styles, rendererParam, changes) => {
       const componentName: string = rendererParam.displayName;
       const componentVariables = callable(context.theme.componentVariables[rendererParam.displayName])(
         context.theme.siteVariables,
@@ -26,7 +26,7 @@ const useEnhancedRenderer = (
         }
       });
 
-      return context.renderer.renderRule(styles, rendererParam);
+      return context.renderer.renderRule(styles, rendererParam, changes);
     },
     [context],
   );
diff --git a/packages/fluentui/docs/tsconfig.json b/packages/fluentui/docs/tsconfig.json
index d67172184b535f..c40ca91eec186f 100644
--- a/packages/fluentui/docs/tsconfig.json
+++ b/packages/fluentui/docs/tsconfig.json
@@ -26,7 +26,6 @@
       "@fluentui/react-icons-northstar": ["packages/fluentui/react-icons-northstar/src/index.ts"],
       "@fluentui/react-northstar": ["packages/fluentui/react-northstar/src/index.ts"],
       "@fluentui/react-northstar-fela-renderer": ["packages/fluentui/react-northstar-fela-renderer/src/index.ts"],
-      "@fluentui/react-northstar-styles-renderer": ["packages/fluentui/react-northstar-styles-renderer/src/index.ts"],
       "@fluentui/react-northstar-prototypes": ["packages/fluentui/react-northstar-prototypes/src/index.ts"],
       "@fluentui/react-proptypes": ["packages/fluentui/react-proptypes/src/index.ts"],
       "@fluentui/styles": ["packages/fluentui/styles/src/index.ts"]
diff --git a/packages/fluentui/e2e/tsconfig.e2e.json b/packages/fluentui/e2e/tsconfig.e2e.json
index 92ed7e58069407..f944b4254c2717 100644
--- a/packages/fluentui/e2e/tsconfig.e2e.json
+++ b/packages/fluentui/e2e/tsconfig.e2e.json
@@ -21,7 +21,6 @@
       "@fluentui/react-icons-northstar": ["packages/fluentui/react-icons-northstar/src/index.ts"],
       "@fluentui/react-northstar": ["packages/fluentui/react-northstar/src/index.ts"],
       "@fluentui/react-northstar-fela-renderer": ["packages/fluentui/react-northstar-fela-renderer/src/index.ts"],
-      "@fluentui/react-northstar-styles-renderer": ["packages/fluentui/react-northstar-styles-renderer/src/index.ts"],
       "@fluentui/react-northstar-prototypes": ["packages/fluentui/react-northstar-prototypes/src/index.ts"],
       "@fluentui/react-proptypes": ["packages/fluentui/react-proptypes/src/index.ts"],
       "@fluentui/styles": ["packages/fluentui/styles/src/index.ts"]
diff --git a/packages/fluentui/react-bindings/package.json b/packages/fluentui/react-bindings/package.json
index 6e10fdccc900fc..eee50f03e94254 100644
--- a/packages/fluentui/react-bindings/package.json
+++ b/packages/fluentui/react-bindings/package.json
@@ -11,7 +11,6 @@
     "@fluentui/react-component-event-listener": "^0.68.0",
     "@fluentui/react-component-ref": "^0.68.0",
     "@fluentui/react-northstar-fela-renderer": "^0.68.0",
-    "@fluentui/react-northstar-styles-renderer": "^0.68.0",
     "@fluentui/styles": "^0.68.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.15",
diff --git a/packages/fluentui/react-bindings/src/context.ts b/packages/fluentui/react-bindings/src/context.ts
index 107e76336f5210..0b98979f3a2b80 100644
--- a/packages/fluentui/react-bindings/src/context.ts
+++ b/packages/fluentui/react-bindings/src/context.ts
@@ -1,4 +1,4 @@
-import { noopRenderer, Renderer } from '@fluentui/react-northstar-styles-renderer';
+import { noopRenderer, Renderer } from '@fluentui/react-northstar-fela-renderer';
 import { emptyTheme, ThemeInput, ThemePrepared } from '@fluentui/styles';
 import * as React from 'react';
 
diff --git a/packages/fluentui/react-bindings/src/hooks/useStyles.ts b/packages/fluentui/react-bindings/src/hooks/useStyles.ts
index 02d5573ab568ce..a20eabd49322be 100644
--- a/packages/fluentui/react-bindings/src/hooks/useStyles.ts
+++ b/packages/fluentui/react-bindings/src/hooks/useStyles.ts
@@ -88,7 +88,11 @@ export const useStyles = <StyleProps extends PrimitiveProps>(
     {},
   );
 
-  const { classes, styles: resolvedStyles } = getStyles({
+  const {
+    classes,
+    styles: resolvedStyles,
+    changes,
+  } = getStyles({
     // Input values
     allDisplayNames: composeOptions?.displayNames || [displayName],
     className: composeOptions?.className || className,
@@ -108,5 +112,10 @@ export const useStyles = <StyleProps extends PrimitiveProps>(
     performance: context.performance,
   });
 
+  React.useLayoutEffect(() => {
+    console.log('changes', changes);
+    context.renderer.insertChanges(changes);
+  }, [changes]);
+
   return { classes, styles: resolvedStyles };
 };
diff --git a/packages/fluentui/react-bindings/src/renderer/RendererContext.ts b/packages/fluentui/react-bindings/src/renderer/RendererContext.ts
index 04dd6c4083f84f..9e9fa33c2e651b 100644
--- a/packages/fluentui/react-bindings/src/renderer/RendererContext.ts
+++ b/packages/fluentui/react-bindings/src/renderer/RendererContext.ts
@@ -1,5 +1,4 @@
-import { createFelaRenderer } from '@fluentui/react-northstar-fela-renderer';
-import { CreateRenderer } from '@fluentui/react-northstar-styles-renderer';
+import { createFelaRenderer, type CreateRenderer } from '@fluentui/react-northstar-fela-renderer';
 import * as React from 'react';
 
 export const RendererContext = React.createContext<CreateRenderer>(createFelaRenderer());
diff --git a/packages/fluentui/react-bindings/src/styles/getStyles.ts b/packages/fluentui/react-bindings/src/styles/getStyles.ts
index ba5ed321cffa93..f447552b655eb0 100644
--- a/packages/fluentui/react-bindings/src/styles/getStyles.ts
+++ b/packages/fluentui/react-bindings/src/styles/getStyles.ts
@@ -8,6 +8,7 @@ import { resolveStyles } from './resolveStyles';
 
 export type GetStylesResult = {
   classes: ComponentSlotClasses;
+  changes: any[];
   variables: ComponentVariablesObject;
   styles: ComponentSlotStylesResolved;
   theme: ProviderContextPrepared['theme'];
@@ -28,7 +29,7 @@ export const getStyles = (options: ResolveStylesOptions): GetStylesResult => {
     options.performance.enableVariablesCaching,
   );
 
-  const { classes, resolvedStyles, resolvedStylesDebug } = resolveStyles(options, resolvedVariables);
+  const { classes, resolvedStyles, resolvedStylesDebug, changes } = resolveStyles(options, resolvedVariables);
 
   // conditionally add sources for evaluating debug information to component
   if (process.env.NODE_ENV !== 'production' && isDebugEnabled) {
@@ -53,6 +54,7 @@ export const getStyles = (options: ResolveStylesOptions): GetStylesResult => {
 
   return {
     classes,
+    changes,
     variables: resolvedVariables,
     styles: resolvedStyles,
     theme: options.theme,
diff --git a/packages/fluentui/react-bindings/src/styles/resolveStyles.ts b/packages/fluentui/react-bindings/src/styles/resolveStyles.ts
index edf80e0b8b0a1f..c69d0e1f45a823 100644
--- a/packages/fluentui/react-bindings/src/styles/resolveStyles.ts
+++ b/packages/fluentui/react-bindings/src/styles/resolveStyles.ts
@@ -1,4 +1,4 @@
-import { RendererParam } from '@fluentui/react-northstar-styles-renderer';
+import { RendererParam } from '@fluentui/react-northstar-fela-renderer';
 import {
   ComponentSlotStylesInput,
   ComponentSlotStylesPrepared,
@@ -20,6 +20,7 @@ export type ResolveStylesResult = {
   resolvedStyles: ComponentSlotStylesResolved;
   resolvedStylesDebug: Record<string, { styles: Object }[]>;
   classes: ComponentSlotClasses;
+  changes: any[];
 };
 
 // this weak map is used as cache for the classes
@@ -56,6 +57,7 @@ export const resolveStyles = (
     performance: performanceFlags,
   } = options;
 
+  const changes = [];
   const { className, design, styles, variables } = inlineStylesProps;
   const noInlineStylesOverrides = !(design || styles);
 
@@ -152,137 +154,6 @@ export const resolveStyles = (
       }`
     : '';
 
-  if (typeof Proxy === 'undefined') {
-    //
-    //
-    // IE11 branch of code, feel free to remove later.
-    // Keep it sync with another branch below!
-    //
-    //
-
-    const resolvedStyles: Record<string, ICSSInJSStyle> = {};
-    const classes: Record<string, string> = {};
-
-    Object.keys(mergedStyles).forEach(slotName => {
-      // resolve/render slot styles once and cache
-      const lazyEvaluationKey = `${slotName}__return`;
-      const slotCacheKey = componentCacheKey + slotName;
-
-      Object.defineProperty(resolvedStyles, slotName, {
-        enumerable: false,
-        configurable: false,
-        set(val: ICSSInJSStyle) {
-          // Add to the cache if it's enabled
-          if (cacheEnabled && theme) {
-            stylesCache.set(theme, {
-              ...stylesCache.get(theme),
-              [slotCacheKey]: val,
-            });
-          }
-
-          resolvedStyles[lazyEvaluationKey] = val;
-        },
-        get(): ICSSInJSStyle {
-          // If caching enabled and entry exists, get from cache, avoid lazy evaluation
-          if (cacheEnabled && theme) {
-            const stylesThemeCache = stylesCache.get(theme) || {};
-            if (stylesThemeCache[slotCacheKey]) {
-              return stylesThemeCache[slotCacheKey];
-            }
-          }
-
-          if (resolvedStyles[lazyEvaluationKey]) {
-            return resolvedStyles[lazyEvaluationKey];
-          }
-
-          // resolve/render slot styles once and cache
-          resolvedStyles[lazyEvaluationKey] = mergedStyles[slotName](styleParam);
-
-          if (cacheEnabled && theme) {
-            stylesCache.set(theme, {
-              ...stylesCache.get(theme),
-              [slotCacheKey]: resolvedStyles[lazyEvaluationKey],
-            });
-          }
-
-          if (process.env.NODE_ENV !== 'production' && isDebugEnabled) {
-            resolvedStylesDebug[slotName] = (resolvedStyles[slotName] as any)?.['_debug'];
-            delete (resolvedStyles[slotName] as any)?.['_debug'];
-          }
-
-          return resolvedStyles[lazyEvaluationKey];
-        },
-      });
-
-      Object.defineProperty(classes, slotName, {
-        enumerable: false,
-        configurable: false,
-        set(val: string) {
-          if (cacheEnabled && theme) {
-            classesCache.set(theme, {
-              ...classesCache.get(theme),
-              [slotCacheKey]: val,
-            });
-          }
-
-          classes[lazyEvaluationKey] = val;
-        },
-        get(): string {
-          if (cacheEnabled && theme) {
-            const classesThemeCache = classesCache.get(theme) || {};
-
-            //
-            // Cached styles
-            //
-
-            if (classesThemeCache[slotCacheKey] || classesThemeCache[slotCacheKey] === '') {
-              return slotName === 'root'
-                ? cx(componentClassName, classesThemeCache[slotCacheKey], className)
-                : classesThemeCache[slotCacheKey];
-            }
-          }
-
-          //
-          // Lazy eval
-          //
-
-          if (classes[lazyEvaluationKey]) {
-            return slotName === 'root'
-              ? cx(componentClassName, classes[lazyEvaluationKey], className)
-              : classes[lazyEvaluationKey];
-          }
-
-          // this resolves the getter magic
-          const styleObj = resolvedStyles[slotName];
-
-          if (styleObj) {
-            classes[lazyEvaluationKey] = renderer.renderRule(styleObj, rendererParam);
-
-            if (cacheEnabled && theme) {
-              classesCache.set(theme, {
-                ...classesCache.get(theme),
-                [slotCacheKey]: classes[lazyEvaluationKey],
-              });
-            }
-          }
-
-          const resultClassName =
-            slotName === 'root'
-              ? cx(componentClassName, classes[lazyEvaluationKey], className)
-              : classes[lazyEvaluationKey];
-
-          return resultClassName;
-        },
-      });
-    });
-
-    return {
-      resolvedStyles,
-      resolvedStylesDebug,
-      classes,
-    };
-  }
-
   const resolvedStyles = new Proxy<Record<string, ICSSInJSStyle>>(
     {},
     {
@@ -352,7 +223,7 @@ export const resolveStyles = (
         const styleObj = resolvedStyles[slotName];
 
         if (styleObj) {
-          target[slotName] = renderer.renderRule(styleObj, rendererParam);
+          target[slotName] = renderer.renderRule(styleObj, rendererParam, changes);
 
           if (cacheEnabled && theme) {
             classesCache.set(theme, {
@@ -374,5 +245,6 @@ export const resolveStyles = (
     resolvedStyles,
     resolvedStylesDebug,
     classes,
+    changes,
   };
 };
diff --git a/packages/fluentui/react-bindings/test/compose/useCompose-test.tsx b/packages/fluentui/react-bindings/test/compose/useCompose-test.tsx
index 9cde92063cd0fd..58b59b5c33df81 100644
--- a/packages/fluentui/react-bindings/test/compose/useCompose-test.tsx
+++ b/packages/fluentui/react-bindings/test/compose/useCompose-test.tsx
@@ -5,7 +5,7 @@ import {
   useUnhandledProps,
   Unstable_FluentContextProvider,
 } from '@fluentui/react-bindings';
-import { noopRenderer } from '@fluentui/react-northstar-styles-renderer';
+import { noopRenderer } from '@fluentui/react-northstar-fela-renderer';
 import { ComponentSlotStylesPrepared, emptyTheme, ThemeInput } from '@fluentui/styles';
 import cx from 'classnames';
 import { mount, shallow } from 'enzyme';
diff --git a/packages/fluentui/react-bindings/test/styles/resolveStyles-test.ts b/packages/fluentui/react-bindings/test/styles/resolveStyles-test.ts
index d3669f3c409392..838d767c07e17d 100644
--- a/packages/fluentui/react-bindings/test/styles/resolveStyles-test.ts
+++ b/packages/fluentui/react-bindings/test/styles/resolveStyles-test.ts
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import { ResolveStylesOptions, StylesContextPerformance } from '@fluentui/react-bindings';
-import { RendererRenderRule, noopRenderer } from '@fluentui/react-northstar-styles-renderer';
+import { RendererRenderRule, noopRenderer } from '@fluentui/react-northstar-fela-renderer';
 import {
   ComponentSlotStylesPrepared,
   ComponentVariablesObject,
diff --git a/packages/fluentui/react-bindings/tsconfig.json b/packages/fluentui/react-bindings/tsconfig.json
index 9b83728b9deb88..96d1d564ee2646 100644
--- a/packages/fluentui/react-bindings/tsconfig.json
+++ b/packages/fluentui/react-bindings/tsconfig.json
@@ -25,9 +25,6 @@
     },
     {
       "path": "../react-northstar-fela-renderer"
-    },
-    {
-      "path": "../react-northstar-styles-renderer"
     }
   ]
 }
diff --git a/packages/fluentui/react-northstar-fela-renderer/package.json b/packages/fluentui/react-northstar-fela-renderer/package.json
index 08b1316c7ffb64..0b2bcc4212eeae 100644
--- a/packages/fluentui/react-northstar-fela-renderer/package.json
+++ b/packages/fluentui/react-northstar-fela-renderer/package.json
@@ -5,11 +5,10 @@
   "bugs": "https://github.com/microsoft/fluentui/issues",
   "dependencies": {
     "@babel/runtime": "^7.10.4",
-    "@fluentui/react-northstar-styles-renderer": "^0.68.0",
+    "@fluentui/react-northstar-fela-renderer": "^0.68.0",
     "@fluentui/styles": "^0.68.0",
     "css-in-js-utils": "^3.0.0",
     "fela": "^10.6.1",
-    "fela-dom": "^11.7.0",
     "fela-plugin-embedded": "^10.6.1",
     "fela-plugin-fallback-value": "^10.6.1",
     "fela-plugin-placeholder-prefixer": "^10.6.1",
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/RendererProvider.tsx b/packages/fluentui/react-northstar-fela-renderer/src/RendererProvider.tsx
deleted file mode 100644
index c8b38ce26d1b73..00000000000000
--- a/packages/fluentui/react-northstar-fela-renderer/src/RendererProvider.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { render, rehydrate } from 'fela-dom';
-import * as React from 'react';
-
-import { FelaRenderer } from './types';
-
-// Copied from https://github.com/robinweser/fela/blob/master/packages/fela-bindings/src/RendererProviderFactory.js
-
-function hasDOM(renderer: FelaRenderer, targetDocument: Document | undefined) {
-  // ensure we're on a browser by using document since window is defined in e.g. React Native
-  // see https://github.com/robinweser/fela/issues/736
-  if (typeof document === 'undefined') {
-    return false;
-  }
-
-  const doc = targetDocument || document;
-
-  return renderer && doc && doc.createElement;
-}
-
-function hasServerRenderedStyle(targetDocument = document) {
-  return targetDocument.querySelectorAll('[data-fela-type]').length > 0;
-}
-
-type RendererProviderProps = {
-  renderer: FelaRenderer;
-  rehydrate?: boolean;
-  targetDocument?: Document;
-};
-
-// Typings provided by "fela" package are outdated, this overrides provides proper definition
-declare module 'fela-dom' {
-  function render(renderer: FelaRenderer, targetDocument?: Document): void;
-  function rehydrate(renderer: FelaRenderer, targetDocument?: Document): void;
-}
-
-export class RendererProvider extends React.Component<RendererProviderProps, Record<string, unknown>> {
-  constructor(props: RendererProviderProps) {
-    super(props);
-    this._renderStyle();
-  }
-
-  componentDidUpdate(prevProps: RendererProviderProps) {
-    if (prevProps.renderer !== this.props.renderer) {
-      // add warning that renderer is changed
-      this._renderStyle();
-    }
-  }
-
-  _renderStyle() {
-    const { renderer, rehydrate: shouldRehydrate, targetDocument } = this.props;
-
-    if (hasDOM(renderer, targetDocument)) {
-      if (shouldRehydrate && hasServerRenderedStyle(targetDocument)) {
-        rehydrate(renderer, targetDocument);
-      } else {
-        render(renderer, targetDocument);
-      }
-    }
-  }
-
-  render() {
-    return <>{this.props.children}</>;
-  }
-}
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx b/packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx
index 1f57c73daa9e29..ed02225412e07b 100644
--- a/packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx
+++ b/packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx
@@ -1,11 +1,10 @@
-import { CreateRenderer, Renderer } from '@fluentui/react-northstar-styles-renderer';
-import { createRenderer, IRenderer, IStyle, TPlugin } from 'fela';
+import { createRenderer, IRenderer, TPlugin } from 'fela';
 import felaPluginEmbedded from 'fela-plugin-embedded';
 import felaPluginFallbackValue from 'fela-plugin-fallback-value';
 import felaPluginPlaceholderPrefixer from 'fela-plugin-placeholder-prefixer';
 import felaPluginRtl from 'fela-plugin-rtl';
-import * as React from 'react';
 
+import { insertChange } from './dom/insertChange';
 import { felaDisableAnimationsPlugin } from './felaDisableAnimationsPlugin';
 import { felaExpandCssShorthandsPlugin } from './felaExpandCssShorthandsPlugin';
 import { felaFocusVisibleEnhancer } from './felaFocusVisibleEnhancer';
@@ -13,38 +12,7 @@ import { felaInvokeKeyframesPlugin } from './felaInvokeKeyframesPlugin';
 import { felaPerformanceEnhancer } from './felaPerformanceEnhancer';
 import { felaSanitizeCssPlugin } from './felaSanitizeCssPlugin';
 import { felaStylisEnhancer } from './felaStylisEnhancer';
-import { RendererProvider } from './RendererProvider';
-import { FelaRenderer, FelaRendererParam } from './types';
-
-let felaDevMode = false;
-
-try {
-  // eslint-disable-next-line no-undef
-  felaDevMode = !!window.localStorage.felaDevMode;
-} catch {}
-
-if (typeof window !== 'undefined' && process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
-  if (felaDevMode) {
-    /* eslint-disable-next-line no-console */
-    console.warn(
-      [
-        '@fluentui/react-northstar:',
-        'You are running Fela in development mode and this can cause performance degrades.',
-        'To disable it please paste `delete window.localStorage.felaDevMode` to your browsers console and reload current page.',
-      ].join(' '),
-    );
-  } else {
-    /* eslint-disable-next-line no-console */
-    console.warn(
-      [
-        '@fluentui/react-northstar:',
-        'You are running Fela in production mode.',
-        'This limits your ability to edit styles in browsers development tools.',
-        'To enable development mode please paste `window.localStorage.felaDevMode = true` to your browsers console and reload the page.',
-      ].join(' '),
-    );
-  }
-}
+import { CreateRenderer, FelaRenderer, FelaRendererParam, RendererChange } from './types';
 
 const blocklistedClassNames = [
   // Blocklist contains a list of classNames that are used by FontAwesome
@@ -68,7 +36,7 @@ const filterClassName = (className: string): boolean => {
 };
 
 const rendererConfig = {
-  devMode: felaDevMode,
+  devMode: false,
   filterClassName,
   enhancers: [felaPerformanceEnhancer, felaFocusVisibleEnhancer, felaStylisEnhancer],
   plugins: [
@@ -101,11 +69,15 @@ export function createFelaRenderer(options: CreateFelaRendererOptions = {}): Cre
 
   return () => {
     const felaRenderer = createRenderer(rendererConfig) as FelaRenderer & {
-      listeners: [];
-      nodes: Record<string, HTMLStyleElement>;
-      updateSubscription: Function | undefined;
+      _emitChange: (change: RendererChange) => void;
+    };
+
+    felaRenderer._emitChange = () => {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.error('FelaRenderer: _emitChange() should not be called.');
+      }
     };
-    let usedRenderers: number = 0;
 
     if (nonce) {
       felaRenderer.styleNodeAttributes = {
@@ -113,35 +85,19 @@ export function createFelaRenderer(options: CreateFelaRendererOptions = {}): Cre
       };
     }
 
-    // rehydration disabled to avoid leaking styles between renderers
-    // https://github.com/rofrischmann/fela/blob/master/docs/api/fela-dom/rehydrate.md
-    const Provider: Renderer['Provider'] = props => (
-      <RendererProvider renderer={felaRenderer} rehydrate={false} targetDocument={props.target}>
-        {props.children}
-      </RendererProvider>
-    );
-
     return {
-      registerUsage: () => {
-        usedRenderers += 1;
-      },
-      unregisterUsage: () => {
-        usedRenderers -= 1;
-
-        if (usedRenderers === 0) {
-          felaRenderer.listeners = [];
-          felaRenderer.nodes = {};
-          felaRenderer.updateSubscription = undefined;
-        }
-      },
-
-      renderRule: (styles, param) => {
+      renderRule: (styles, param, changes) => {
         const felaParam: FelaRendererParam = {
           ...param,
           theme: { direction: param.direction },
         };
 
-        return felaRenderer.renderRule(() => styles as unknown as IStyle, felaParam);
+        return felaRenderer._renderStyle(styles, felaParam, changes);
+      },
+      insertChanges: (targetDocument: Document, changes: RendererChange[]) => {
+        changes.forEach(change => {
+          insertChange(felaRenderer, targetDocument, change);
+        });
       },
 
       // getOriginalRenderer() is implemented only for tests to be compatible with jest-react-fela expectations.
@@ -152,8 +108,6 @@ export function createFelaRenderer(options: CreateFelaRendererOptions = {}): Cre
 
         return felaRenderer;
       },
-
-      Provider,
     };
   };
 }
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/dom/createNode.ts b/packages/fluentui/react-northstar-fela-renderer/src/dom/createNode.ts
new file mode 100644
index 00000000000000..3414f87218c57f
--- /dev/null
+++ b/packages/fluentui/react-northstar-fela-renderer/src/dom/createNode.ts
@@ -0,0 +1,41 @@
+import type { NodeAttributes, SortMediaQueryFn, StyleNodeAttributes } from '../types';
+import { getNodeSibling } from './getNodeSibling';
+
+export function createNode(
+  attributes: NodeAttributes,
+  targetDocument: Document,
+  sortMediaQuery: SortMediaQueryFn,
+  styleNodeAttributes: StyleNodeAttributes,
+): HTMLStyleElement {
+  const head = targetDocument.head || {};
+  const { type, media, support } = attributes;
+
+  const node = targetDocument.createElement('style');
+
+  node.setAttribute('data-fela-type', type);
+  node.type = 'text/css';
+
+  if (support) {
+    node.setAttribute('data-fela-support', 'true');
+  }
+
+  if (media) {
+    node.media = media;
+  }
+
+  // applying custom style tag attributes
+  for (const attribute in styleNodeAttributes) {
+    node.setAttribute(attribute, styleNodeAttributes[attribute]);
+  }
+
+  const nodes = Array.from(head.querySelectorAll<HTMLStyleElement>('[data-fela-type]'));
+  const sibling = getNodeSibling(nodes, attributes, sortMediaQuery);
+
+  if (sibling) {
+    head.insertBefore(node, sibling);
+  } else {
+    head.appendChild(node);
+  }
+
+  return node;
+}
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/dom/getNodeFromCache.ts b/packages/fluentui/react-northstar-fela-renderer/src/dom/getNodeFromCache.ts
new file mode 100644
index 00000000000000..0d02c3653dfe55
--- /dev/null
+++ b/packages/fluentui/react-northstar-fela-renderer/src/dom/getNodeFromCache.ts
@@ -0,0 +1,25 @@
+import type { FelaRenderer, NodeAttributes } from '../types';
+import { createNode } from './createNode';
+import { queryNode } from './queryNode';
+
+function getReference({ type, media = '', support = '' }: NodeAttributes): string {
+  return type + media + support;
+}
+
+export function getNodeFromCache(
+  attributes: NodeAttributes,
+  renderer: FelaRenderer,
+  targetDocument: Document,
+): HTMLStyleElement {
+  const reference = getReference(attributes);
+
+  if (!renderer.nodes[reference]) {
+    const node =
+      queryNode(attributes, targetDocument) ||
+      createNode(attributes, targetDocument, renderer.sortMediaQuery, renderer.styleNodeAttributes);
+
+    renderer.nodes[reference] = node;
+  }
+
+  return renderer.nodes[reference];
+}
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/dom/getNodeSibling.ts b/packages/fluentui/react-northstar-fela-renderer/src/dom/getNodeSibling.ts
new file mode 100644
index 00000000000000..3d7947f2b39100
--- /dev/null
+++ b/packages/fluentui/react-northstar-fela-renderer/src/dom/getNodeSibling.ts
@@ -0,0 +1,55 @@
+import {  KEYFRAME_TYPE, RULE_TYPE } from 'fela-utils';
+
+import type { NodeAttributes, SortMediaQueryFn } from '../types';
+
+export function getNodeSibling(
+  nodes: HTMLStyleElement[],
+  { type, media, support }: NodeAttributes,
+  sortMediaQuery: SortMediaQueryFn,
+): HTMLElement | undefined {
+  switch (type) {
+    case KEYFRAME_TYPE:
+      return nodes[0];
+    case RULE_TYPE:
+      const mediaNodes = nodes.map(node => node.media);
+      const filteredNodes = mediaNodes.filter(m => m.length !== 0);
+
+      if (media) {
+        const sorted = [...filteredNodes, media].sort(sortMediaQuery);
+        const index = sorted.indexOf(media) + 1;
+        const insertMedia = sorted[index];
+
+        if (insertMedia) {
+          if (insertMedia === media && support) {
+            // support
+            return nodes.find(el => el.media === sorted[sorted.indexOf(media) + 2]);
+          }
+          return nodes.find(el => el.media === insertMedia);
+        }
+      } else {
+        const sorted = filteredNodes.sort(sortMediaQuery);
+        const insertMedia = sorted[0];
+
+        if (!support) {
+          // if we insert the plain RULE node while there's already a support RULE node
+          // make sure to insert before
+          const supportNode = nodes.find(
+            el =>
+              el.getAttribute('data-fela-support') !== undefined &&
+              el.media === '' &&
+              el.getAttribute('data-fela-type') === 'RULE',
+          );
+
+          if (supportNode) {
+            return supportNode;
+          }
+        }
+
+        if (insertMedia) {
+          return nodes.find(el => el.media === insertMedia);
+        }
+      }
+  }
+
+  return undefined;
+}
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/dom/insertChange.ts b/packages/fluentui/react-northstar-fela-renderer/src/dom/insertChange.ts
new file mode 100644
index 00000000000000..cb738bf605597a
--- /dev/null
+++ b/packages/fluentui/react-northstar-fela-renderer/src/dom/insertChange.ts
@@ -0,0 +1,23 @@
+import { RULE_TYPE, KEYFRAME_TYPE } from 'fela-utils';
+
+import type { FelaRenderer, RendererChange } from '../types';
+import { getNodeFromCache } from './getNodeFromCache';
+import { insertRule } from './insertRule';
+
+export function insertChange(renderer: FelaRenderer, targetDocument: Document, change: RendererChange) {
+  const node = getNodeFromCache(change, renderer, targetDocument);
+
+  switch (change.type) {
+    case KEYFRAME_TYPE:
+      if (node.textContent?.indexOf(change.keyframe) === -1) {
+        node.textContent += change.keyframe;
+      }
+      break;
+    case RULE_TYPE:
+      insertRule(change, renderer, node);
+      break;
+    default:
+      // TODO: warning
+      break;
+  }
+}
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/dom/insertRule.ts b/packages/fluentui/react-northstar-fela-renderer/src/dom/insertRule.ts
new file mode 100644
index 00000000000000..abd59ea5fc3e49
--- /dev/null
+++ b/packages/fluentui/react-northstar-fela-renderer/src/dom/insertRule.ts
@@ -0,0 +1,69 @@
+import {
+  // @ts-expect-error No types available
+  generateCSSRule,
+  // @ts-expect-error No types available
+  generateCSSSupportRule,
+  // @ts-expect-error No types available
+  getRuleScore,
+} from 'fela-utils';
+
+import type { FelaRenderer, RendererRuleChange } from '../types';
+
+export function insertRule(
+  { selector, declaration, support, media, pseudo }: RendererRuleChange,
+  renderer: FelaRenderer,
+  node: HTMLStyleElement,
+) {
+  const nodeReference = media + support;
+
+  try {
+    const score = getRuleScore(renderer.ruleOrder, pseudo);
+    const { cssRules } = node.sheet!;
+
+    let index = cssRules.length;
+
+    // This heavily optimises the amount of rule iterations we need
+    // due to most rules having a score=0 anyways
+    if (score === 0) {
+      if (renderer.scoreIndex[nodeReference] === undefined) {
+        index = 0;
+      } else {
+        index = renderer.scoreIndex[nodeReference] + 1;
+      }
+    } else {
+      // we start iterating from the last score=0 entry
+      // to correctly inject pseudo classes etc.
+      const startIndex = renderer.scoreIndex[nodeReference] || 0;
+
+      for (let i = startIndex, len = cssRules.length; i < len; ++i) {
+        if ((cssRules[i] as CSSRule & { score: number }).score > score) {
+          index = i;
+          break;
+        }
+      }
+    }
+
+    const cssRule = generateCSSRule(selector, declaration);
+
+    if (support.length > 0) {
+      const cssSupportRule = generateCSSSupportRule(support, cssRule);
+      node.sheet!.insertRule(cssSupportRule, index);
+    } else {
+      node.sheet!.insertRule(cssRule, index);
+    }
+
+    if (score === 0) {
+      renderer.scoreIndex[nodeReference] = index;
+    }
+
+    (cssRules[index] as CSSRule & { score: number }).score = score;
+  } catch {
+    // We're disabled these warnings due to false-positive errors with browser prefixes
+    // See https://github.com/robinweser/fela/issues/634
+    // console.warn(
+    //   `An error occurred while inserting the rules into DOM.\n`,
+    //   declaration.replace(/;/g, ';\n'),
+    //   e
+    // )
+  }
+}
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/dom/queryNode.ts b/packages/fluentui/react-northstar-fela-renderer/src/dom/queryNode.ts
new file mode 100644
index 00000000000000..3e2986975688a6
--- /dev/null
+++ b/packages/fluentui/react-northstar-fela-renderer/src/dom/queryNode.ts
@@ -0,0 +1,8 @@
+import type { NodeAttributes } from '../types';
+
+export function queryNode({ type, media, support }: NodeAttributes, targetDocument: Document): HTMLStyleElement | null {
+  const mediaQuery = media ? `[media="${media}"]` : ':not([media])';
+  const supportQuery = support ? '[data-fela-support="true"]' : ':not([data-fela-support="true"])';
+
+  return targetDocument.querySelector<HTMLStyleElement>(`[data-fela-type="${type}"]${supportQuery}${mediaQuery}`);
+}
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/felaFocusVisibleEnhancer.ts b/packages/fluentui/react-northstar-fela-renderer/src/felaFocusVisibleEnhancer.ts
index 21ecdb04835613..a9d35466fcfb8d 100644
--- a/packages/fluentui/react-northstar-fela-renderer/src/felaFocusVisibleEnhancer.ts
+++ b/packages/fluentui/react-northstar-fela-renderer/src/felaFocusVisibleEnhancer.ts
@@ -1,5 +1,5 @@
 import { RULE_TYPE } from 'fela-utils';
-import { FelaRenderer, FelaRendererChange } from './types';
+import { FelaRenderer, RendererChange } from './types';
 
 /**
  * A Fela enhancer that allows to use `:focus-visible`. Uses `what-input` library and its global
@@ -9,7 +9,7 @@ import { FelaRenderer, FelaRendererChange } from './types';
 export const felaFocusVisibleEnhancer = (renderer: FelaRenderer) => {
   const existingEmitChange = renderer._emitChange.bind(renderer);
 
-  renderer._emitChange = (change: FelaRendererChange) => {
+  renderer._emitChange = (change: RendererChange) => {
     if (change.type === RULE_TYPE && change.selector.indexOf(':focus-visible') !== -1) {
       // Fela uses objects by references, it's safe to override properties
       change.pseudo = change.pseudo ? change.pseudo.replace(':focus-visible', ':focus') : '';
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/felaPerformanceEnhancer.ts b/packages/fluentui/react-northstar-fela-renderer/src/felaPerformanceEnhancer.ts
index c4ec7bf3ecc4d2..90d5f135487dec 100644
--- a/packages/fluentui/react-northstar-fela-renderer/src/felaPerformanceEnhancer.ts
+++ b/packages/fluentui/react-northstar-fela-renderer/src/felaPerformanceEnhancer.ts
@@ -22,10 +22,12 @@ import {
   isUndefinedValue,
   // @ts-ignore
   normalizeNestedProperty,
+  // @ts-ignore
+  processStyleWithPlugins,
   RULE_TYPE,
 } from 'fela-utils';
 
-import { FelaRenderer, FelaRendererChange } from './types';
+import type { FelaRenderer, RendererRuleChange } from './types';
 
 function isPlainObject(val: any) {
   return val != null && typeof val === 'object' && Array.isArray(val) === false;
@@ -74,8 +76,20 @@ function generateDeclarationReference(
 //
 
 export function felaPerformanceEnhancer(renderer: FelaRenderer) {
+  // Copied to pass down a mutable `changes` array
+  renderer._renderStyle = function _renderStyle(
+    style: ICSSInJSStyle,
+    props: Record<string, unknown>,
+    changes: RendererRuleChange[],
+  ): string {
+    const processedStyle = processStyleWithPlugins(renderer, style, RULE_TYPE, props);
+
+    return renderer._renderStyleToClassNames(processedStyle, changes).slice(1);
+  };
+
   renderer._renderStyleToClassNames = function _renderStyleToClassNames(
     { _className, ...style }: ICSSInJSStyle & { _className?: string },
+    changes: RendererRuleChange[],
     pseudo: string = '',
     media: string = '',
     support: string = '',
@@ -89,16 +103,17 @@ export function felaPerformanceEnhancer(renderer: FelaRenderer) {
         if (isNestedSelector(property)) {
           classNames += renderer._renderStyleToClassNames(
             value as any,
+            changes,
             pseudo + normalizeNestedProperty(property),
             media,
             support,
           );
         } else if (isMediaQuery(property)) {
           const combinedMediaQuery = generateCombinedMediaQuery(media, property.slice(6).trim());
-          classNames += renderer._renderStyleToClassNames(value as any, pseudo, combinedMediaQuery, support);
+          classNames += renderer._renderStyleToClassNames(value as any, changes, pseudo, combinedMediaQuery, support);
         } else if (isSupport(property)) {
           const combinedSupport = generateCombinedMediaQuery(support, property.slice(9).trim());
-          classNames += renderer._renderStyleToClassNames(value as any, pseudo, media, combinedSupport);
+          classNames += renderer._renderStyleToClassNames(value as any, changes, pseudo, media, combinedSupport);
         } else {
           // eslint-disable-next-line no-console
           console.warn(`The object key "${property}" is not a valid nested key in Fela.
@@ -114,7 +129,7 @@ Check http://fela.js.org/docs/basics/Rules.html#styleobject for more information
           if (isUndefinedValue(value)) {
             renderer.cache[declarationReference] = {
               className: '',
-            } as FelaRendererChange;
+            } as RendererRuleChange;
             /* eslint-disable no-continue */
             continue;
             /* eslint-enable */
@@ -137,10 +152,10 @@ Check http://fela.js.org/docs/basics/Rules.html#styleobject for more information
           };
 
           renderer.cache[declarationReference] = change;
-          renderer._emitChange(change);
+          changes.push(change);
         }
 
-        const cachedClassName = renderer.cache[declarationReference].className;
+        const cachedClassName = (renderer.cache[declarationReference] as RendererRuleChange).className;
 
         // only append if we got a class cached
         if (cachedClassName) {
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/felaStylisEnhancer.ts b/packages/fluentui/react-northstar-fela-renderer/src/felaStylisEnhancer.ts
index f3d214af72176a..efb839b2a01465 100644
--- a/packages/fluentui/react-northstar-fela-renderer/src/felaStylisEnhancer.ts
+++ b/packages/fluentui/react-northstar-fela-renderer/src/felaStylisEnhancer.ts
@@ -2,7 +2,7 @@ import { RULE_TYPE } from 'fela-utils';
 // @ts-ignore
 import _Stylis from 'stylis';
 
-import { FelaRenderer, FelaRendererChange } from './types';
+import { FelaRenderer, RendererChange } from './types';
 
 // `stylis@3` is a CJS library, there are known issues with them:
 // https://github.com/rollup/rollup/issues/1267#issuecomment-446681320
@@ -21,7 +21,7 @@ const stylis = new Stylis({
 export const felaStylisEnhancer = (renderer: FelaRenderer) => {
   const existingEmitChange = renderer._emitChange.bind(renderer);
 
-  renderer._emitChange = (change: FelaRendererChange) => {
+  renderer._emitChange = (change: RendererChange) => {
     if (change.type === RULE_TYPE) {
       const prefixed: string = stylis('', change.declaration);
 
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/index.ts b/packages/fluentui/react-northstar-fela-renderer/src/index.ts
index 2e73fc8ae190c1..788b1ff8788f22 100644
--- a/packages/fluentui/react-northstar-fela-renderer/src/index.ts
+++ b/packages/fluentui/react-northstar-fela-renderer/src/index.ts
@@ -1 +1,4 @@
 export { createFelaRenderer } from './createFelaRenderer';
+export { noopRenderer } from './noopRenderer';
+
+export { type CreateRenderer, type RendererParam, type Renderer } from './types';
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/noopRenderer.ts b/packages/fluentui/react-northstar-fela-renderer/src/noopRenderer.ts
new file mode 100644
index 00000000000000..0f47585c6b07d6
--- /dev/null
+++ b/packages/fluentui/react-northstar-fela-renderer/src/noopRenderer.ts
@@ -0,0 +1,8 @@
+import type { Renderer } from './types';
+
+// Provides a minimal functionality to render components without styles and without runtime errors.
+
+export const noopRenderer: Renderer = {
+  insertChanges: () => {},
+  renderRule: () => '',
+};
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/types.ts b/packages/fluentui/react-northstar-fela-renderer/src/types.ts
index 7958b86135fbda..afcb8858a83759 100644
--- a/packages/fluentui/react-northstar-fela-renderer/src/types.ts
+++ b/packages/fluentui/react-northstar-fela-renderer/src/types.ts
@@ -1,33 +1,79 @@
 import { IRenderer } from 'fela';
-import { RendererParam } from '@fluentui/react-northstar-styles-renderer';
-import { ICSSInJSStyle } from '@fluentui/styles';
+
+// DOM
+// ---
+
+export type NodeAttributes = Record<string, string>;
+export type StyleNodeAttributes = Record<string, string>;
+
+export type SortMediaQueryFn = (a: string, b: string) => number;
+
+export type RendererParam = {
+  direction: 'ltr' | 'rtl';
+  disableAnimations: boolean;
+  displayName: string;
+  sanitizeCss: boolean;
+};
+
+export type ICSSInJSStyle = any;
+
+// Generic renderer
+//
+//
+
+export type RendererRenderRule = (styles: ICSSInJSStyle, param: RendererParam, changes: RendererRuleChange[]) => string;
+
+export type RendererRuleChange = {
+  type: 'RULE';
+  className: string;
+  selector: string;
+  declaration: string;
+  pseudo: string;
+  media: string;
+  support: string;
+};
+export type RendererChange =
+  | RendererRuleChange
+  | {
+      type: 'KEYFRAME';
+      keyframe: string;
+    };
+
+export type Renderer = {
+  insertChanges: (targetDocument: Document, changes: RendererChange[]) => void;
+  renderRule: RendererRenderRule;
+};
+
+export type CreateRenderer = (target?: Document) => Renderer;
+
+// Fela
+// ---
 
 export type FelaRenderer = IRenderer & {
-  cache: Record<string, FelaRendererChange>;
+  cache: Record<string, RendererChange>;
   selectorPrefix?: string;
 
+  ruleOrder: any;
+  scoreIndex: any;
+
+  sortMediaQuery: SortMediaQueryFn;
+  nodes: Record<string, HTMLStyleElement>;
+
   getNextRuleIdentifier: () => string;
   filterClassName: () => boolean;
 
-  _emitChange: (change: FelaRendererChange) => void;
+  _emitChange: (change: RendererChange) => void;
+
+  _renderStyle(style: ICSSInJSStyle, props: Record<string, unknown>, changes: RendererRuleChange[]): string;
   _renderStyleToClassNames(
     { _className, ...style }: ICSSInJSStyle & { _className: string },
+    changes?: RendererChange[],
     pseudo?: string,
     media?: string,
     support?: string,
   ): string;
 
-  styleNodeAttributes: Record<string, string | number | boolean>;
-};
-
-export type FelaRendererChange = {
-  type: 'RULE' | 'KEYFRAME' | 'FONT' | 'STATIC' | 'CLEAR';
-  className: string;
-  selector: string;
-  declaration: string;
-  pseudo: string;
-  media: string;
-  support: string;
+  styleNodeAttributes: StyleNodeAttributes;
 };
 
 export type FelaRendererParam = Omit<RendererParam, 'direction'> & { theme: { direction: RendererParam['direction'] } };
diff --git a/packages/fluentui/react-northstar-fela-renderer/tsconfig.json b/packages/fluentui/react-northstar-fela-renderer/tsconfig.json
index 732c890669c376..dbcb31ced0be00 100644
--- a/packages/fluentui/react-northstar-fela-renderer/tsconfig.json
+++ b/packages/fluentui/react-northstar-fela-renderer/tsconfig.json
@@ -12,7 +12,7 @@
   "include": ["src", "test"],
   "references": [
     {
-      "path": "../react-northstar-styles-renderer"
+      "path": "../styles"
     }
   ]
 }
diff --git a/packages/fluentui/react-northstar-styles-renderer/.eslintrc.json b/packages/fluentui/react-northstar-styles-renderer/.eslintrc.json
deleted file mode 100644
index 662adf521434f9..00000000000000
--- a/packages/fluentui/react-northstar-styles-renderer/.eslintrc.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "extends": ["plugin:@fluentui/eslint-plugin/react-northstar"],
-  "root": true
-}
diff --git a/packages/fluentui/react-northstar-styles-renderer/.gulp.js b/packages/fluentui/react-northstar-styles-renderer/.gulp.js
deleted file mode 100644
index 57dbe6023a8ca6..00000000000000
--- a/packages/fluentui/react-northstar-styles-renderer/.gulp.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('../../../.gulp');
diff --git a/packages/fluentui/react-northstar-styles-renderer/babel.config.js b/packages/fluentui/react-northstar-styles-renderer/babel.config.js
deleted file mode 100644
index 53b421d2b7481d..00000000000000
--- a/packages/fluentui/react-northstar-styles-renderer/babel.config.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = api => require('@fluentui/scripts-babel')(api);
diff --git a/packages/fluentui/react-northstar-styles-renderer/gulpfile.ts b/packages/fluentui/react-northstar-styles-renderer/gulpfile.ts
deleted file mode 100644
index 1494ed38c24558..00000000000000
--- a/packages/fluentui/react-northstar-styles-renderer/gulpfile.ts
+++ /dev/null
@@ -1 +0,0 @@
-import '../../../gulpfile';
diff --git a/packages/fluentui/react-northstar-styles-renderer/package.json b/packages/fluentui/react-northstar-styles-renderer/package.json
deleted file mode 100644
index d3dbe47714e07c..00000000000000
--- a/packages/fluentui/react-northstar-styles-renderer/package.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "name": "@fluentui/react-northstar-styles-renderer",
-  "description": "A noop renderer for FluentUI React Northstar with typings.",
-  "version": "0.68.0",
-  "bugs": "https://github.com/microsoft/fluentui/issues",
-  "dependencies": {
-    "@babel/runtime": "^7.10.4",
-    "@fluentui/styles": "^0.68.0"
-  },
-  "devDependencies": {
-    "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts-babel": "*",
-    "@fluentui/scripts-gulp": "*",
-    "@types/react": "17.0.44",
-    "@types/react-dom": "17.0.15",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "files": [
-    "dist"
-  ],
-  "homepage": "https://github.com/microsoft/fluentui/tree/master/packages/fluentui/react-northstar-styles-renderer",
-  "jsnext:main": "dist/es/index.js",
-  "license": "MIT",
-  "main": "dist/commonjs/index.js",
-  "module": "dist/es/index.js",
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": "microsoft/fluentui.git",
-  "scripts": {
-    "build": "gulp bundle:package:no-umd",
-    "clean": "gulp bundle:package:clean",
-    "lint": "ESLINT_USE_FLAT_CONFIG=false eslint --ext .js,.ts,.tsx .",
-    "lint:fix": "yarn lint --fix"
-  },
-  "sideEffects": false,
-  "types": "dist/es/index.d.ts"
-}
diff --git a/packages/fluentui/react-northstar-styles-renderer/project.json b/packages/fluentui/react-northstar-styles-renderer/project.json
deleted file mode 100644
index a67b0e05fe9dac..00000000000000
--- a/packages/fluentui/react-northstar-styles-renderer/project.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "react-northstar-styles-renderer",
-  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "library",
-  "implicitDependencies": [],
-  "tags": ["react-northstar"]
-}
diff --git a/packages/fluentui/react-northstar-styles-renderer/src/index.ts b/packages/fluentui/react-northstar-styles-renderer/src/index.ts
deleted file mode 100644
index 3874d172ab9969..00000000000000
--- a/packages/fluentui/react-northstar-styles-renderer/src/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { noopRenderer } from './noopRenderer';
-export * from './types';
diff --git a/packages/fluentui/react-northstar-styles-renderer/src/noopRenderer.ts b/packages/fluentui/react-northstar-styles-renderer/src/noopRenderer.ts
deleted file mode 100644
index 5d8f00d35c7f7c..00000000000000
--- a/packages/fluentui/react-northstar-styles-renderer/src/noopRenderer.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { Renderer } from './types';
-
-// Provides a minimal functionality to render components without styles and without runtime errors.
-
-const NoopProvider: React.FC = props => React.createElement(React.Fragment, null, props.children);
-
-export const noopRenderer: Renderer = {
-  registerUsage: () => {},
-  unregisterUsage: () => {},
-
-  renderRule: () => '',
-
-  Provider: NoopProvider,
-};
diff --git a/packages/fluentui/react-northstar-styles-renderer/src/types.ts b/packages/fluentui/react-northstar-styles-renderer/src/types.ts
deleted file mode 100644
index 155b52016c21bd..00000000000000
--- a/packages/fluentui/react-northstar-styles-renderer/src/types.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ICSSInJSStyle } from '@fluentui/styles';
-import * as React from 'react';
-
-export type RendererParam = {
-  direction: 'ltr' | 'rtl';
-  disableAnimations: boolean;
-  displayName: string;
-  sanitizeCss: boolean;
-};
-
-export type RendererRenderRule = (styles: ICSSInJSStyle, param: RendererParam) => string;
-
-export type Renderer = {
-  registerUsage: () => void;
-  unregisterUsage: () => void;
-
-  renderRule: RendererRenderRule;
-
-  Provider: React.FC<{ target: Document | undefined }>;
-};
-
-export type CreateRenderer = (target?: Document) => Renderer;
diff --git a/packages/fluentui/react-northstar-styles-renderer/tsconfig.json b/packages/fluentui/react-northstar-styles-renderer/tsconfig.json
deleted file mode 100644
index dbcb31ced0be00..00000000000000
--- a/packages/fluentui/react-northstar-styles-renderer/tsconfig.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "extends": "../../../tsconfig.base.v0.json",
-  "compilerOptions": {
-    "composite": true,
-    "outDir": "dist/dts",
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noImplicitAny": true,
-    "noUnusedParameters": true,
-    "strictNullChecks": true
-  },
-  "include": ["src", "test"],
-  "references": [
-    {
-      "path": "../styles"
-    }
-  ]
-}
diff --git a/packages/fluentui/react-northstar/package.json b/packages/fluentui/react-northstar/package.json
index 9ac78505f7082b..ac0938053dbd38 100644
--- a/packages/fluentui/react-northstar/package.json
+++ b/packages/fluentui/react-northstar/package.json
@@ -13,7 +13,7 @@
     "@fluentui/react-component-nesting-registry": "^0.68.0",
     "@fluentui/react-component-ref": "^0.68.0",
     "@fluentui/react-icons-northstar": "^0.68.0",
-    "@fluentui/react-northstar-styles-renderer": "^0.68.0",
+    "@fluentui/react-northstar-fela-renderer": "^0.68.0",
     "@fluentui/react-portal-compat-context": "^9.0.13",
     "@fluentui/react-proptypes": "^0.68.0",
     "@fluentui/styles": "^0.68.0",
diff --git a/packages/fluentui/react-northstar/src/components/Design/Design.tsx b/packages/fluentui/react-northstar/src/components/Design/Design.tsx
index 76151a23c73c5f..b87bad315a58d3 100644
--- a/packages/fluentui/react-northstar/src/components/Design/Design.tsx
+++ b/packages/fluentui/react-northstar/src/components/Design/Design.tsx
@@ -1,5 +1,5 @@
 import { ComponentDesignProp, useFluentContext } from '@fluentui/react-bindings';
-import { RendererParam } from '@fluentui/react-northstar-styles-renderer';
+import { RendererParam } from '@fluentui/react-northstar-fela-renderer';
 import * as customPropTypes from '@fluentui/react-proptypes';
 import { ICSSInJSStyle } from '@fluentui/styles';
 import * as React from 'react';
diff --git a/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx b/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx
index a5e27c200e515e..3f4f86934f3294 100644
--- a/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx
+++ b/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx
@@ -103,21 +103,16 @@ export const Provider: ComponentWithAs<'div', ProviderProps> & {
       });
 
   const portalContextValue = React.useMemo<PortalContextValue>(() => ({ className: classes.root }), [classes.root]);
-  const RenderProvider = outgoingContext.renderer.Provider;
 
   useIsomorphicLayoutEffect(() => {
     if (props.target) {
       setUpWhatInput(props.target);
     }
 
-    outgoingContext.renderer.registerUsage();
-
     return () => {
       if (props.target) {
         tryCleanupWhatInput(props.target);
       }
-
-      outgoingContext.renderer.unregisterUsage();
     };
   }, []);
 
@@ -126,24 +121,20 @@ export const Provider: ComponentWithAs<'div', ProviderProps> & {
   // - as we don't apply styles "PortalContext.Provider" should not be rendered
   if (rendersReactFragment) {
     return (
-      <RenderProvider target={outgoingContext.target}>
-        <Unstable_FluentContextProvider value={outgoingContext}>
-          <>{children}</>
-        </Unstable_FluentContextProvider>
-      </RenderProvider>
+      <Unstable_FluentContextProvider value={outgoingContext}>
+        <>{children}</>
+      </Unstable_FluentContextProvider>
     );
   }
 
   return (
-    <RenderProvider target={outgoingContext.target}>
-      <Unstable_FluentContextProvider value={outgoingContext}>
-        <PortalContext.Provider value={portalContextValue}>
-          <ElementType className={classes.root} {...rtlProps} {...unhandledProps}>
-            {children}
-          </ElementType>
-        </PortalContext.Provider>
-      </Unstable_FluentContextProvider>
-    </RenderProvider>
+    <Unstable_FluentContextProvider value={outgoingContext}>
+      <PortalContext.Provider value={portalContextValue}>
+        <ElementType className={classes.root} {...rtlProps} {...unhandledProps}>
+          {children}
+        </ElementType>
+      </PortalContext.Provider>
+    </Unstable_FluentContextProvider>
   );
 };
 
diff --git a/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts b/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts
index a1ddcace662482..afc106f7f73408 100644
--- a/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts
+++ b/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts
@@ -4,7 +4,7 @@ import {
   StylesContextPerformance,
   StylesContextPerformanceInput,
 } from '@fluentui/react-bindings';
-import { CreateRenderer, Renderer } from '@fluentui/react-northstar-styles-renderer';
+import { CreateRenderer, Renderer } from '@fluentui/react-northstar-fela-renderer';
 import { mergeThemes } from '@fluentui/styles';
 
 import { isBrowser } from './isBrowser';
diff --git a/packages/fluentui/react-northstar/src/utils/renderComponent.tsx b/packages/fluentui/react-northstar/src/utils/renderComponent.tsx
index ca7a88ffdee4b1..c3fc20040e1009 100644
--- a/packages/fluentui/react-northstar/src/utils/renderComponent.tsx
+++ b/packages/fluentui/react-northstar/src/utils/renderComponent.tsx
@@ -9,7 +9,7 @@ import {
   unstable_getStyles as getStyles,
   ProviderContextPrepared,
 } from '@fluentui/react-bindings';
-import { noopRenderer } from '@fluentui/react-northstar-styles-renderer';
+import { noopRenderer } from '@fluentui/react-northstar-fela-renderer';
 import {
   emptyTheme,
   ComponentSlotStylesResolved,
diff --git a/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx b/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx
index 36ee499eb2dc0d..5538f971a0a8c6 100644
--- a/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx
+++ b/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx
@@ -2,7 +2,7 @@ import { Accessibility, AriaRole, IS_FOCUSABLE_ATTRIBUTE } from '@fluentui/acces
 import { compose, ComposedComponent, FocusZone } from '@fluentui/react-bindings';
 import { Ref } from '@fluentui/react-component-ref';
 import { isConformant as isConformantBase, IsConformantOptions } from '@fluentui/react-conformance';
-import { Renderer } from '@fluentui/react-northstar-styles-renderer';
+import { Renderer } from '@fluentui/react-northstar-fela-renderer';
 import { ComponentSlotStylesPrepared, emptyTheme } from '@fluentui/styles';
 import * as faker from 'faker';
 import * as _ from 'lodash';
diff --git a/packages/fluentui/react-northstar/test/specs/utils/mergeProviderContexts/mergeProviderContexts-test.ts b/packages/fluentui/react-northstar/test/specs/utils/mergeProviderContexts/mergeProviderContexts-test.ts
index bc6ef04f8922dc..1711e0d2f61bc4 100644
--- a/packages/fluentui/react-northstar/test/specs/utils/mergeProviderContexts/mergeProviderContexts-test.ts
+++ b/packages/fluentui/react-northstar/test/specs/utils/mergeProviderContexts/mergeProviderContexts-test.ts
@@ -1,5 +1,5 @@
 import { ProviderContextInput } from '@fluentui/react-bindings';
-import type { CreateRenderer } from '@fluentui/react-northstar-styles-renderer';
+import type { CreateRenderer } from '@fluentui/react-northstar-fela-renderer';
 import { mergeProviderContexts, mergePerformanceOptions, getRenderer } from 'src/utils/mergeProviderContexts';
 
 describe('getRenderer', () => {
diff --git a/packages/fluentui/react-northstar/test/utils/withProvider.tsx b/packages/fluentui/react-northstar/test/utils/withProvider.tsx
index 54e1c30a3d7b32..f133b19950c2ee 100644
--- a/packages/fluentui/react-northstar/test/utils/withProvider.tsx
+++ b/packages/fluentui/react-northstar/test/utils/withProvider.tsx
@@ -1,5 +1,5 @@
 import { Unstable_FluentContextProvider, ProviderContextPrepared } from '@fluentui/react-bindings';
-import { Renderer, noopRenderer } from '@fluentui/react-northstar-styles-renderer';
+import { Renderer, noopRenderer } from '@fluentui/react-northstar-fela-renderer';
 import { emptyTheme, ThemePrepared } from '@fluentui/styles';
 import { mount, MountRendererProps, ComponentType } from 'enzyme';
 import * as React from 'react';
diff --git a/packages/fluentui/react-northstar/tsconfig.json b/packages/fluentui/react-northstar/tsconfig.json
index 575a623828184e..649a6c038a7c46 100644
--- a/packages/fluentui/react-northstar/tsconfig.json
+++ b/packages/fluentui/react-northstar/tsconfig.json
@@ -38,7 +38,7 @@
       "path": "../react-component-ref"
     },
     {
-      "path": "../react-northstar-styles-renderer"
+      "path": "../react-northstar-fela-renderer"
     },
     {
       "path": "../react-proptypes"
diff --git a/scripts/fluentui-publish/src/utils.spec.ts b/scripts/fluentui-publish/src/utils.spec.ts
index 1f8813993d07db..49bcb37a1ffc95 100644
--- a/scripts/fluentui-publish/src/utils.spec.ts
+++ b/scripts/fluentui-publish/src/utils.spec.ts
@@ -46,7 +46,6 @@ describe(`utils`, () => {
       expect(Object.keys(actual.lib)).toMatchInlineSnapshot(`
         Array [
           "react-component-nesting-registry",
-          "react-northstar-styles-renderer",
           "react-component-event-listener",
           "react-northstar-fela-renderer",
           "react-northstar-prototypes",
diff --git a/syncpack.config.js b/syncpack.config.js
index ea1825cfb37b2a..e8de930aef3bea 100644
--- a/syncpack.config.js
+++ b/syncpack.config.js
@@ -132,7 +132,6 @@ const config = {
         '@fluentui/react-northstar-fela-renderer',
         '@fluentui/react-northstar-prototypes',
         '@fluentui/react-northstar-prototypes',
-        '@fluentui/react-northstar-styles-renderer',
         '@fluentui/react-proptypes',
         '@fluentui/styles',
       ],
diff --git a/tsconfig.base.all.json b/tsconfig.base.all.json
index 021d69689686fc..5c2666699577c8 100644
--- a/tsconfig.base.all.json
+++ b/tsconfig.base.all.json
@@ -24,7 +24,6 @@
       "@fluentui/react-icons-northstar": ["packages/fluentui/react-icons-northstar/src/index.ts"],
       "@fluentui/react-northstar": ["packages/fluentui/react-northstar/src/index.ts"],
       "@fluentui/react-northstar-fela-renderer": ["packages/fluentui/react-northstar-fela-renderer/src/index.ts"],
-      "@fluentui/react-northstar-styles-renderer": ["packages/fluentui/react-northstar-styles-renderer/src/index.ts"],
       "@fluentui/react-northstar-prototypes": ["packages/fluentui/react-northstar-prototypes/src/index.ts"],
       "@fluentui/react-proptypes": ["packages/fluentui/react-proptypes/src/index.ts"],
       "@fluentui/styles": ["packages/fluentui/styles/src/index.ts"],
diff --git a/tsconfig.base.v0.json b/tsconfig.base.v0.json
index 0e25e668481974..1f701578ac2a2f 100644
--- a/tsconfig.base.v0.json
+++ b/tsconfig.base.v0.json
@@ -34,7 +34,6 @@
       "@fluentui/react-icons-northstar": ["packages/fluentui/react-icons-northstar/src/index.ts"],
       "@fluentui/react-northstar": ["packages/fluentui/react-northstar/src/index.ts"],
       "@fluentui/react-northstar-fela-renderer": ["packages/fluentui/react-northstar-fela-renderer/src/index.ts"],
-      "@fluentui/react-northstar-styles-renderer": ["packages/fluentui/react-northstar-styles-renderer/src/index.ts"],
       "@fluentui/react-northstar-prototypes": ["packages/fluentui/react-northstar-prototypes/src/index.ts"],
       "@fluentui/react-proptypes": ["packages/fluentui/react-proptypes/src/index.ts"],
       "@fluentui/styles": ["packages/fluentui/styles/src/index.ts"]
diff --git a/yarn.lock b/yarn.lock
index c58a2765f20945..9595bed361115f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11808,16 +11808,6 @@ fela-dom@^10.6.1:
     fast-loops "^1.0.1"
     fela-utils "^10.6.1"
 
-fela-dom@^11.7.0:
-  version "11.7.0"
-  resolved "https://registry.yarnpkg.com/fela-dom/-/fela-dom-11.7.0.tgz#8706aaedf348af6e2d761d38c0f97d8d6607a99b"
-  integrity sha512-mYboADGGQc/EihhyPOs8Xo2aJ0cOQI4q3+aWQ11KPzaCAT3TTVdXuTslT5QeXoE6cT6nS77GvvrRzXb3U/gY6Q==
-  dependencies:
-    css-in-js-utils "^3.0.0"
-    fast-loops "^1.0.1"
-    fela-utils "^11.7.0"
-    sort-css-media-queries "^1.4.3"
-
 fela-plugin-custom-property@^10.6.1:
   version "10.8.2"
   resolved "https://registry.yarnpkg.com/fela-plugin-custom-property/-/fela-plugin-custom-property-10.8.2.tgz#41847826be4bf4495eee5072df16228f5f8827a8"
@@ -21258,11 +21248,6 @@ socks@^2.7.1:
     ip-address "^9.0.5"
     smart-buffer "^4.2.0"
 
-sort-css-media-queries@^1.4.3:
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/sort-css-media-queries/-/sort-css-media-queries-1.5.4.tgz#24182b12002a13d01ba943ddf74f5098d7c244ce"
-  integrity sha512-YP5W/h4Sid/YP7Lp87ejJ5jP13/Mtqt2vx33XyhO+IAugKlufRPbOrPlIiEUuxmpNBSBd3EeeQpFhdu3RfI2Ag==
-
 sort-keys-length@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/sort-keys-length/-/sort-keys-length-1.0.1.tgz#9cb6f4f4e9e48155a6aa0671edd336ff1479a188"