wip

microsoft · Mar 10, 2022 · 37438c6 · 37438c6
1 parent 2f5bb4b
commit 37438c6
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 12 deletions.
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -43,6 +43,7 @@ export { makeStyles } from './makeStyles';
 export { resolveStyleRulesForSlots } from './resolveStyleRulesForSlots';
 
 // Private exports, are used by build time transforms
+export { reduceToClassNameForSlots } from './runtime/reduceToClassNameForSlots';
 export { resolveStyleRules } from './runtime/resolveStyleRules';
 export { __styles } from './__styles';
 

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,9 +1,10 @@
-import { makeStyles as vanillaMakeStyles } from '@griffel/core';
+import { reduceToClassNameForSlots, resolveStyleRulesForSlots } from '@griffel/core';
 import * as React from 'react';
-import type { GriffelStyle } from '@griffel/core';
+import type { CSSClassesMapBySlot, CSSRulesByBucket, GriffelStyle } from '@griffel/core';
 
 import { useRenderer } from './RendererContext';
 import { useTextDirection } from './TextDirectionContext';
+import { useInsertionEffect } from './useInsertionEffect';
 
 function isInsideComponent() {
   try {
@@ -16,8 +17,6 @@ function isInsideComponent() {
 }
 
 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(
@@ -29,10 +28,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;