-
Notifications
You must be signed in to change notification settings - Fork 59
/
makeStyles.ts
65 lines (53 loc) · 2.06 KB
/
makeStyles.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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import { reduceToClassNameForSlots, resolveStyleRulesForSlots } from '@griffel/core';
import * as React from 'react';
import type { CSSClassesMapBySlot, CSSRulesByBucket, GriffelStyle } from '@griffel/core';
import { useRenderer } from './RendererContext';
import { useTextDirection } from './TextDirectionContext';
import { useInsertionEffect } from './useInsertionEffect';
function isInsideComponent() {
try {
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useContext({} as unknown as React.Context<unknown>);
return true;
} catch (e) {
return false;
}
}
export function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {
if (process.env.NODE_ENV !== 'production') {
if (isInsideComponent()) {
throw new Error(
[
"makeStyles(): this function cannot be called in component's scope.",
'All makeStyles() calls should be top level i.e. in a root scope of a file.',
].join(' '),
);
}
}
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();
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;
}