/
generateDirectionalStyles.js
68 lines (57 loc) · 2.04 KB
/
generateDirectionalStyles.js
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
66
67
68
import rtlCSSJS from 'rtl-css-js';
import { LTR_SELECTOR, RTL_SELECTOR } from './withRTLExtension';
function isEmpty(obj) {
return obj && Object.keys(obj).length === 0;
}
function separateDirectionalStyles(originalStyles, autoRTLStyles) {
const sharedStyles = {};
const ltrStyles = { ...originalStyles };
const rtlStyles = {};
let hasRTLStyles = false;
Object.entries(autoRTLStyles)
.forEach(([key, value]) => {
if (value === originalStyles[key]) {
delete ltrStyles[key];
sharedStyles[key] = value;
return;
}
if (value && typeof value === 'object') {
delete ltrStyles[key];
// In some cases (pseudoselectors, matchmedia queries, etc.), the style
// value may be an object, and we need to recurse.
const recursiveStyles = separateDirectionalStyles(originalStyles[key], value);
if (recursiveStyles != null) {
hasRTLStyles = true;
const {
sharedStyles: recursiveSharedStyles,
ltrStyles: recursiveLtrStyles,
rtlStyles: recursiveRtlStyles,
} = recursiveStyles;
if (recursiveSharedStyles) sharedStyles[key] = recursiveSharedStyles;
if (recursiveLtrStyles) ltrStyles[key] = recursiveLtrStyles;
if (recursiveRtlStyles) rtlStyles[key] = recursiveRtlStyles;
} else {
sharedStyles[key] = value;
}
} else if (value != null) {
hasRTLStyles = true;
rtlStyles[key] = value;
}
});
if (!hasRTLStyles) return null;
return {
...!isEmpty(sharedStyles) && { sharedStyles },
...!isEmpty(ltrStyles) && { ltrStyles },
...!isEmpty(rtlStyles) && { rtlStyles },
};
}
export default function generateDirectionalStyles(originalStyles) {
const directionalStyles = separateDirectionalStyles(originalStyles, rtlCSSJS(originalStyles));
if (!directionalStyles) return null;
const { sharedStyles, ltrStyles, rtlStyles } = directionalStyles;
return {
...sharedStyles,
[LTR_SELECTOR]: ltrStyles,
[RTL_SELECTOR]: rtlStyles,
};
}