feat: improve React 18 support

microsoft · Jul 18, 2023 · a73330f · a73330f
1 parent c7fd533
commit a73330f
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 12 deletions.
diff --git a/packages/react/src/__styles.ts b/packages/react/src/__styles.ts
@@ -1,8 +1,9 @@
-import { __styles as vanillaStyles } from '@griffel/core';
+import { reduceToClassNameForSlots } from '@griffel/core';
 import type { CSSClassesMapBySlot, CSSRulesByBucket } from '@griffel/core';
 
 import { useRenderer } from './RendererContext';
 import { useTextDirection } from './TextDirectionContext';
+import { useInsertionEffect } from './useInsertionEffect';
 
 /**
  * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
@@ -14,12 +15,31 @@ export function __styles<Slots extends string>(
   classesMapBySlot: CSSClassesMapBySlot<Slots>,
   cssRules: CSSRulesByBucket,
 ) {
-  const getStyles = vanillaStyles(classesMapBySlot, cssRules);
+  let ltrClassNamesForSlots: Record<Slots, string> | null = null;
+  let rtlClassNamesForSlots: Record<Slots, string> | null = null;
 
-  return function useClasses(): Record<Slots, string> {
+  function computeClasses(): Record<Slots, string> {
     const dir = useTextDirection();
     const renderer = useRenderer();
 
-    return getStyles({ dir, renderer });
-  };
+    const isLTR = dir === 'ltr';
+
+    if (isLTR) {
+      if (ltrClassNamesForSlots === null) {
+        ltrClassNamesForSlots = reduceToClassNameForSlots(classesMapBySlot, dir);
+      }
+    } else {
+      if (rtlClassNamesForSlots === null) {
+        rtlClassNamesForSlots = reduceToClassNameForSlots(classesMapBySlot, dir);
+      }
+    }
+
+    useInsertionEffect(() => {
+      renderer.insertCSSRules(cssRules!);
+    }, [isLTR, renderer]);
+
+    return isLTR ? (ltrClassNamesForSlots as Record<Slots, string>) : (rtlClassNamesForSlots as Record<Slots, string>);
+  }
+
+  return computeClasses;
 }
diff --git a/packages/react/src/makeStyles.ts b/packages/react/src/makeStyles.ts
@@ -1,13 +1,12 @@
-import { makeStyles as vanillaMakeStyles } from '@griffel/core';
-import type { GriffelStyle } from '@griffel/core';
+import { reduceToClassNameForSlots, resolveStyleRulesForSlots } from '@griffel/core';
+import type { CSSClassesMapBySlot, CSSRulesByBucket, GriffelStyle } from '@griffel/core';
 
 import { isInsideComponent } from './utils/isInsideComponent';
 import { useRenderer } from './RendererContext';
 import { useTextDirection } from './TextDirectionContext';
+import { useInsertionEffect } from './useInsertionEffect';
 
 export function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {
-  const getStyles = vanillaMakeStyles(stylesBySlots);
-
   if (process.env.NODE_ENV !== 'production') {
     if (isInsideComponent()) {
       throw new Error(
@@ -19,10 +18,38 @@ export function makeStyles<Slots extends string | number>(stylesBySlots: Record<
     }
   }
 
-  return function useClasses(): Record<Slots, string> {
+  let classesMapBySlot: CSSClassesMapBySlot<Slots> | null = null;
+  let cssRules: CSSRulesByBucket | null = null;
+
+  let ltrClassNamesForSlots: Record<Slots, string> | null = null;
+  let rtlClassNamesForSlots: Record<Slots, string> | null = null;
+
+  function computeClasses(): Record<Slots, string> {
     const dir = useTextDirection();
     const renderer = useRenderer();
 
-    return getStyles({ dir, renderer });
-  };
+    const isLTR = dir === 'ltr';
+
+    if (classesMapBySlot === null) {
+      [classesMapBySlot, cssRules] = resolveStyleRulesForSlots(stylesBySlots);
+    }
+
+    if (isLTR) {
+      if (ltrClassNamesForSlots === null) {
+        ltrClassNamesForSlots = reduceToClassNameForSlots(classesMapBySlot, dir);
+      }
+    } else {
+      if (rtlClassNamesForSlots === null) {
+        rtlClassNamesForSlots = reduceToClassNameForSlots(classesMapBySlot, dir);
+      }
+    }
+
+    useInsertionEffect(() => {
+      renderer.insertCSSRules(cssRules!);
+    }, [isLTR, renderer]);
+
+    return isLTR ? (ltrClassNamesForSlots as Record<Slots, string>) : (rtlClassNamesForSlots as Record<Slots, string>);
+  }
+
+  return computeClasses;
 }
diff --git a/packages/react/src/useInsertionEffect.ts b/packages/react/src/useInsertionEffect.ts
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+// @ts-expect-error
+export const useInsertionEffect = React['useInsertion' + 'Effect']
+  ? // @ts-expect-error
+    React['useInsertion' + 'Effect']
+  : React.useLayoutEffect;