@tamagui/core 1.0.0-alpha.1 → 1.0.0-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/dist/cjs/constants/constants.js +50 -0
- package/{_ → dist/cjs}/constants/constants.js.map +2 -2
- package/dist/cjs/constants/platform.js +43 -0
- package/dist/cjs/constants/platform.js.map +7 -0
- package/dist/cjs/constants/pseudos.js +25 -0
- package/{_ → dist/cjs}/constants/pseudos.js.map +2 -2
- package/{_ → dist/cjs}/constants/rnw.js +9 -3
- package/{_ → dist/cjs}/constants/rnw.js.map +2 -2
- package/dist/cjs/createComponent.js +531 -0
- package/dist/cjs/createComponent.js.map +7 -0
- package/dist/cjs/createFont.js +50 -0
- package/dist/cjs/createFont.js.map +7 -0
- package/{_ → dist/cjs}/createShorthands.js +9 -3
- package/{_ → dist/cjs}/createShorthands.js.map +2 -2
- package/dist/cjs/createTamagui.js +206 -0
- package/dist/cjs/createTamagui.js.map +7 -0
- package/dist/cjs/createTheme.js +42 -0
- package/{_ → dist/cjs}/createTheme.js.map +2 -2
- package/dist/cjs/createTokens.js +55 -0
- package/dist/cjs/createTokens.js.map +7 -0
- package/dist/cjs/createVariable.js +47 -0
- package/dist/cjs/createVariable.js.map +7 -0
- package/dist/cjs/helpers/addStylesUsingClassname.js +79 -0
- package/dist/cjs/helpers/addStylesUsingClassname.js.map +7 -0
- package/dist/cjs/helpers/createMediaStyle.js +56 -0
- package/{_ → dist/cjs}/helpers/createMediaStyle.js.map +2 -2
- package/dist/cjs/helpers/createPropMapper.js +190 -0
- package/dist/cjs/helpers/createPropMapper.js.map +7 -0
- package/dist/cjs/helpers/createTamaguiProvider.js +74 -0
- package/dist/cjs/helpers/createTamaguiProvider.js.map +7 -0
- package/dist/cjs/helpers/extendStaticConfig.js +82 -0
- package/dist/cjs/helpers/extendStaticConfig.js.map +7 -0
- package/dist/cjs/helpers/fixNativeShadow.js +14 -0
- package/dist/cjs/helpers/fixNativeShadow.js.map +7 -0
- package/{_ → dist/cjs}/helpers/fixNativeShadow.native.js +9 -3
- package/{_ → dist/cjs}/helpers/fixNativeShadow.native.js.map +2 -2
- package/dist/cjs/helpers/getSplitStyles.js +180 -0
- package/dist/cjs/helpers/getSplitStyles.js.map +7 -0
- package/dist/cjs/helpers/getStylesAtomic.js +117 -0
- package/{_ → dist/cjs}/helpers/getStylesAtomic.js.map +2 -2
- package/dist/cjs/helpers/getStylesAtomic.native.js +16 -0
- package/dist/cjs/helpers/getStylesAtomic.native.js.map +7 -0
- package/dist/cjs/helpers/insertStyleRule.js +46 -0
- package/{_ → dist/cjs}/helpers/insertStyleRule.js.map +2 -2
- package/dist/cjs/helpers/isObj.js +13 -0
- package/dist/cjs/helpers/isObj.js.map +7 -0
- package/dist/cjs/helpers/isTamaguiElement.js +33 -0
- package/dist/cjs/helpers/isTamaguiElement.js.map +7 -0
- package/dist/cjs/helpers/matchMedia.js +24 -0
- package/dist/cjs/helpers/matchMedia.js.map +7 -0
- package/dist/cjs/helpers/matchMedia.native.js +31 -0
- package/dist/cjs/helpers/matchMedia.native.js.map +7 -0
- package/dist/cjs/helpers/themeable.js +78 -0
- package/{_ → dist/cjs}/helpers/themeable.js.map +2 -2
- package/dist/cjs/helpers/validate.js +82 -0
- package/dist/cjs/helpers/validate.js.map +7 -0
- package/dist/cjs/hooks/useConstant.js +37 -0
- package/{_ → dist/cjs}/hooks/useConstant.js.map +2 -2
- package/dist/cjs/hooks/useFeatures.js +100 -0
- package/dist/cjs/hooks/useFeatures.js.map +7 -0
- package/{_ → dist/cjs}/hooks/useMedia.js +59 -28
- package/dist/cjs/hooks/useMedia.js.map +7 -0
- package/dist/cjs/hooks/usePressable.js +50 -0
- package/{_ → dist/cjs}/hooks/usePressable.js.map +2 -2
- package/dist/cjs/hooks/useTheme.js +111 -0
- package/dist/cjs/hooks/useTheme.js.map +7 -0
- package/dist/cjs/index.js +55 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/static/postProcessStyles.js +40 -0
- package/{_ → dist/cjs}/static/postProcessStyles.js.map +2 -2
- package/dist/cjs/static.js +34 -0
- package/dist/cjs/static.js.map +7 -0
- package/dist/cjs/styled.js +72 -0
- package/dist/cjs/styled.js.map +7 -0
- package/dist/cjs/types.js +4 -0
- package/dist/cjs/types.js.map +7 -0
- package/dist/cjs/views/Animated.js +129 -0
- package/{_ → dist/cjs}/views/Animated.js.map +2 -2
- package/dist/cjs/views/Stack.js +51 -0
- package/{_ → dist/cjs}/views/Stack.js.map +2 -2
- package/dist/cjs/views/Text.js +93 -0
- package/{_ → dist/cjs}/views/Text.js.map +2 -2
- package/dist/cjs/views/TextAncestorContext.js +41 -0
- package/{_ → dist/cjs}/views/TextAncestorContext.js.map +2 -2
- package/dist/cjs/views/Theme.js +88 -0
- package/dist/cjs/views/Theme.js.map +7 -0
- package/dist/cjs/views/ThemeContext.js +29 -0
- package/{_ → dist/cjs}/views/ThemeContext.js.map +2 -2
- package/dist/cjs/views/ThemeInverse.js +48 -0
- package/{_ → dist/cjs}/views/ThemeInverse.js.map +3 -3
- package/dist/cjs/views/ThemeManagerContext.js +84 -0
- package/dist/cjs/views/ThemeManagerContext.js.map +7 -0
- package/dist/cjs/views/ThemeProvider.js +67 -0
- package/{_ → dist/cjs}/views/ThemeProvider.js.map +2 -2
- package/dist/createComponent.js +50 -32
- package/dist/createComponent.js.map +2 -2
- package/dist/createFont.js +4 -0
- package/dist/createFont.js.map +2 -2
- package/dist/createTamagui.js +11 -2
- package/dist/createTamagui.js.map +2 -2
- package/dist/createTokens.js +4 -0
- package/dist/createTokens.js.map +2 -2
- package/dist/createVariable.js +3 -0
- package/dist/createVariable.js.map +2 -2
- package/dist/helpers/createPropMapper.js +2 -2
- package/dist/helpers/createPropMapper.js.map +1 -1
- package/dist/helpers/getSplitStyles.js +13 -23
- package/dist/helpers/getSplitStyles.js.map +2 -2
- package/dist/helpers/isComponent.js +10 -0
- package/dist/helpers/isComponent.js.map +7 -0
- package/dist/helpers/isTamaguiComponent.js +10 -0
- package/dist/helpers/isTamaguiComponent.js.map +7 -0
- package/dist/helpers/isTamaguiElement.js +10 -0
- package/dist/helpers/isTamaguiElement.js.map +7 -0
- package/dist/helpers/matchMedia.js +3 -0
- package/dist/helpers/matchMedia.js.map +2 -2
- package/dist/helpers/matchMedia.native.js +1 -0
- package/dist/helpers/matchMedia.native.js.map +2 -2
- package/dist/helpers/validate.js +60 -0
- package/dist/helpers/validate.js.map +7 -0
- package/dist/helpers/validateConfig.js +46 -0
- package/dist/helpers/validateConfig.js.map +7 -0
- package/dist/helpers/validateTokens.js +29 -0
- package/dist/helpers/validateTokens.js.map +7 -0
- package/dist/hooks/useFeatures.js +39 -51
- package/dist/hooks/useFeatures.js.map +2 -2
- package/dist/hooks/useMedia.js +1 -1
- package/dist/hooks/useMedia.js.map +2 -2
- package/dist/hooks/useTheme.js +5 -9
- package/dist/hooks/useTheme.js.map +2 -2
- package/dist/index.cjs +273 -196
- package/dist/index.cjs.map +3 -3
- package/dist/index.js +1 -2
- package/dist/index.js.map +2 -2
- package/dist/views/Theme.js +16 -7
- package/dist/views/Theme.js.map +2 -2
- package/dist/views/ThemeInverse.js +0 -1
- package/dist/views/ThemeInverse.js.map +2 -2
- package/dist/views/ThemeManagerContext.js +11 -5
- package/dist/views/ThemeManagerContext.js.map +2 -2
- package/package.json +19 -10
- package/src/createComponent.tsx +57 -41
- package/src/createFont.ts +5 -0
- package/src/createTamagui.ts +11 -1
- package/src/createTokens.ts +6 -1
- package/src/createVariable.ts +4 -0
- package/src/helpers/createPropMapper.ts +2 -2
- package/src/helpers/getSplitStyles.tsx +16 -26
- package/src/helpers/isTamaguiElement.tsx +5 -0
- package/src/helpers/matchMedia.native.ts +3 -0
- package/src/helpers/matchMedia.ts +9 -1
- package/src/helpers/validate.ts +59 -0
- package/src/hooks/useFeatures.tsx +54 -53
- package/src/hooks/useMedia.tsx +2 -2
- package/src/hooks/useTheme.tsx +7 -8
- package/src/index.ts +1 -2
- package/src/types.tsx +3 -2
- package/src/views/Theme.tsx +26 -9
- package/src/views/ThemeInverse.tsx +0 -1
- package/src/views/ThemeManagerContext.tsx +18 -6
- package/types.d.ts +10 -9
- package/.ultra.cache.json +0 -1
- package/_/constants/constants.js +0 -14
- package/_/constants/platform.js +0 -20
- package/_/constants/platform.js.map +0 -7
- package/_/constants/pseudos.js +0 -18
- package/_/createComponent.js +0 -427
- package/_/createComponent.js.map +0 -7
- package/_/createTamagui.js +0 -122
- package/_/createTamagui.js.map +0 -7
- package/_/createTheme.js +0 -20
- package/_/createTokens.js +0 -29
- package/_/createTokens.js.map +0 -7
- package/_/createVariable.js +0 -22
- package/_/createVariable.js.map +0 -7
- package/_/helpers/addStylesUsingClassname.js +0 -32
- package/_/helpers/addStylesUsingClassname.js.map +0 -7
- package/_/helpers/createMediaStyle.js +0 -34
- package/_/helpers/createTamaguiProvider.js +0 -42
- package/_/helpers/createTamaguiProvider.js.map +0 -7
- package/_/helpers/extendStaticConfig.js +0 -176
- package/_/helpers/extendStaticConfig.js.map +0 -7
- package/_/helpers/fixNativeShadow.js +0 -8
- package/_/helpers/fixNativeShadow.js.map +0 -7
- package/_/helpers/getSplitStyles.js +0 -160
- package/_/helpers/getSplitStyles.js.map +0 -7
- package/_/helpers/getStylesAtomic.js +0 -84
- package/_/helpers/getStylesAtomic.native.js +0 -10
- package/_/helpers/getStylesAtomic.native.js.map +0 -7
- package/_/helpers/insertStyleRule.js +0 -24
- package/_/helpers/matchMedia.js +0 -15
- package/_/helpers/matchMedia.js.map +0 -7
- package/_/helpers/matchMedia.native.js +0 -8
- package/_/helpers/matchMedia.native.js.map +0 -7
- package/_/helpers/themeable.js +0 -26
- package/_/hooks/useConstant.js +0 -15
- package/_/hooks/useFeatures.js +0 -75
- package/_/hooks/useFeatures.js.map +0 -7
- package/_/hooks/useForceUpdate.js +0 -28
- package/_/hooks/useForceUpdate.js.map +0 -7
- package/_/hooks/useMedia.js.map +0 -7
- package/_/hooks/usePressable.js +0 -14
- package/_/hooks/useTheme.js +0 -94
- package/_/hooks/useTheme.js.map +0 -7
- package/_/index.js +0 -30
- package/_/index.js.map +0 -7
- package/_/static/postProcessStyles.js +0 -18
- package/_/static.js +0 -12
- package/_/static.js.map +0 -7
- package/_/styled.js +0 -21
- package/_/styled.js.map +0 -7
- package/_/types.js +0 -1
- package/_/types.js.map +0 -7
- package/_/views/Animated.js +0 -79
- package/_/views/Stack.js +0 -12
- package/_/views/Text.js +0 -60
- package/_/views/TextAncestorContext.js +0 -19
- package/_/views/Theme.js +0 -57
- package/_/views/Theme.js.map +0 -7
- package/_/views/ThemeContext.js +0 -6
- package/_/views/ThemeInverse.js +0 -27
- package/_/views/ThemeManagerContext.js +0 -56
- package/_/views/ThemeManagerContext.js.map +0 -7
- package/_/views/ThemeProvider.js +0 -45
- package/src/hooks/useForceUpdate.tsx +0 -26
- package/src/views/SafeAreaProvider.tsx +0 -33
- package/tsconfig.json +0 -8
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../src/createShorthands.ts"],
|
|
4
4
|
"sourcesContent": ["// type helper\n\nexport function createShorthands<A extends Record<string, string>>(shorthands: A): A {\n return Object.freeze(shorthands) as any\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;AAAA;AAAA;AAAA;AAEO,0BAA4D,YAAkB;AACnF,SAAO,OAAO,OAAO;AAAA;AADP;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
25
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
26
|
+
var __export = (target, all) => {
|
|
27
|
+
__markAsModule(target);
|
|
28
|
+
for (var name in all)
|
|
29
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
30
|
+
};
|
|
31
|
+
var __reExport = (target, module2, desc) => {
|
|
32
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
33
|
+
for (let key of __getOwnPropNames(module2))
|
|
34
|
+
if (!__hasOwnProp.call(target, key) && key !== "default")
|
|
35
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
36
|
+
}
|
|
37
|
+
return target;
|
|
38
|
+
};
|
|
39
|
+
var __toModule = (module2) => {
|
|
40
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
41
|
+
};
|
|
42
|
+
__export(exports, {
|
|
43
|
+
createTamagui: () => createTamagui,
|
|
44
|
+
getHasConfigured: () => getHasConfigured,
|
|
45
|
+
getTamagui: () => getTamagui,
|
|
46
|
+
getThemeParentClassName: () => getThemeParentClassName,
|
|
47
|
+
getTokens: () => getTokens,
|
|
48
|
+
onConfiguredOnce: () => onConfiguredOnce
|
|
49
|
+
});
|
|
50
|
+
var import_helpers = __toModule(require("@tamagui/helpers"));
|
|
51
|
+
var import_createVariable = __toModule(require("./createVariable"));
|
|
52
|
+
var import_createTamaguiProvider = __toModule(require("./helpers/createTamaguiProvider"));
|
|
53
|
+
var import_validate = __toModule(require("./helpers/validate"));
|
|
54
|
+
var import_useMedia = __toModule(require("./hooks/useMedia"));
|
|
55
|
+
let conf;
|
|
56
|
+
const getHasConfigured = /* @__PURE__ */ __name(() => !!conf, "getHasConfigured");
|
|
57
|
+
const getTamagui = /* @__PURE__ */ __name(() => conf, "getTamagui");
|
|
58
|
+
const getTokens = /* @__PURE__ */ __name(() => conf.tokensParsed, "getTokens");
|
|
59
|
+
const configListeners = new Set();
|
|
60
|
+
const onConfiguredOnce = /* @__PURE__ */ __name((cb) => {
|
|
61
|
+
if (conf) {
|
|
62
|
+
cb(conf);
|
|
63
|
+
} else {
|
|
64
|
+
configListeners.add(cb);
|
|
65
|
+
}
|
|
66
|
+
}, "onConfiguredOnce");
|
|
67
|
+
const PREFIX = `theme--`;
|
|
68
|
+
function createTamagui(config) {
|
|
69
|
+
if (process.env.NODE_ENV === "development") {
|
|
70
|
+
if (!config["parsed"]) {
|
|
71
|
+
(0, import_validate.validateConfig)(config);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
if (conf) {
|
|
75
|
+
console.warn("Called createTamagui twice! Should never do so");
|
|
76
|
+
}
|
|
77
|
+
(0, import_useMedia.configureMedia)({
|
|
78
|
+
queries: config.media,
|
|
79
|
+
defaultActive: config.mediaQueryDefaultActive
|
|
80
|
+
});
|
|
81
|
+
const themeConfig = (() => {
|
|
82
|
+
let cssRules = [];
|
|
83
|
+
let tokenRule = `:root {`;
|
|
84
|
+
const varsByValue = new Map();
|
|
85
|
+
const addVar = /* @__PURE__ */ __name((v) => {
|
|
86
|
+
varsByValue[v.val] = v;
|
|
87
|
+
const rule = `--${v.name}:${typeof v.val === "number" ? `${v.val}px` : v.val};`;
|
|
88
|
+
tokenRule += rule;
|
|
89
|
+
}, "addVar");
|
|
90
|
+
for (const key in config.tokens) {
|
|
91
|
+
for (const skey in config.tokens[key]) {
|
|
92
|
+
const val = config.tokens[key][skey];
|
|
93
|
+
if (key === "font") {
|
|
94
|
+
for (const fkey in val) {
|
|
95
|
+
if (fkey === "family") {
|
|
96
|
+
addVar(val[fkey]);
|
|
97
|
+
} else {
|
|
98
|
+
for (const fskey in val[fkey]) {
|
|
99
|
+
addVar(val[fkey][fskey]);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
} else {
|
|
104
|
+
addVar(val);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
cssRules.push(`${tokenRule}
|
|
109
|
+
}`);
|
|
110
|
+
for (const themeName in config.themes) {
|
|
111
|
+
config.themes[themeName] = __spreadValues({}, config.themes[themeName]);
|
|
112
|
+
const theme = config.themes[themeName];
|
|
113
|
+
let vars = "";
|
|
114
|
+
for (const themeKey in theme) {
|
|
115
|
+
const val = theme[themeKey];
|
|
116
|
+
const getVariableCSS = /* @__PURE__ */ __name((inv) => {
|
|
117
|
+
const v = varsByValue[inv] ?? inv;
|
|
118
|
+
return (0, import_createVariable.isVariable)(v) ? `--${themeKey}:var(--${v.name});` : `--${themeKey}:${v};`;
|
|
119
|
+
}, "getVariableCSS");
|
|
120
|
+
vars += getVariableCSS(val);
|
|
121
|
+
if (!(0, import_createVariable.isVariable)(val)) {
|
|
122
|
+
theme[themeKey] = (0, import_createVariable.createVariable)({
|
|
123
|
+
name: themeKey,
|
|
124
|
+
val
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
const [themeClassName, parentName] = themeName.includes("-") ? themeName.split("-") : [themeName, ""];
|
|
129
|
+
const oppositeName = parentName === "dark" ? "light" : "dark";
|
|
130
|
+
const cssParentSel = parentName ? `.${PREFIX}${parentName}` : "";
|
|
131
|
+
const cssChildSel = `.${PREFIX}${themeClassName}`;
|
|
132
|
+
const cssSel = `${cssParentSel} ${cssChildSel}`;
|
|
133
|
+
const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {
|
|
134
|
+
${vars}
|
|
135
|
+
}`;
|
|
136
|
+
cssRules.push(cssRule);
|
|
137
|
+
}
|
|
138
|
+
Object.freeze(cssRules);
|
|
139
|
+
return {
|
|
140
|
+
cssRules,
|
|
141
|
+
css: cssRules.join("\n")
|
|
142
|
+
};
|
|
143
|
+
})();
|
|
144
|
+
const tokensParsed = parseTokens(config.tokens);
|
|
145
|
+
const themeParsed = {};
|
|
146
|
+
const firstKey = Object.keys(config.themes)[0];
|
|
147
|
+
for (const key in config.themes[firstKey]) {
|
|
148
|
+
const val = config.themes[firstKey][key].val;
|
|
149
|
+
themeParsed[`$${key}`] = new import_createVariable.Variable({ val, name: key });
|
|
150
|
+
}
|
|
151
|
+
const next = __spreadProps(__spreadValues({
|
|
152
|
+
shorthands: {}
|
|
153
|
+
}, config), {
|
|
154
|
+
Provider: (0, import_createTamaguiProvider.createTamaguiProvider)(__spreadValues({
|
|
155
|
+
defaultTheme: "light"
|
|
156
|
+
}, config)),
|
|
157
|
+
themeConfig,
|
|
158
|
+
themeParsed,
|
|
159
|
+
tokensParsed,
|
|
160
|
+
parsed: true,
|
|
161
|
+
getCSS() {
|
|
162
|
+
return `${themeConfig.css}
|
|
163
|
+
${[...(0, import_helpers.getStyleRules)()].join("\n")}`;
|
|
164
|
+
}
|
|
165
|
+
});
|
|
166
|
+
conf = next;
|
|
167
|
+
if (configListeners.size) {
|
|
168
|
+
configListeners.forEach((cb) => cb(next));
|
|
169
|
+
configListeners.clear();
|
|
170
|
+
}
|
|
171
|
+
return next;
|
|
172
|
+
}
|
|
173
|
+
__name(createTamagui, "createTamagui");
|
|
174
|
+
function getThemeParentClassName(themeName) {
|
|
175
|
+
return `theme-parent ${themeName ? `${PREFIX}${themeName}` : ""}`;
|
|
176
|
+
}
|
|
177
|
+
__name(getThemeParentClassName, "getThemeParentClassName");
|
|
178
|
+
const parseTokens = /* @__PURE__ */ __name((tokens) => {
|
|
179
|
+
const res = {};
|
|
180
|
+
for (const key in tokens) {
|
|
181
|
+
res[key] = {};
|
|
182
|
+
if (key === "font") {
|
|
183
|
+
for (const family in tokens.font) {
|
|
184
|
+
const obj = {};
|
|
185
|
+
res.font[`$${family}`] = obj;
|
|
186
|
+
for (const attrKey in tokens.font[family]) {
|
|
187
|
+
const attr = tokens.font[family][attrKey];
|
|
188
|
+
if (attrKey === "family") {
|
|
189
|
+
obj[attrKey] = attr;
|
|
190
|
+
continue;
|
|
191
|
+
}
|
|
192
|
+
obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {
|
|
193
|
+
acc[`$${cur}`] = attr[cur];
|
|
194
|
+
return acc;
|
|
195
|
+
}, {});
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
continue;
|
|
199
|
+
}
|
|
200
|
+
for (const skey in tokens[key]) {
|
|
201
|
+
res[key][`$${skey}`] = tokens[key][skey];
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
return res;
|
|
205
|
+
}, "parseTokens");
|
|
206
|
+
//# sourceMappingURL=createTamagui.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/createTamagui.ts"],
|
|
4
|
+
"sourcesContent": ["import { getStyleRules } from '@tamagui/helpers'\n\nimport { Variable, createVariable, isVariable } from './createVariable'\nimport { createTamaguiProvider } from './helpers/createTamaguiProvider'\nimport { validateConfig } from './helpers/validate'\nimport { configureMedia } from './hooks/useMedia'\nimport {\n CreateTamaguiConfig,\n GenericTamaguiConfig,\n MediaQueryKey,\n TamaguiInternalConfig,\n TamaguiProviderProps,\n} from './types'\n\nexport type CreateTamaguiProps = TamaguiProviderProps &\n // we omit and re-declare it because we need to allow instantation types to be flexible\n // user then re-defines the types after createTamagui returns the typed object they want\n Omit<GenericTamaguiConfig, 'themes'> & {\n themes: {\n [key: string]: {\n [key: string]: string | number | Variable\n }\n }\n // for ssr/native, will default to active\n mediaQueryDefaultActive?: MediaQueryKey[]\n }\n\nlet conf: TamaguiInternalConfig | null\n\nexport const getHasConfigured = () => !!conf\n\nexport const getTamagui = () => conf!\nexport const getTokens = () => conf!.tokensParsed\n\ntype ConfigListener = (conf: TamaguiInternalConfig) => void\nconst configListeners = new Set<ConfigListener>()\nexport const onConfiguredOnce = (cb: ConfigListener) => {\n if (conf) {\n cb(conf)\n } else {\n configListeners.add(cb)\n }\n}\n\nconst PREFIX = `theme--`\n\nexport function createTamagui<Conf extends CreateTamaguiProps>(\n config: Conf\n): Conf extends CreateTamaguiConfig<infer A, infer B, infer C, infer D>\n ? TamaguiInternalConfig<A, B, C, D>\n : unknown {\n if (process.env.NODE_ENV === 'development') {\n // config is re-run by the @tamagui/static, dont double validate\n if (!config['parsed']) {\n validateConfig(config)\n }\n }\n // test env loads a few times as it runs diff tests\n if (conf) {\n console.warn('Called createTamagui twice! Should never do so')\n // throw new Error(`#000 createTamagui called twice`)\n }\n\n configureMedia({\n queries: config.media as any,\n defaultActive: config.mediaQueryDefaultActive,\n })\n\n // TODO can avoid some of this CSS creation on native\n const themeConfig = (() => {\n let cssRules: string[] = []\n\n // tokens\n let tokenRule = `:root {`\n const varsByValue = new Map<string, Variable>()\n const addVar = (v: Variable) => {\n varsByValue[v.val] = v\n const rule = `--${v.name}:${typeof v.val === 'number' ? `${v.val}px` : v.val};`\n tokenRule += rule\n }\n\n for (const key in config.tokens) {\n for (const skey in config.tokens[key]) {\n const val = config.tokens[key][skey]\n if (key === 'font') {\n for (const fkey in val) {\n if (fkey === 'family') {\n addVar(val[fkey])\n } else {\n for (const fskey in val[fkey]) {\n addVar(val[fkey][fskey])\n }\n }\n }\n } else {\n addVar(val)\n }\n }\n }\n cssRules.push(`${tokenRule}\\n}`)\n\n // themes\n for (const themeName in config.themes) {\n // to allow using the same theme with diff names, be sure we don't mutate!\n config.themes[themeName] = { ...config.themes[themeName] }\n const theme = config.themes[themeName]\n let vars = ''\n for (const themeKey in theme) {\n const val = theme[themeKey]\n const getVariableCSS = (inv: any) => {\n const v = varsByValue[inv] ?? inv\n return isVariable(v) ? `--${themeKey}:var(--${v.name});` : `--${themeKey}:${v};`\n }\n vars += getVariableCSS(val)\n // TODO sanity check is necessary\n // make everything a variable that gets put into css\n if (!isVariable(val)) {\n theme[themeKey] = createVariable({\n name: themeKey,\n val,\n })\n }\n }\n\n const [themeClassName, parentName] = themeName.includes('-')\n ? themeName.split('-')\n : [themeName, '']\n // tiny hack for now assuming light/dark are typical parentName\n const oppositeName = parentName === 'dark' ? 'light' : 'dark'\n const cssParentSel = parentName ? `.${PREFIX}${parentName}` : ''\n const cssChildSel = `.${PREFIX}${themeClassName}`\n const cssSel = `${cssParentSel} ${cssChildSel}`\n // we need to force specificity\n const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {\\n${vars}\\n}`\n cssRules.push(cssRule)\n }\n\n Object.freeze(cssRules)\n\n return {\n cssRules,\n css: cssRules.join('\\n'),\n }\n })()\n\n // faster lookups token keys become $keys to match input\n const tokensParsed: any = parseTokens(config.tokens)\n // all themes should match key and we just need variable name\n // TODO once w react native we'd want to have a reverse lookup back to value\n const themeParsed: any = {}\n const firstKey = Object.keys(config.themes)[0]\n for (const key in config.themes[firstKey]) {\n // themeParsed[`$${key}`] = config.themes[firstKey][key]\n const val = config.themes[firstKey][key].val\n themeParsed[`$${key}`] = new Variable({ val, name: key })\n }\n\n const next: TamaguiInternalConfig = {\n // @ts-ignore\n shorthands: {},\n ...config,\n Provider: createTamaguiProvider({\n defaultTheme: 'light',\n ...config,\n }),\n themeConfig,\n themeParsed,\n tokensParsed,\n parsed: true,\n getCSS() {\n return `${themeConfig.css}\\n${[...getStyleRules()].join('\\n')}`\n },\n }\n conf = next\n\n if (configListeners.size) {\n configListeners.forEach((cb) => cb(next))\n configListeners.clear()\n }\n\n // @ts-expect-error\n return next\n}\n\nexport function getThemeParentClassName(themeName?: string | null) {\n return `theme-parent ${themeName ? `${PREFIX}${themeName}` : ''}`\n}\n\nconst parseTokens = (tokens: any) => {\n const res: any = {}\n for (const key in tokens) {\n res[key] = {}\n if (key === 'font') {\n for (const family in tokens.font) {\n const obj = {}\n res.font[`$${family}`] = obj\n for (const attrKey in tokens.font[family]) {\n const attr = tokens.font[family][attrKey]\n if (attrKey === 'family') {\n obj[attrKey] = attr\n continue\n }\n obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {\n acc[`$${cur}`] = attr[cur]\n return acc\n }, {})\n }\n }\n continue\n }\n for (const skey in tokens[key]) {\n res[key][`$${skey}`] = tokens[key][skey]\n }\n }\n\n return res\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
__markAsModule(target);
|
|
11
|
+
for (var name in all)
|
|
12
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
13
|
+
};
|
|
14
|
+
var __reExport = (target, module2, desc) => {
|
|
15
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
16
|
+
for (let key of __getOwnPropNames(module2))
|
|
17
|
+
if (!__hasOwnProp.call(target, key) && key !== "default")
|
|
18
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
19
|
+
}
|
|
20
|
+
return target;
|
|
21
|
+
};
|
|
22
|
+
var __toModule = (module2) => {
|
|
23
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
24
|
+
};
|
|
25
|
+
__export(exports, {
|
|
26
|
+
createTheme: () => createTheme
|
|
27
|
+
});
|
|
28
|
+
var import_createVariable = __toModule(require("./createVariable"));
|
|
29
|
+
const createTheme = /* @__PURE__ */ __name((theme) => {
|
|
30
|
+
const res = {};
|
|
31
|
+
for (const key in theme) {
|
|
32
|
+
const val = theme[key];
|
|
33
|
+
if (!(val instanceof import_createVariable.Variable)) {
|
|
34
|
+
res[key] = (0, import_createVariable.createVariable)({
|
|
35
|
+
name: key,
|
|
36
|
+
val
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
return res;
|
|
41
|
+
}, "createTheme");
|
|
42
|
+
//# sourceMappingURL=createTheme.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../src/createTheme.ts"],
|
|
4
4
|
"sourcesContent": ["import { Variable, createVariable } from './createVariable'\n\nexport const createTheme = <Theme extends { [key: string]: string | Variable }>(\n theme: Theme\n): {\n [key in keyof Theme]: Variable\n} => {\n const res = {} as any\n for (const key in theme) {\n const val = theme[key]\n if (!(val instanceof Variable)) {\n res[key] = createVariable({\n name: key,\n val,\n })\n }\n }\n return res\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,4BAAyC;AAElC,MAAM,cAAc,wBACzB,UAGG;AACH,QAAM,MAAM;AACZ,aAAW,OAAO,OAAO;AACvB,UAAM,MAAM,MAAM;AAClB,QAAI,CAAE,gBAAe,iCAAW;AAC9B,UAAI,OAAO,0CAAe;AAAA,QACxB,MAAM;AAAA,QACN;AAAA;AAAA;AAAA;AAIN,SAAO;AAAA,GAfkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
__markAsModule(target);
|
|
11
|
+
for (var name in all)
|
|
12
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
13
|
+
};
|
|
14
|
+
var __reExport = (target, module2, desc) => {
|
|
15
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
16
|
+
for (let key of __getOwnPropNames(module2))
|
|
17
|
+
if (!__hasOwnProp.call(target, key) && key !== "default")
|
|
18
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
19
|
+
}
|
|
20
|
+
return target;
|
|
21
|
+
};
|
|
22
|
+
var __toModule = (module2) => {
|
|
23
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
24
|
+
};
|
|
25
|
+
__export(exports, {
|
|
26
|
+
createTokens: () => createTokens,
|
|
27
|
+
mapTokensToVariables: () => mapTokensToVariables
|
|
28
|
+
});
|
|
29
|
+
var import_createVariable = __toModule(require("./createVariable"));
|
|
30
|
+
var import_validate = __toModule(require("./helpers/validate"));
|
|
31
|
+
function createTokens(tokens) {
|
|
32
|
+
if (process.env.NODE_ENV === "development") {
|
|
33
|
+
(0, import_validate.validateTokens)(tokens);
|
|
34
|
+
}
|
|
35
|
+
return setupTokens(tokens);
|
|
36
|
+
}
|
|
37
|
+
__name(createTokens, "createTokens");
|
|
38
|
+
function setupTokens(tokens) {
|
|
39
|
+
return mapTokensToVariables(tokens);
|
|
40
|
+
}
|
|
41
|
+
__name(setupTokens, "setupTokens");
|
|
42
|
+
const mapTokensToVariables = /* @__PURE__ */ __name((tokens, parentPath = "") => {
|
|
43
|
+
const res = {};
|
|
44
|
+
for (const key in tokens) {
|
|
45
|
+
const val = tokens[key];
|
|
46
|
+
const name = parentPath ? `${parentPath}-${key}` : key;
|
|
47
|
+
if (val && typeof val === "object") {
|
|
48
|
+
res[key] = mapTokensToVariables(tokens[key], name);
|
|
49
|
+
} else {
|
|
50
|
+
res[key] = (0, import_createVariable.createVariable)({ val, name });
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
return res;
|
|
54
|
+
}, "mapTokensToVariables");
|
|
55
|
+
//# sourceMappingURL=createTokens.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/createTokens.ts"],
|
|
4
|
+
"sourcesContent": ["import { Variable, createVariable } from './createVariable'\nimport { validateTokens } from './helpers/validate'\nimport { CreateTokens } from './types'\n\n// tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }\n\nexport function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {\n if (process.env.NODE_ENV === 'development') {\n validateTokens(tokens)\n }\n\n return setupTokens(tokens) as any\n}\n\nfunction setupTokens(tokens: any) {\n return mapTokensToVariables(tokens)\n}\n\nexport const mapTokensToVariables = (\n tokens: CreateTokens,\n parentPath = ''\n): CreateTokens<Variable> => {\n const res = {}\n for (const key in tokens) {\n const val = tokens[key]\n const name = parentPath ? `${parentPath}-${key}` : key\n if (val && typeof val === 'object') {\n res[key] = mapTokensToVariables(tokens[key], name)\n } else {\n res[key] = createVariable({ val, name })\n }\n }\n // @ts-expect-error\n return res\n}\n\n// verbose but gives us nice types...\ntype MakeTokens<T> = T extends {\n font: {\n [key in infer A]: {\n size: infer B\n lineHeight: infer C\n letterSpacing: infer D\n weight: infer Z\n family: infer Y\n }\n }\n color: infer E\n space: infer F\n size: infer G\n radius: infer H\n zIndex: infer J\n}\n ? {\n font: {\n [key in A]: {\n size: {\n [key in keyof B]: Variable\n }\n lineHeight: {\n [key in keyof C]: Variable\n }\n letterSpacing: {\n [key in keyof D]: Variable\n }\n weight: {\n [key in keyof Z]: Variable\n }\n family: Y\n }\n }\n color: {\n [key in keyof E]: Variable\n }\n space: {\n [key in keyof F]: Variable\n }\n size: {\n [key in keyof G]: Variable\n }\n radius: {\n [key in keyof H]: Variable\n }\n zIndex: {\n [key in keyof J]: Variable\n }\n }\n : never\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,4BAAyC;AACzC,sBAA+B;AAKxB,sBAA8C,QAA0B;AAC7E,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,wCAAe;AAAA;AAGjB,SAAO,YAAY;AAAA;AALL;AAQhB,qBAAqB,QAAa;AAChC,SAAO,qBAAqB;AAAA;AADrB;AAIF,MAAM,uBAAuB,wBAClC,QACA,aAAa,OACc;AAC3B,QAAM,MAAM;AACZ,aAAW,OAAO,QAAQ;AACxB,UAAM,MAAM,OAAO;AACnB,UAAM,OAAO,aAAa,GAAG,cAAc,QAAQ;AACnD,QAAI,OAAO,OAAO,QAAQ,UAAU;AAClC,UAAI,OAAO,qBAAqB,OAAO,MAAM;AAAA,WACxC;AACL,UAAI,OAAO,0CAAe,EAAE,KAAK;AAAA;AAAA;AAIrC,SAAO;AAAA,GAf2B;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
__markAsModule(target);
|
|
11
|
+
for (var name in all)
|
|
12
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
13
|
+
};
|
|
14
|
+
var __reExport = (target, module2, desc) => {
|
|
15
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
16
|
+
for (let key of __getOwnPropNames(module2))
|
|
17
|
+
if (!__hasOwnProp.call(target, key) && key !== "default")
|
|
18
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
19
|
+
}
|
|
20
|
+
return target;
|
|
21
|
+
};
|
|
22
|
+
var __toModule = (module2) => {
|
|
23
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
24
|
+
};
|
|
25
|
+
__export(exports, {
|
|
26
|
+
Variable: () => Variable,
|
|
27
|
+
createVariable: () => createVariable,
|
|
28
|
+
isVariable: () => isVariable
|
|
29
|
+
});
|
|
30
|
+
var import_platform = __toModule(require("./constants/platform"));
|
|
31
|
+
class Variable {
|
|
32
|
+
constructor({ val, name }) {
|
|
33
|
+
this.val = val;
|
|
34
|
+
this.name = name;
|
|
35
|
+
this.variable = import_platform.isWeb ? `var(--${name})` : this.val;
|
|
36
|
+
}
|
|
37
|
+
toString() {
|
|
38
|
+
return import_platform.isWeb ? this.variable : this.val;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
__name(Variable, "Variable");
|
|
42
|
+
const createVariable = /* @__PURE__ */ __name((props) => new Variable(props), "createVariable");
|
|
43
|
+
function isVariable(v) {
|
|
44
|
+
return v instanceof Variable;
|
|
45
|
+
}
|
|
46
|
+
__name(isVariable, "isVariable");
|
|
47
|
+
//# sourceMappingURL=createVariable.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/createVariable.ts"],
|
|
4
|
+
"sourcesContent": ["import { isWeb } from './constants/platform'\n\nexport class Variable {\n name: string\n val: string | number\n variable: string | number\n\n constructor({ val, name }: VariableIn) {\n // converting to px breaks rn\n this.val = val //typeof val === 'string' ? val : `${val}px`\n this.name = name\n this.variable = isWeb ? `var(--${name})` : this.val\n }\n\n toString() {\n return isWeb ? this.variable : this.val\n }\n}\n\ntype VariableIn = { val: string | number; name: string }\n\nexport const createVariable = (props: VariableIn) => new Variable(props)\n\nexport function isVariable(v: Variable | any): v is Variable {\n return v instanceof Variable\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAsB;AAEf,eAAe;AAAA,EAKpB,YAAY,EAAE,KAAK,QAAoB;AAErC,SAAK,MAAM;AACX,SAAK,OAAO;AACZ,SAAK,WAAW,wBAAQ,SAAS,UAAU,KAAK;AAAA;AAAA,EAGlD,WAAW;AACT,WAAO,wBAAQ,KAAK,WAAW,KAAK;AAAA;AAAA;AAbjC;AAmBA,MAAM,iBAAiB,wBAAC,UAAsB,IAAI,SAAS,QAApC;AAEvB,oBAAoB,GAAkC;AAC3D,SAAO,aAAa;AAAA;AADN;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
__markAsModule(target);
|
|
11
|
+
for (var name in all)
|
|
12
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
13
|
+
};
|
|
14
|
+
var __reExport = (target, module2, desc) => {
|
|
15
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
16
|
+
for (let key of __getOwnPropNames(module2))
|
|
17
|
+
if (!__hasOwnProp.call(target, key) && key !== "default")
|
|
18
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
19
|
+
}
|
|
20
|
+
return target;
|
|
21
|
+
};
|
|
22
|
+
var __toModule = (module2) => {
|
|
23
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
24
|
+
};
|
|
25
|
+
__export(exports, {
|
|
26
|
+
addStylesUsingClassname: () => addStylesUsingClassname,
|
|
27
|
+
useStylesAsClassname: () => useStylesAsClassname
|
|
28
|
+
});
|
|
29
|
+
var import_react = __toModule(require("react"));
|
|
30
|
+
var import_getStylesAtomic = __toModule(require("./getStylesAtomic"));
|
|
31
|
+
var import_insertStyleRule = __toModule(require("./insertStyleRule"));
|
|
32
|
+
let added = new Set();
|
|
33
|
+
function useStylesAsClassname(styles) {
|
|
34
|
+
if (!import_react.useInsertionEffect) {
|
|
35
|
+
return addStylesUsingClassname(styles);
|
|
36
|
+
} else {
|
|
37
|
+
const insertions = [];
|
|
38
|
+
const className = addStylesUsingClassname(styles, (_, rules) => {
|
|
39
|
+
for (const rule of rules) {
|
|
40
|
+
insertions.push(rule);
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
(0, import_react.useInsertionEffect)(() => {
|
|
44
|
+
for (const ruleset of insertions) {
|
|
45
|
+
(0, import_insertStyleRule.insertStyleRule)(ruleset);
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
return className;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
__name(useStylesAsClassname, "useStylesAsClassname");
|
|
52
|
+
function addStylesUsingClassname(styles, onAdd) {
|
|
53
|
+
let className = "";
|
|
54
|
+
for (const style of styles) {
|
|
55
|
+
if (!style)
|
|
56
|
+
continue;
|
|
57
|
+
if (Array.isArray(style)) {
|
|
58
|
+
className += " " + addStylesUsingClassname(style);
|
|
59
|
+
continue;
|
|
60
|
+
}
|
|
61
|
+
for (const { identifier, rules } of (0, import_getStylesAtomic.getStylesAtomic)(style)) {
|
|
62
|
+
className += ` ${identifier}`;
|
|
63
|
+
if (added.has(identifier)) {
|
|
64
|
+
continue;
|
|
65
|
+
}
|
|
66
|
+
added.add(identifier);
|
|
67
|
+
if (onAdd) {
|
|
68
|
+
onAdd(identifier, rules);
|
|
69
|
+
} else {
|
|
70
|
+
for (const rule of rules) {
|
|
71
|
+
(0, import_insertStyleRule.insertStyleRule)(rule);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
return className;
|
|
77
|
+
}
|
|
78
|
+
__name(addStylesUsingClassname, "addStylesUsingClassname");
|
|
79
|
+
//# sourceMappingURL=addStylesUsingClassname.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/helpers/addStylesUsingClassname.tsx"],
|
|
4
|
+
"sourcesContent": ["// @ts-ignore\nimport { useInsertionEffect } from 'react'\n\nimport { getStylesAtomic } from './getStylesAtomic'\nimport { insertStyleRule } from './insertStyleRule'\n\n// uses new useInsertionEffect for better perf if available\n\n// could be cleared occasionally\nlet added = new Set<string>()\n\nexport function useStylesAsClassname(styles: any[]) {\n if (!useInsertionEffect) {\n return addStylesUsingClassname(styles)\n } else {\n const insertions: any[] = []\n const className = addStylesUsingClassname(styles, (_, rules) => {\n for (const rule of rules) {\n insertions.push(rule)\n }\n })\n\n useInsertionEffect(() => {\n for (const ruleset of insertions) {\n insertStyleRule(ruleset)\n }\n })\n\n return className\n }\n}\n\nexport function addStylesUsingClassname(\n styles: any[],\n onAdd?: (identifier: string, rules: string[]) => any\n) {\n let className = ''\n for (const style of styles) {\n if (!style) continue\n if (Array.isArray(style)) {\n className += ' ' + addStylesUsingClassname(style)\n continue\n }\n for (const { identifier, rules } of getStylesAtomic(style)) {\n className += ` ${identifier}`\n if (added.has(identifier)) {\n continue\n }\n added.add(identifier)\n if (onAdd) {\n onAdd(identifier, rules)\n } else {\n for (const rule of rules) {\n insertStyleRule(rule)\n }\n }\n }\n }\n return className\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AACA,mBAAmC;AAEnC,6BAAgC;AAChC,6BAAgC;AAKhC,IAAI,QAAQ,IAAI;AAET,8BAA8B,QAAe;AAClD,MAAI,CAAC,iCAAoB;AACvB,WAAO,wBAAwB;AAAA,SAC1B;AACL,UAAM,aAAoB;AAC1B,UAAM,YAAY,wBAAwB,QAAQ,CAAC,GAAG,UAAU;AAC9D,iBAAW,QAAQ,OAAO;AACxB,mBAAW,KAAK;AAAA;AAAA;AAIpB,yCAAmB,MAAM;AACvB,iBAAW,WAAW,YAAY;AAChC,oDAAgB;AAAA;AAAA;AAIpB,WAAO;AAAA;AAAA;AAjBK;AAqBT,iCACL,QACA,OACA;AACA,MAAI,YAAY;AAChB,aAAW,SAAS,QAAQ;AAC1B,QAAI,CAAC;AAAO;AACZ,QAAI,MAAM,QAAQ,QAAQ;AACxB,mBAAa,MAAM,wBAAwB;AAC3C;AAAA;AAEF,eAAW,EAAE,YAAY,WAAW,4CAAgB,QAAQ;AAC1D,mBAAa,IAAI;AACjB,UAAI,MAAM,IAAI,aAAa;AACzB;AAAA;AAEF,YAAM,IAAI;AACV,UAAI,OAAO;AACT,cAAM,YAAY;AAAA,aACb;AACL,mBAAW,QAAQ,OAAO;AACxB,sDAAgB;AAAA;AAAA;AAAA;AAAA;AAKxB,SAAO;AAAA;AA1BO;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
__markAsModule(target);
|
|
11
|
+
for (var name in all)
|
|
12
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
13
|
+
};
|
|
14
|
+
var __reExport = (target, module2, desc) => {
|
|
15
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
16
|
+
for (let key of __getOwnPropNames(module2))
|
|
17
|
+
if (!__hasOwnProp.call(target, key) && key !== "default")
|
|
18
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
19
|
+
}
|
|
20
|
+
return target;
|
|
21
|
+
};
|
|
22
|
+
var __toModule = (module2) => {
|
|
23
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
24
|
+
};
|
|
25
|
+
__export(exports, {
|
|
26
|
+
MEDIA_SEP: () => MEDIA_SEP,
|
|
27
|
+
createMediaStyle: () => createMediaStyle
|
|
28
|
+
});
|
|
29
|
+
var import_useMedia = __toModule(require("../hooks/useMedia"));
|
|
30
|
+
const MEDIA_SEP = "_";
|
|
31
|
+
const createMediaStyle = /* @__PURE__ */ __name(({ identifier, rules }, mediaKey, mediaQueries, negate, importance = 0) => {
|
|
32
|
+
const mediaKeys = Object.keys(mediaQueries);
|
|
33
|
+
const mediaKeyPrecendence = mediaKeys.reduce((acc, cur, i) => {
|
|
34
|
+
acc[cur] = new Array(importance + 1).fill(":root").join("");
|
|
35
|
+
return acc;
|
|
36
|
+
}, {});
|
|
37
|
+
const negKey = negate ? "0" : "";
|
|
38
|
+
const ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1);
|
|
39
|
+
const nextIdentifier = `${identifier.replace(ogPrefix, `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`)}`;
|
|
40
|
+
const screenStr = negate ? "not all" : "screen";
|
|
41
|
+
const mediaSelector = (0, import_useMedia.mediaObjectToString)(mediaQueries[mediaKey]);
|
|
42
|
+
const mediaQuery = `${screenStr} and ${mediaSelector}`;
|
|
43
|
+
const precendencePrefix = mediaKeyPrecendence[mediaKey];
|
|
44
|
+
const styleInner = rules[0].replace(identifier, nextIdentifier);
|
|
45
|
+
let styleRule = "";
|
|
46
|
+
if (styleInner.includes("@media")) {
|
|
47
|
+
styleRule = styleInner.replace("{", ` and ${mediaQuery} {`);
|
|
48
|
+
} else {
|
|
49
|
+
styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`;
|
|
50
|
+
}
|
|
51
|
+
return {
|
|
52
|
+
styleRule,
|
|
53
|
+
identifier: nextIdentifier
|
|
54
|
+
};
|
|
55
|
+
}, "createMediaStyle");
|
|
56
|
+
//# sourceMappingURL=createMediaStyle.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../../src/helpers/createMediaStyle.ts"],
|
|
4
4
|
"sourcesContent": ["import { StyleObject } from '@tamagui/helpers'\n\nimport { mediaObjectToString } from '../hooks/useMedia'\nimport { MediaQueries } from '../types'\n\n// TODO have this be used by extractMediaStyle in tamagui static\n\n// not synced to static/constants for now\nexport const MEDIA_SEP = '_'\n\nexport const createMediaStyle = (\n { identifier, rules }: StyleObject,\n mediaKey: string,\n mediaQueries: MediaQueries,\n negate?: boolean,\n importance = 0\n) => {\n const mediaKeys = Object.keys(mediaQueries)\n const mediaKeyPrecendence = mediaKeys.reduce((acc, cur, i) => {\n acc[cur] = new Array(importance + 1).fill(':root').join('')\n return acc\n }, {})\n const negKey = negate ? '0' : ''\n const ogPrefix = identifier.slice(0, identifier.indexOf('-') + 1)\n const nextIdentifier = `${identifier.replace(\n ogPrefix,\n `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`\n )}`\n const screenStr = negate ? 'not all' : 'screen'\n const mediaSelector = mediaObjectToString(mediaQueries[mediaKey])\n const mediaQuery = `${screenStr} and ${mediaSelector}`\n const precendencePrefix = mediaKeyPrecendence[mediaKey]\n const styleInner = rules[0].replace(identifier, nextIdentifier)\n // combines media queries if they already exist\n let styleRule = ''\n if (styleInner.includes('@media')) {\n // combine\n styleRule = styleInner.replace('{', ` and ${mediaQuery} {`)\n } else {\n styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`\n }\n return {\n styleRule,\n identifier: nextIdentifier,\n }\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAoC;AAM7B,MAAM,YAAY;AAElB,MAAM,mBAAmB,wBAC9B,EAAE,YAAY,SACd,UACA,cACA,QACA,aAAa,MACV;AACH,QAAM,YAAY,OAAO,KAAK;AAC9B,QAAM,sBAAsB,UAAU,OAAO,CAAC,KAAK,KAAK,MAAM;AAC5D,QAAI,OAAO,IAAI,MAAM,aAAa,GAAG,KAAK,SAAS,KAAK;AACxD,WAAO;AAAA,KACN;AACH,QAAM,SAAS,SAAS,MAAM;AAC9B,QAAM,WAAW,WAAW,MAAM,GAAG,WAAW,QAAQ,OAAO;AAC/D,QAAM,iBAAiB,GAAG,WAAW,QACnC,UACA,GAAG,WAAW,YAAY,WAAW,SAAS;AAEhD,QAAM,YAAY,SAAS,YAAY;AACvC,QAAM,gBAAgB,yCAAoB,aAAa;AACvD,QAAM,aAAa,GAAG,iBAAiB;AACvC,QAAM,oBAAoB,oBAAoB;AAC9C,QAAM,aAAa,MAAM,GAAG,QAAQ,YAAY;AAEhD,MAAI,YAAY;AAChB,MAAI,WAAW,SAAS,WAAW;AAEjC,gBAAY,WAAW,QAAQ,KAAK,QAAQ;AAAA,SACvC;AACL,gBAAY,UAAU,gBAAgB,qBAAqB;AAAA;AAE7D,SAAO;AAAA,IACL;AAAA,IACA,YAAY;AAAA;AAAA,GAjCgB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|