@tamagui/core 1.0.1-beta.28 → 1.0.1-beta.29
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/dist/cjs/ThemeManager.js +18 -8
- package/dist/cjs/ThemeManager.js.map +2 -2
- package/dist/cjs/constants/platform.js +6 -6
- package/dist/cjs/constants/platform.js.map +2 -2
- package/dist/cjs/constants/rnw.js.map +2 -2
- package/dist/cjs/createComponent.js +23 -20
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/createTamagui.js +10 -2
- package/dist/cjs/createTamagui.js.map +2 -2
- package/dist/cjs/helpers/createMediaStyle.js +1 -0
- package/dist/cjs/helpers/createMediaStyle.js.map +2 -2
- package/dist/cjs/helpers/createPropMapper.js +9 -39
- package/dist/cjs/helpers/createPropMapper.js.map +2 -2
- package/dist/cjs/helpers/generateAtomicStyles.js +453 -0
- package/dist/cjs/helpers/generateAtomicStyles.js.map +7 -0
- package/dist/cjs/helpers/getSplitStyles.js +67 -65
- package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
- package/dist/cjs/helpers/getStylesAtomic.js +31 -40
- package/dist/cjs/helpers/getStylesAtomic.js.map +2 -2
- package/dist/cjs/helpers/mergeTransform.js +42 -0
- package/dist/cjs/helpers/mergeTransform.js.map +7 -0
- package/dist/cjs/helpers/prefixStyles.js +192 -0
- package/dist/cjs/helpers/prefixStyles.js.map +7 -0
- package/dist/cjs/hooks/useIsTouchDevice.js +1 -1
- package/dist/cjs/hooks/useIsTouchDevice.js.map +2 -2
- package/dist/cjs/hooks/useTheme.js +8 -7
- package/dist/cjs/hooks/useTheme.js.map +2 -2
- package/dist/cjs/types.js.map +1 -1
- package/dist/cjs/views/Theme.js.map +2 -2
- package/dist/cjs/views/ThemeProvider.js +1 -1
- package/dist/cjs/views/ThemeProvider.js.map +2 -2
- package/dist/cjs/views/ThemeReset.js +1 -0
- package/dist/cjs/views/ThemeReset.js.map +2 -2
- package/dist/esm/ThemeManager.js +18 -8
- package/dist/esm/ThemeManager.js.map +2 -2
- package/dist/esm/constants/platform.js +4 -4
- package/dist/esm/constants/platform.js.map +2 -2
- package/dist/esm/constants/rnw.js.map +2 -2
- package/dist/esm/createComponent.js +24 -20
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/createTamagui.js +8 -1
- package/dist/esm/createTamagui.js.map +2 -2
- package/dist/esm/helpers/createMediaStyle.js +1 -0
- package/dist/esm/helpers/createMediaStyle.js.map +2 -2
- package/dist/esm/helpers/createPropMapper.js +9 -40
- package/dist/esm/helpers/createPropMapper.js.map +2 -2
- package/dist/esm/helpers/generateAtomicStyles.js +425 -0
- package/dist/esm/helpers/generateAtomicStyles.js.map +7 -0
- package/dist/esm/helpers/getSplitStyles.js +70 -73
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/getStylesAtomic.js +26 -39
- package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
- package/dist/esm/helpers/mergeTransform.js +19 -0
- package/dist/esm/helpers/mergeTransform.js.map +7 -0
- package/dist/esm/helpers/prefixStyles.js +166 -0
- package/dist/esm/helpers/prefixStyles.js.map +7 -0
- package/dist/esm/hooks/useIsTouchDevice.js +2 -2
- package/dist/esm/hooks/useIsTouchDevice.js.map +2 -2
- package/dist/esm/hooks/useTheme.js +8 -7
- package/dist/esm/hooks/useTheme.js.map +2 -2
- package/dist/esm/views/Theme.js.map +2 -2
- package/dist/esm/views/ThemeProvider.js +1 -1
- package/dist/esm/views/ThemeProvider.js.map +2 -2
- package/dist/esm/views/ThemeReset.js +1 -0
- package/dist/esm/views/ThemeReset.js.map +2 -2
- package/dist/jsx/ThemeManager.js +18 -8
- package/dist/jsx/constants/platform.js +4 -4
- package/dist/jsx/createComponent.js +24 -20
- package/dist/jsx/createTamagui.js +8 -1
- package/dist/jsx/helpers/createMediaStyle.js +1 -0
- package/dist/jsx/helpers/createPropMapper.js +9 -40
- package/dist/jsx/helpers/generateAtomicStyles.js +424 -0
- package/dist/jsx/helpers/getSplitStyles.js +70 -73
- package/dist/jsx/helpers/getStylesAtomic.js +26 -39
- package/dist/jsx/helpers/mergeTransform.js +18 -0
- package/dist/jsx/helpers/prefixStyles.js +165 -0
- package/dist/jsx/hooks/useIsTouchDevice.js +2 -2
- package/dist/jsx/hooks/useTheme.js +8 -7
- package/dist/jsx/views/ThemeProvider.js +1 -1
- package/dist/jsx/views/ThemeReset.js +1 -1
- package/package.json +8 -5
- package/reset.css +2 -1
- package/types/Tamagui.d.ts +1 -1
- package/types/Tamagui.d.ts.map +1 -1
- package/types/ThemeManager.d.ts +9 -6
- package/types/ThemeManager.d.ts.map +1 -1
- package/types/constants/platform.d.ts +2 -2
- package/types/constants/platform.d.ts.map +1 -1
- package/types/constants/rnw.d.ts +1 -1
- package/types/constants/rnw.d.ts.map +1 -1
- package/types/createComponent.d.ts.map +1 -1
- package/types/createTamagui.d.ts +1 -0
- package/types/createTamagui.d.ts.map +1 -1
- package/types/helpers/createMediaStyle.d.ts.map +1 -1
- package/types/helpers/createPropMapper.d.ts +2 -2
- package/types/helpers/createPropMapper.d.ts.map +1 -1
- package/types/helpers/generateAtomicStyles.d.ts +22 -0
- package/types/helpers/generateAtomicStyles.d.ts.map +1 -0
- package/types/helpers/getSplitStyles.d.ts.map +1 -1
- package/types/helpers/getStylesAtomic.d.ts +10 -10
- package/types/helpers/getStylesAtomic.d.ts.map +1 -1
- package/types/helpers/mergeTransform.d.ts +7 -0
- package/types/helpers/mergeTransform.d.ts.map +1 -0
- package/types/helpers/prefixStyles.d.ts +5 -0
- package/types/helpers/prefixStyles.d.ts.map +1 -0
- package/types/hooks/useTheme.d.ts +13 -4
- package/types/hooks/useTheme.d.ts.map +1 -1
- package/types/types.d.ts +3 -4
- package/types/types.d.ts.map +1 -1
- package/types/views/Theme.d.ts +1 -9
- package/types/views/Theme.d.ts.map +1 -1
- package/types/views/ThemeProvider.d.ts +1 -0
- package/types/views/ThemeProvider.d.ts.map +1 -1
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
import {
|
|
4
|
-
mergeTransform,
|
|
5
|
-
stylePropsText,
|
|
6
|
-
stylePropsTransform,
|
|
7
|
-
validPseudoKeys,
|
|
8
|
-
validStyles
|
|
9
|
-
} from "@tamagui/helpers";
|
|
3
|
+
import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from "@tamagui/helpers";
|
|
10
4
|
import { useInsertionEffect } from "react";
|
|
11
5
|
import { getConfig } from "../conf";
|
|
12
6
|
import { isClient, isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
|
|
@@ -20,6 +14,7 @@ import {
|
|
|
20
14
|
updateInserted,
|
|
21
15
|
updateInsertedCache
|
|
22
16
|
} from "./insertStyleRule";
|
|
17
|
+
import { mergeTransform } from "./mergeTransform";
|
|
23
18
|
const skipProps = {
|
|
24
19
|
animation: true,
|
|
25
20
|
animateOnly: true,
|
|
@@ -42,18 +37,14 @@ const skipProps = {
|
|
|
42
37
|
let conf;
|
|
43
38
|
const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames) => {
|
|
44
39
|
var _a;
|
|
45
|
-
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
46
|
-
console.log(" \xBB getSplitStyles", { props, state, defaultClassNames });
|
|
47
|
-
}
|
|
48
40
|
conf = conf || getConfig();
|
|
49
41
|
const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
|
|
50
42
|
const viewProps = {};
|
|
51
|
-
const style = {};
|
|
52
|
-
const classNames = {
|
|
53
|
-
...defaultClassNames
|
|
54
|
-
};
|
|
55
43
|
const pseudos = {};
|
|
56
44
|
const medias = {};
|
|
45
|
+
let style = {};
|
|
46
|
+
let classNames = {};
|
|
47
|
+
const usedKeys = /* @__PURE__ */ new Set();
|
|
57
48
|
const rulesToInsert = [];
|
|
58
49
|
function addStyle(prop, rule) {
|
|
59
50
|
rulesToInsert.push([prop, rule]);
|
|
@@ -104,55 +95,32 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
104
95
|
}
|
|
105
96
|
}
|
|
106
97
|
__name(mergeClassName, "mergeClassName");
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
112
|
-
console.log(" \xBB getSplitStyles push", cur, state);
|
|
113
|
-
}
|
|
114
|
-
if (isWeb && !state.noClassNames) {
|
|
115
|
-
const atomic = getStylesAtomic(cur);
|
|
116
|
-
for (const atomicStyle of atomic) {
|
|
117
|
-
if (!state.noClassNames) {
|
|
118
|
-
addStyle(atomicStyle.identifier, atomicStyle.rules[0]);
|
|
119
|
-
mergeClassName(atomicStyle.property, atomicStyle.identifier);
|
|
120
|
-
} else {
|
|
121
|
-
style[atomicStyle.property] = atomicStyle.value;
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
if (!isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both") {
|
|
126
|
-
for (const key in cur) {
|
|
127
|
-
if (skipProps[key]) {
|
|
128
|
-
continue;
|
|
129
|
-
}
|
|
130
|
-
if (key in stylePropsTransform) {
|
|
131
|
-
mergeTransform(style, key, cur[key]);
|
|
132
|
-
} else {
|
|
133
|
-
style[key] = cur[key];
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
cur = null;
|
|
138
|
-
}
|
|
139
|
-
__name(push, "push");
|
|
140
|
-
for (const keyInit in props) {
|
|
141
|
-
if (skipProps[keyInit]) {
|
|
98
|
+
const propKeys = Object.keys(props);
|
|
99
|
+
for (let i = propKeys.length - 1; i >= 0; i--) {
|
|
100
|
+
const keyInit = propKeys[i];
|
|
101
|
+
if (usedKeys.has(keyInit))
|
|
142
102
|
continue;
|
|
143
|
-
|
|
144
|
-
|
|
103
|
+
if (skipProps[keyInit])
|
|
104
|
+
continue;
|
|
105
|
+
if (!isWeb && keyInit.startsWith("data-"))
|
|
145
106
|
continue;
|
|
146
|
-
}
|
|
147
107
|
const valInit = props[keyInit];
|
|
148
108
|
if (keyInit === "style" || keyInit.startsWith("_style")) {
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
109
|
+
if (!valInit)
|
|
110
|
+
continue;
|
|
111
|
+
for (const key in valInit) {
|
|
112
|
+
if (usedKeys.has(key))
|
|
113
|
+
continue;
|
|
114
|
+
style[key] = valInit;
|
|
115
|
+
}
|
|
116
|
+
continue;
|
|
117
|
+
}
|
|
118
|
+
if (keyInit === "className") {
|
|
119
|
+
mergeClassName(keyInit, valInit);
|
|
152
120
|
continue;
|
|
153
121
|
}
|
|
154
|
-
if (
|
|
155
|
-
|
|
122
|
+
if (validStyleProps[keyInit] && valInit && valInit[0] === "_") {
|
|
123
|
+
usedKeys.add(keyInit);
|
|
156
124
|
mergeClassName(keyInit, valInit);
|
|
157
125
|
continue;
|
|
158
126
|
}
|
|
@@ -162,19 +130,24 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
162
130
|
let isMedia = keyInit[0] === "$";
|
|
163
131
|
let isPseudo = validPseudoKeys[keyInit];
|
|
164
132
|
if (!isMedia && !isPseudo && !((_a = staticConfig.variants) == null ? void 0 : _a[keyInit]) && !validStyleProps[keyInit] && !conf.shorthands[keyInit]) {
|
|
133
|
+
usedKeys.add(keyInit);
|
|
165
134
|
viewProps[keyInit] = valInit;
|
|
166
135
|
continue;
|
|
167
136
|
}
|
|
168
|
-
const
|
|
169
|
-
const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out);
|
|
137
|
+
const expanded = isMedia || isPseudo ? [[keyInit, valInit]] : staticConfig.propMapper(keyInit, valInit, theme, props, state);
|
|
170
138
|
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
171
139
|
console.log(" \xBB getSplitStyles", keyInit, expanded);
|
|
172
140
|
}
|
|
141
|
+
if (!expanded) {
|
|
142
|
+
continue;
|
|
143
|
+
}
|
|
173
144
|
for (const [key, val] of expanded) {
|
|
174
|
-
if (val === void 0)
|
|
145
|
+
if (val === void 0)
|
|
146
|
+
continue;
|
|
147
|
+
if (usedKeys.has(key))
|
|
175
148
|
continue;
|
|
176
|
-
}
|
|
177
149
|
if (key !== "target" && val && val[0] === "_") {
|
|
150
|
+
usedKeys.add(key);
|
|
178
151
|
mergeClassName(key, val);
|
|
179
152
|
continue;
|
|
180
153
|
}
|
|
@@ -215,13 +188,12 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
215
188
|
if (shouldDoClasses) {
|
|
216
189
|
const mediaStyles = getStylesAtomic(mediaStyle);
|
|
217
190
|
for (const style2 of mediaStyles) {
|
|
218
|
-
const
|
|
219
|
-
addStyle(
|
|
220
|
-
mergeClassName(`${
|
|
191
|
+
const out = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
|
|
192
|
+
addStyle(out.identifier, out.styleRule);
|
|
193
|
+
mergeClassName(`${out.identifier}-${mediaKey}`, out.identifier);
|
|
221
194
|
}
|
|
222
195
|
} else {
|
|
223
196
|
if (mediaState[mediaKey]) {
|
|
224
|
-
push();
|
|
225
197
|
if (process.env.NODE_ENV === "development" && props["debug"]) {
|
|
226
198
|
console.log("apply media style", mediaKey, mediaState);
|
|
227
199
|
}
|
|
@@ -231,23 +203,46 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
231
203
|
continue;
|
|
232
204
|
}
|
|
233
205
|
if (!isWeb && key === "pointerEvents") {
|
|
206
|
+
usedKeys.add(key);
|
|
234
207
|
viewProps[key] = val;
|
|
235
208
|
continue;
|
|
236
209
|
}
|
|
237
210
|
if (validStyleProps[key]) {
|
|
238
|
-
|
|
239
|
-
|
|
211
|
+
usedKeys.add(key);
|
|
212
|
+
if (val && val[0] === "_") {
|
|
213
|
+
classNames[key] = val;
|
|
214
|
+
} else {
|
|
215
|
+
if (key in stylePropsTransform && (!isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both")) {
|
|
216
|
+
mergeTransform(style, key, val, true);
|
|
217
|
+
} else {
|
|
218
|
+
style[key] = val;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
240
221
|
continue;
|
|
241
222
|
}
|
|
242
223
|
if (!staticConfig.variants || !(key in staticConfig.variants)) {
|
|
243
224
|
if (!skipProps[key]) {
|
|
244
|
-
push();
|
|
245
225
|
viewProps[key] = val;
|
|
226
|
+
usedKeys.add(key);
|
|
246
227
|
}
|
|
247
228
|
}
|
|
248
229
|
}
|
|
249
230
|
}
|
|
250
|
-
|
|
231
|
+
if (defaultClassNames) {
|
|
232
|
+
classNames = {
|
|
233
|
+
...defaultClassNames,
|
|
234
|
+
...classNames
|
|
235
|
+
};
|
|
236
|
+
}
|
|
237
|
+
if (isWeb && !state.noClassNames) {
|
|
238
|
+
const atomic = getStylesAtomic(style);
|
|
239
|
+
for (const atomicStyle of atomic) {
|
|
240
|
+
const key = atomicStyle.property;
|
|
241
|
+
addStyle(atomicStyle.identifier, atomicStyle.rules[0]);
|
|
242
|
+
mergeClassName(key, atomicStyle.identifier);
|
|
243
|
+
}
|
|
244
|
+
style = {};
|
|
245
|
+
}
|
|
251
246
|
if (transforms) {
|
|
252
247
|
for (const namespace in transforms) {
|
|
253
248
|
const [hash, val] = transforms[namespace];
|
|
@@ -262,7 +257,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
262
257
|
}
|
|
263
258
|
}
|
|
264
259
|
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
265
|
-
|
|
260
|
+
if (typeof document !== "undefined") {
|
|
261
|
+
console.log(" \xBB getSplitStyles out", { style, pseudos, medias, classNames, viewProps, state });
|
|
262
|
+
}
|
|
266
263
|
}
|
|
267
264
|
return {
|
|
268
265
|
viewProps,
|
|
@@ -294,8 +291,9 @@ const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props,
|
|
|
294
291
|
const styleOut = {};
|
|
295
292
|
for (const key in styleIn) {
|
|
296
293
|
const val = styleIn[key];
|
|
297
|
-
const
|
|
298
|
-
|
|
294
|
+
const expanded = staticConfig.propMapper(key, val, theme, props, state, avoidDefaultProps);
|
|
295
|
+
if (!expanded)
|
|
296
|
+
continue;
|
|
299
297
|
for (const [skey, sval] of expanded) {
|
|
300
298
|
if (skey in stylePropsTransform) {
|
|
301
299
|
mergeTransform(styleOut, skey, sval);
|
|
@@ -304,7 +302,6 @@ const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props,
|
|
|
304
302
|
}
|
|
305
303
|
}
|
|
306
304
|
}
|
|
307
|
-
normalizeStyleObject(styleOut);
|
|
308
305
|
return styleOut;
|
|
309
306
|
}, "getSubStyle");
|
|
310
307
|
function normalizeStyleObject(style) {
|
|
@@ -1,13 +1,25 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
mergeTransform,
|
|
6
|
-
stylePropsTransform
|
|
7
|
-
} from "@tamagui/helpers";
|
|
8
|
-
import { getConfig } from "../conf";
|
|
9
|
-
import { rnw } from "../constants/rnw";
|
|
3
|
+
import { stylePropsTransform } from "@tamagui/helpers";
|
|
4
|
+
import { reversedShorthands } from "../createTamagui";
|
|
10
5
|
import { isVariable } from "../createVariable";
|
|
6
|
+
import { generateAtomicStyles } from "./generateAtomicStyles";
|
|
7
|
+
import { invertMapTransformKeys, mergeTransform } from "./mergeTransform";
|
|
8
|
+
const pseudos = {
|
|
9
|
+
hoverStyle: {
|
|
10
|
+
name: "hover",
|
|
11
|
+
priority: 1
|
|
12
|
+
},
|
|
13
|
+
pressStyle: {
|
|
14
|
+
name: "active",
|
|
15
|
+
priority: 2
|
|
16
|
+
},
|
|
17
|
+
focusStyle: {
|
|
18
|
+
name: "focus",
|
|
19
|
+
priority: 3
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
const pseudosOrdered = Object.values(pseudos);
|
|
11
23
|
function getStylesAtomic(stylesIn, options = {}) {
|
|
12
24
|
const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn;
|
|
13
25
|
let res = [];
|
|
@@ -31,10 +43,6 @@ function getStylesAtomic(stylesIn, options = {}) {
|
|
|
31
43
|
return res;
|
|
32
44
|
}
|
|
33
45
|
__name(getStylesAtomic, "getStylesAtomic");
|
|
34
|
-
const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
|
|
35
|
-
return rnw.atomic(rnw.createCompileableStyle(rnw.createReactDOMStyle(style)));
|
|
36
|
-
}, "generateAtomicStyles");
|
|
37
|
-
let reversedShorthands = null;
|
|
38
46
|
function getAtomicStyle(style, pseudo, options) {
|
|
39
47
|
var _a;
|
|
40
48
|
if (style == null || typeof style !== "object") {
|
|
@@ -62,27 +70,20 @@ function getAtomicStyle(style, pseudo, options) {
|
|
|
62
70
|
} else {
|
|
63
71
|
atomicStyles = generateAtomicStyles(style);
|
|
64
72
|
}
|
|
65
|
-
if (!reversedShorthands) {
|
|
66
|
-
reversedShorthands = {};
|
|
67
|
-
const conf = getConfig();
|
|
68
|
-
if (conf.shorthands) {
|
|
69
|
-
for (const key in conf.shorthands) {
|
|
70
|
-
reversedShorthands[conf.shorthands[key]] = key;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
73
|
return Object.keys(atomicStyles).map((key) => {
|
|
75
74
|
const val = atomicStyles[key];
|
|
76
|
-
const [_,
|
|
77
|
-
const hash = b || a;
|
|
75
|
+
const [_, hash] = val.identifier.split("-");
|
|
78
76
|
const psuedoPrefix = pseudo ? `0${pseudo.name}-` : "";
|
|
77
|
+
if (!val.property) {
|
|
78
|
+
throw new Error(`no prop`);
|
|
79
|
+
}
|
|
79
80
|
const shortProp = reversedShorthands[val.property] || val.property;
|
|
80
81
|
const identifier = `_${shortProp}-${psuedoPrefix}${hash}`;
|
|
81
82
|
const className = `.${identifier}`;
|
|
82
83
|
const rules = val.rules.map((rule) => {
|
|
83
84
|
if (pseudo) {
|
|
84
85
|
const psuedoPrefixSelect = [...Array(pseudo.priority)].map(() => ":root").join("") + " ";
|
|
85
|
-
let res = rule.replace(`.${val.identifier}`, `${psuedoPrefixSelect} ${className}`).replace("{", `:${pseudo.name}{`);
|
|
86
|
+
let res = rule.replace(`.${val.identifier}`, `${psuedoPrefixSelect} ${className}`).replace("{", `:${pseudo.name}{`).replace(";", " !important;");
|
|
86
87
|
if (pseudo.name === "hover") {
|
|
87
88
|
res = `@media not all and (hover: none) { ${res} }`;
|
|
88
89
|
}
|
|
@@ -92,7 +93,8 @@ function getAtomicStyle(style, pseudo, options) {
|
|
|
92
93
|
});
|
|
93
94
|
const result = {
|
|
94
95
|
property: val.transformProperty || val.property,
|
|
95
|
-
|
|
96
|
+
pseudo: pseudo == null ? void 0 : pseudo.name,
|
|
97
|
+
value: val.value || "",
|
|
96
98
|
identifier,
|
|
97
99
|
className,
|
|
98
100
|
rules
|
|
@@ -109,21 +111,6 @@ const borderDefaults = {
|
|
|
109
111
|
borderLeftWidth: "borderLeftStyle",
|
|
110
112
|
borderRightWidth: "borderRightStyle"
|
|
111
113
|
};
|
|
112
|
-
const pseudos = {
|
|
113
|
-
hoverStyle: {
|
|
114
|
-
name: "hover",
|
|
115
|
-
priority: 1
|
|
116
|
-
},
|
|
117
|
-
pressStyle: {
|
|
118
|
-
name: "active",
|
|
119
|
-
priority: 2
|
|
120
|
-
},
|
|
121
|
-
focusStyle: {
|
|
122
|
-
name: "focus",
|
|
123
|
-
priority: 3
|
|
124
|
-
}
|
|
125
|
-
};
|
|
126
|
-
const pseudosOrdered = Object.values(pseudos);
|
|
127
114
|
export {
|
|
128
115
|
getStylesAtomic,
|
|
129
116
|
pseudos
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
const mergeTransform = /* @__PURE__ */ __name((obj, key, val, backwards = false) => {
|
|
4
|
+
obj.transform || (obj.transform = []);
|
|
5
|
+
obj.transform[backwards ? "unshift" : "push"]({ [mapTransformKeys[key] || key]: val });
|
|
6
|
+
}, "mergeTransform");
|
|
7
|
+
const mapTransformKeys = {
|
|
8
|
+
x: "translateX",
|
|
9
|
+
y: "translateY"
|
|
10
|
+
};
|
|
11
|
+
const invertMapTransformKeys = {
|
|
12
|
+
translateX: "x",
|
|
13
|
+
translateY: "y"
|
|
14
|
+
};
|
|
15
|
+
export {
|
|
16
|
+
invertMapTransformKeys,
|
|
17
|
+
mergeTransform
|
|
18
|
+
};
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import createPrefixer from "inline-style-prefixer/lib/createPrefixer";
|
|
4
|
+
import backgroundClip from "inline-style-prefixer/lib/plugins/backgroundClip";
|
|
5
|
+
import crossFade from "inline-style-prefixer/lib/plugins/crossFade";
|
|
6
|
+
import cursor from "inline-style-prefixer/lib/plugins/cursor";
|
|
7
|
+
import filter from "inline-style-prefixer/lib/plugins/filter";
|
|
8
|
+
import flex from "inline-style-prefixer/lib/plugins/flex";
|
|
9
|
+
import flexboxIE from "inline-style-prefixer/lib/plugins/flexboxIE";
|
|
10
|
+
import flexboxOld from "inline-style-prefixer/lib/plugins/flexboxOld";
|
|
11
|
+
import gradient from "inline-style-prefixer/lib/plugins/gradient";
|
|
12
|
+
import grid from "inline-style-prefixer/lib/plugins/grid";
|
|
13
|
+
import imageSet from "inline-style-prefixer/lib/plugins/imageSet";
|
|
14
|
+
import logical from "inline-style-prefixer/lib/plugins/logical";
|
|
15
|
+
import position from "inline-style-prefixer/lib/plugins/position";
|
|
16
|
+
import sizing from "inline-style-prefixer/lib/plugins/sizing";
|
|
17
|
+
import transition from "inline-style-prefixer/lib/plugins/transition";
|
|
18
|
+
const prefixInlineStyles = /* @__PURE__ */ __name((style) => {
|
|
19
|
+
const prefixedStyles = prefixStyles(style);
|
|
20
|
+
Object.keys(prefixedStyles).forEach((prop) => {
|
|
21
|
+
const value = prefixedStyles[prop];
|
|
22
|
+
if (Array.isArray(value)) {
|
|
23
|
+
prefixedStyles[prop] = value[value.length - 1];
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
return prefixedStyles;
|
|
27
|
+
}, "prefixInlineStyles");
|
|
28
|
+
const w = ["Webkit"];
|
|
29
|
+
const m = ["Moz"];
|
|
30
|
+
const ms = ["ms"];
|
|
31
|
+
const wm = ["Webkit", "Moz"];
|
|
32
|
+
const wms = ["Webkit", "ms"];
|
|
33
|
+
const wmms = ["Webkit", "Moz", "ms"];
|
|
34
|
+
const staticData = {
|
|
35
|
+
plugins: [
|
|
36
|
+
backgroundClip,
|
|
37
|
+
crossFade,
|
|
38
|
+
cursor,
|
|
39
|
+
filter,
|
|
40
|
+
flex,
|
|
41
|
+
flexboxIE,
|
|
42
|
+
flexboxOld,
|
|
43
|
+
gradient,
|
|
44
|
+
grid,
|
|
45
|
+
imageSet,
|
|
46
|
+
logical,
|
|
47
|
+
position,
|
|
48
|
+
sizing,
|
|
49
|
+
transition
|
|
50
|
+
],
|
|
51
|
+
prefixMap: {
|
|
52
|
+
animation: w,
|
|
53
|
+
animationDelay: w,
|
|
54
|
+
animationDirection: w,
|
|
55
|
+
animationFillMode: w,
|
|
56
|
+
animationDuration: w,
|
|
57
|
+
animationIterationCount: w,
|
|
58
|
+
animationName: w,
|
|
59
|
+
animationPlayState: w,
|
|
60
|
+
animationTimingFunction: w,
|
|
61
|
+
appearance: wm,
|
|
62
|
+
userSelect: wmms,
|
|
63
|
+
textEmphasisPosition: w,
|
|
64
|
+
textEmphasis: w,
|
|
65
|
+
textEmphasisStyle: w,
|
|
66
|
+
textEmphasisColor: w,
|
|
67
|
+
boxDecorationBreak: w,
|
|
68
|
+
clipPath: w,
|
|
69
|
+
maskImage: w,
|
|
70
|
+
maskMode: w,
|
|
71
|
+
maskRepeat: w,
|
|
72
|
+
maskPosition: w,
|
|
73
|
+
maskClip: w,
|
|
74
|
+
maskOrigin: w,
|
|
75
|
+
maskSize: w,
|
|
76
|
+
maskComposite: w,
|
|
77
|
+
mask: w,
|
|
78
|
+
maskBorderSource: w,
|
|
79
|
+
maskBorderMode: w,
|
|
80
|
+
maskBorderSlice: w,
|
|
81
|
+
maskBorderWidth: w,
|
|
82
|
+
maskBorderOutset: w,
|
|
83
|
+
maskBorderRepeat: w,
|
|
84
|
+
maskBorder: w,
|
|
85
|
+
maskType: w,
|
|
86
|
+
textDecorationStyle: w,
|
|
87
|
+
textDecorationSkip: w,
|
|
88
|
+
textDecorationLine: w,
|
|
89
|
+
textDecorationColor: w,
|
|
90
|
+
filter: w,
|
|
91
|
+
fontFeatureSettings: w,
|
|
92
|
+
breakAfter: wmms,
|
|
93
|
+
breakBefore: wmms,
|
|
94
|
+
breakInside: wmms,
|
|
95
|
+
columnCount: wm,
|
|
96
|
+
columnFill: wm,
|
|
97
|
+
columnGap: wm,
|
|
98
|
+
columnRule: wm,
|
|
99
|
+
columnRuleColor: wm,
|
|
100
|
+
columnRuleStyle: wm,
|
|
101
|
+
columnRuleWidth: wm,
|
|
102
|
+
columns: wm,
|
|
103
|
+
columnSpan: wm,
|
|
104
|
+
columnWidth: wm,
|
|
105
|
+
writingMode: wms,
|
|
106
|
+
flex: wms,
|
|
107
|
+
flexBasis: w,
|
|
108
|
+
flexDirection: wms,
|
|
109
|
+
flexGrow: w,
|
|
110
|
+
flexFlow: wms,
|
|
111
|
+
flexShrink: w,
|
|
112
|
+
flexWrap: wms,
|
|
113
|
+
alignContent: w,
|
|
114
|
+
alignItems: w,
|
|
115
|
+
alignSelf: w,
|
|
116
|
+
justifyContent: w,
|
|
117
|
+
order: w,
|
|
118
|
+
transform: w,
|
|
119
|
+
transformOrigin: w,
|
|
120
|
+
transformOriginX: w,
|
|
121
|
+
transformOriginY: w,
|
|
122
|
+
backfaceVisibility: w,
|
|
123
|
+
perspective: w,
|
|
124
|
+
perspectiveOrigin: w,
|
|
125
|
+
transformStyle: w,
|
|
126
|
+
transformOriginZ: w,
|
|
127
|
+
backdropFilter: w,
|
|
128
|
+
fontKerning: w,
|
|
129
|
+
scrollSnapType: wms,
|
|
130
|
+
scrollSnapPointsX: wms,
|
|
131
|
+
scrollSnapPointsY: wms,
|
|
132
|
+
scrollSnapDestination: wms,
|
|
133
|
+
scrollSnapCoordinate: wms,
|
|
134
|
+
shapeImageThreshold: w,
|
|
135
|
+
shapeImageMargin: w,
|
|
136
|
+
shapeImageOutside: w,
|
|
137
|
+
hyphens: wmms,
|
|
138
|
+
flowInto: wms,
|
|
139
|
+
flowFrom: wms,
|
|
140
|
+
regionFragment: wms,
|
|
141
|
+
textOrientation: w,
|
|
142
|
+
textAlignLast: m,
|
|
143
|
+
tabSize: m,
|
|
144
|
+
wrapFlow: ms,
|
|
145
|
+
wrapThrough: ms,
|
|
146
|
+
wrapMargin: ms,
|
|
147
|
+
touchAction: ms,
|
|
148
|
+
textSizeAdjust: ["ms", "Webkit"],
|
|
149
|
+
borderImage: w,
|
|
150
|
+
borderImageOutset: w,
|
|
151
|
+
borderImageRepeat: w,
|
|
152
|
+
borderImageSlice: w,
|
|
153
|
+
borderImageSource: w,
|
|
154
|
+
borderImageWidth: w,
|
|
155
|
+
transitionDelay: w,
|
|
156
|
+
transitionDuration: w,
|
|
157
|
+
transitionProperty: w,
|
|
158
|
+
transitionTimingFunction: w
|
|
159
|
+
}
|
|
160
|
+
};
|
|
161
|
+
const prefixStyles = createPrefixer(staticData);
|
|
162
|
+
export {
|
|
163
|
+
prefixInlineStyles,
|
|
164
|
+
prefixStyles
|
|
165
|
+
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
3
|
import { useState } from "react";
|
|
4
|
-
import {
|
|
4
|
+
import { isTouchable, useIsomorphicLayoutEffect } from "../constants/platform";
|
|
5
5
|
const useIsTouchDevice = /* @__PURE__ */ __name(() => {
|
|
6
6
|
const [touchOnly, setTouchOnly] = useState(false);
|
|
7
7
|
useIsomorphicLayoutEffect(() => {
|
|
8
|
-
if (
|
|
8
|
+
if (isTouchable) {
|
|
9
9
|
setTouchOnly(true);
|
|
10
10
|
}
|
|
11
11
|
}, []);
|
|
@@ -11,7 +11,7 @@ import { useConstant } from "./useConstant";
|
|
|
11
11
|
const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceUpdate) => {
|
|
12
12
|
const { name, theme, themes, themeManager, className, didChangeTheme } = useChangeThemeEffect(themeName, componentName, props, forceUpdate);
|
|
13
13
|
if (process.env.NODE_ENV === "development") {
|
|
14
|
-
if ((props == null ? void 0 : props
|
|
14
|
+
if ((props == null ? void 0 : props.debug) === "verbose") {
|
|
15
15
|
console.log(" \xBB useTheme", { themeName, componentName, name, className });
|
|
16
16
|
}
|
|
17
17
|
}
|
|
@@ -52,7 +52,7 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
|
|
|
52
52
|
if (!name || key === "__proto__" || typeof key === "symbol") {
|
|
53
53
|
if (key === GetThemeManager) {
|
|
54
54
|
if (process.env.NODE_ENV === "development") {
|
|
55
|
-
if (props
|
|
55
|
+
if (props == null ? void 0 : props.debug) {
|
|
56
56
|
console.log("did change", { themeName, didChangeTheme, name, componentName }, themeManager == null ? void 0 : themeManager.parentName);
|
|
57
57
|
}
|
|
58
58
|
}
|
|
@@ -131,13 +131,14 @@ const useChangeThemeEffect = /* @__PURE__ */ __name((name, componentName, props,
|
|
|
131
131
|
const debug = props && props["debug"];
|
|
132
132
|
const parentManager = useContext(ThemeManagerContext) || emptyManager;
|
|
133
133
|
const { themes } = useContext(ThemeContext);
|
|
134
|
-
const
|
|
134
|
+
const reset = (props == null ? void 0 : props.reset) || false;
|
|
135
|
+
const getThemeProps = { name, componentName, themes, reset };
|
|
136
|
+
const next = parentManager.getNextTheme(getThemeProps, debug);
|
|
135
137
|
const forceUpdate = forceUpdateProp || useForceUpdate();
|
|
136
138
|
const themeManager = useConstant(() => {
|
|
137
|
-
if (!next)
|
|
139
|
+
if (!next)
|
|
138
140
|
return null;
|
|
139
|
-
|
|
140
|
-
return new ThemeManager(next.name, next.theme, parentManager);
|
|
141
|
+
return new ThemeManager(next.name, next.theme, parentManager, reset);
|
|
141
142
|
});
|
|
142
143
|
if (typeof document !== "undefined") {
|
|
143
144
|
useLayoutEffect(() => {
|
|
@@ -147,7 +148,7 @@ const useChangeThemeEffect = /* @__PURE__ */ __name((name, componentName, props,
|
|
|
147
148
|
themeManager.update(next);
|
|
148
149
|
}
|
|
149
150
|
return parentManager.onChangeTheme(() => {
|
|
150
|
-
const next2 = parentManager.getNextTheme(
|
|
151
|
+
const next2 = parentManager.getNextTheme(getThemeProps, debug);
|
|
151
152
|
if (!next2)
|
|
152
153
|
return;
|
|
153
154
|
if (themeManager.update(next2)) {
|
|
@@ -20,7 +20,7 @@ const ThemeProvider = /* @__PURE__ */ __name((props) => {
|
|
|
20
20
|
return () => {
|
|
21
21
|
document.body.classList.remove(cn);
|
|
22
22
|
};
|
|
23
|
-
}, [props.disableRootThemeClass]);
|
|
23
|
+
}, [props.defaultTheme, props.disableRootThemeClass]);
|
|
24
24
|
}
|
|
25
25
|
const themeContext = useMemo(() => {
|
|
26
26
|
return {
|
|
@@ -27,7 +27,7 @@ const ThemeReset = /* @__PURE__ */ __name((props) => {
|
|
|
27
27
|
if (!themeManager || !props.children) {
|
|
28
28
|
return props.children || null;
|
|
29
29
|
}
|
|
30
|
-
return <Theme className="tui-theme-reset" name={name}>{props.children}</Theme>;
|
|
30
|
+
return <Theme className="tui-theme-reset" reset name={name}>{props.children}</Theme>;
|
|
31
31
|
}, "ThemeReset");
|
|
32
32
|
export {
|
|
33
33
|
ThemeReset
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/core",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.29",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -21,11 +21,14 @@
|
|
|
21
21
|
],
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@expo/match-media": "^0.3.0",
|
|
24
|
-
"@tamagui/helpers": "^1.0.1-beta.
|
|
24
|
+
"@tamagui/helpers": "^1.0.1-beta.29",
|
|
25
25
|
"@tamagui/ow": "^0.28.1",
|
|
26
|
-
"@tamagui/use-debounce": "^1.0.1-beta.
|
|
27
|
-
"@tamagui/use-force-update": "^1.0.1-beta.
|
|
26
|
+
"@tamagui/use-debounce": "^1.0.1-beta.29",
|
|
27
|
+
"@tamagui/use-force-update": "^1.0.1-beta.29",
|
|
28
28
|
"expo-screen-orientation": "^4.2.0",
|
|
29
|
+
"hyphenate-style-name": "^1.0.4",
|
|
30
|
+
"inline-style-prefixer": "^6.0.0",
|
|
31
|
+
"normalize-css-color": "^1.0.2",
|
|
29
32
|
"react": "*",
|
|
30
33
|
"react-dom": "*"
|
|
31
34
|
},
|
|
@@ -33,7 +36,7 @@
|
|
|
33
36
|
"react-native-web": "*"
|
|
34
37
|
},
|
|
35
38
|
"devDependencies": {
|
|
36
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
39
|
+
"@tamagui/build": "^1.0.1-beta.29",
|
|
37
40
|
"@types/react": "^17.0.35",
|
|
38
41
|
"csstype": "^3.0.10",
|
|
39
42
|
"esbuild": "^0.14.36",
|
package/reset.css
CHANGED
package/types/Tamagui.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as Helpers from '@tamagui/helpers';
|
|
2
2
|
import { TamaguiInternalConfig } from './types';
|
|
3
3
|
declare class TamaguiManager {
|
|
4
|
-
rnw:
|
|
4
|
+
rnw: any;
|
|
5
5
|
Helpers: typeof Helpers;
|
|
6
6
|
get config(): TamaguiInternalConfig<import("./types").CreateTokens<import("./types").VariableVal>, {
|
|
7
7
|
[key: string]: Partial<import("./types").TamaguiBaseTheme> & {
|
package/types/Tamagui.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tamagui.d.ts","sourceRoot":"","sources":["../src/Tamagui.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,kBAAkB,CAAA;AAK3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAI/C,cAAM,cAAc;IAClB,GAAG,
|
|
1
|
+
{"version":3,"file":"Tamagui.d.ts","sourceRoot":"","sources":["../src/Tamagui.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,kBAAkB,CAAA;AAK3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAI/C,cAAM,cAAc;IAClB,GAAG,MAAM;IACT,OAAO,iBAAU;IAEjB,IAAI,MAAM;;;;;;;;;;;;;;OAET;IAED,IAAI,aAAa,cAEhB;IAED,IAAI,YAAY,OAEf;IAED,IAAI,aAAa,OAEhB;IAED,IAAI,iBAAiB,qBAEpB;CACF;AAED,eAAO,MAAM,OAAO,gBAAuB,CAAA;AAI3C,eAAO,MAAM,sBAAsB,eAAgB,MAAM,QAExD,CAAA;AAED,eAAO,MAAM,kBAAkB,eAAgB,MAAM,SAAS,GAAG,SAEhE,CAAA"}
|