-
Notifications
You must be signed in to change notification settings - Fork 59
/
__styles.ts
45 lines (37 loc) · 1.44 KB
/
__styles.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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.
*
* @internal
*/
// eslint-disable-next-line @typescript-eslint/naming-convention
export function __styles<Slots extends string>(
classesMapBySlot: CSSClassesMapBySlot<Slots>,
cssRules: CSSRulesByBucket,
) {
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();
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;
}