createGetSelector.js
1.88 KB
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
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _excludeVariablesFromRoot = _interopRequireDefault(require("./excludeVariablesFromRoot"));
var _default = theme => (colorScheme, css) => {
const root = theme.rootSelector || ':root';
const selector = theme.colorSchemeSelector;
let rule = selector;
if (selector === 'class') {
rule = '.%s';
}
if (selector === 'data') {
rule = '[data-%s]';
}
if (selector?.startsWith('data-') && !selector.includes('%s')) {
// 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
rule = `[${selector}="%s"]`;
}
if (theme.defaultColorScheme === colorScheme) {
if (colorScheme === 'dark') {
const excludedVariables = {};
(0, _excludeVariablesFromRoot.default)(theme.cssVarPrefix).forEach(cssVar => {
excludedVariables[cssVar] = css[cssVar];
delete css[cssVar];
});
if (rule === 'media') {
return {
[root]: css,
[`@media (prefers-color-scheme: dark)`]: {
[root]: excludedVariables
}
};
}
if (rule) {
return {
[rule.replace('%s', colorScheme)]: excludedVariables,
[`${root}, ${rule.replace('%s', colorScheme)}`]: css
};
}
return {
[root]: {
...css,
...excludedVariables
}
};
}
if (rule && rule !== 'media') {
return `${root}, ${rule.replace('%s', String(colorScheme))}`;
}
} else if (colorScheme) {
if (rule === 'media') {
return {
[`@media (prefers-color-scheme: ${String(colorScheme)})`]: {
[root]: css
}
};
}
if (rule) {
return rule.replace('%s', String(colorScheme));
}
}
return root;
};
exports.default = _default;