@tamagui/core 1.0.1-beta.66 → 1.0.1-beta.69
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/constants/rnw.js +2 -13
- package/dist/cjs/constants/rnw.js.map +2 -2
- package/dist/cjs/createComponent.js +69 -47
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/helpers/createPropMapper.js +3 -0
- package/dist/cjs/helpers/createPropMapper.js.map +2 -2
- package/dist/cjs/helpers/generateAtomicStyles.js +133 -89
- package/dist/cjs/helpers/generateAtomicStyles.js.map +2 -2
- package/dist/cjs/helpers/getSplitStyles.js +27 -21
- package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
- package/dist/cjs/helpers/getStylesAtomic.js +22 -67
- package/dist/cjs/helpers/getStylesAtomic.js.map +2 -2
- package/dist/cjs/helpers/pseudos.js.map +1 -1
- package/dist/cjs/types.js.map +1 -1
- package/dist/esm/constants/rnw.js +2 -13
- package/dist/esm/constants/rnw.js.map +2 -2
- package/dist/esm/createComponent.js +69 -47
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/helpers/createPropMapper.js +3 -0
- package/dist/esm/helpers/createPropMapper.js.map +2 -2
- package/dist/esm/helpers/generateAtomicStyles.js +133 -89
- package/dist/esm/helpers/generateAtomicStyles.js.map +2 -2
- package/dist/esm/helpers/getSplitStyles.js +27 -22
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/getStylesAtomic.js +22 -67
- package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
- package/dist/esm/helpers/pseudos.js.map +1 -1
- package/dist/jsx/constants/rnw.js +2 -13
- package/dist/jsx/createComponent.js +67 -44
- package/dist/jsx/helpers/createPropMapper.js +3 -0
- package/dist/jsx/helpers/generateAtomicStyles.js +133 -89
- package/dist/jsx/helpers/getSplitStyles.js +27 -22
- package/dist/jsx/helpers/getStylesAtomic.js +22 -67
- package/package.json +6 -5
- package/types/constants/rnw.d.ts.map +1 -1
- package/types/createComponent.d.ts +3 -1
- package/types/createComponent.d.ts.map +1 -1
- package/types/helpers/generateAtomicStyles.d.ts +3 -12
- package/types/helpers/generateAtomicStyles.d.ts.map +1 -1
- package/types/helpers/getSplitStyles.d.ts +6 -0
- package/types/helpers/getSplitStyles.d.ts.map +1 -1
- package/types/helpers/getStylesAtomic.d.ts +0 -5
- package/types/helpers/getStylesAtomic.d.ts.map +1 -1
- package/types/helpers/pseudos.d.ts +1 -0
- package/types/helpers/pseudos.d.ts.map +1 -1
- package/types/types.d.ts +2 -1
- package/types/types.d.ts.map +1 -1
|
@@ -3,8 +3,43 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
|
|
|
3
3
|
import { simpleHash } from "@tamagui/helpers";
|
|
4
4
|
import hyphenateStyleName from "hyphenate-style-name";
|
|
5
5
|
import normalizeCSSColor from "normalize-css-color";
|
|
6
|
+
import { getConfig } from "../conf";
|
|
6
7
|
import { isWeb } from "../constants/platform";
|
|
8
|
+
import { reversedShorthands } from "../createTamagui";
|
|
7
9
|
import { pseudos } from "./pseudos";
|
|
10
|
+
const generateAtomicStyles = /* @__PURE__ */ __name((style, pseudo) => {
|
|
11
|
+
const res = expandStyles(style);
|
|
12
|
+
const out = [];
|
|
13
|
+
for (const key in res) {
|
|
14
|
+
const value = res[key];
|
|
15
|
+
if (value != null) {
|
|
16
|
+
const valueString = stringifyValueWithProperty(value, key);
|
|
17
|
+
const hash = simpleHash(key + valueString + ((pseudo == null ? void 0 : pseudo.name) || ""));
|
|
18
|
+
const cachedResult = cache.get(hash, valueString);
|
|
19
|
+
if (cachedResult != null) {
|
|
20
|
+
out.push(cachedResult);
|
|
21
|
+
} else {
|
|
22
|
+
const pseudoPrefix = pseudo ? `0${pseudo.name}-` : "";
|
|
23
|
+
const shortProp = reversedShorthands[key] || key;
|
|
24
|
+
const identifier = `_${shortProp}-${pseudoPrefix}${hash}`;
|
|
25
|
+
const rules = createAtomicRules(identifier, key, valueString, pseudo);
|
|
26
|
+
const styleObject = {
|
|
27
|
+
property: key,
|
|
28
|
+
pseudo: pseudo == null ? void 0 : pseudo.name,
|
|
29
|
+
value,
|
|
30
|
+
identifier,
|
|
31
|
+
rules
|
|
32
|
+
};
|
|
33
|
+
cache.set(hash, valueString, styleObject);
|
|
34
|
+
out.push(styleObject);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
if (style.borderColor === "transparent") {
|
|
39
|
+
debugger;
|
|
40
|
+
}
|
|
41
|
+
return out;
|
|
42
|
+
}, "generateAtomicStyles");
|
|
8
43
|
const reducedStyleKeys = {
|
|
9
44
|
shadowColor: true,
|
|
10
45
|
shadowOffset: true,
|
|
@@ -14,58 +49,116 @@ const reducedStyleKeys = {
|
|
|
14
49
|
textShadowOffset: true,
|
|
15
50
|
textShadowRadius: true
|
|
16
51
|
};
|
|
52
|
+
let shorthands = null;
|
|
17
53
|
function expandStyles(style) {
|
|
18
54
|
const res = {};
|
|
19
55
|
boxShadowReducer(res, style);
|
|
20
56
|
textShadowReducer(res, style);
|
|
21
|
-
|
|
57
|
+
borderReducer(res, style);
|
|
58
|
+
for (let key in style) {
|
|
59
|
+
shorthands = shorthands || getConfig().shorthands;
|
|
60
|
+
if (shorthands) {
|
|
61
|
+
key = shorthands[key] || key;
|
|
62
|
+
}
|
|
22
63
|
if (reducedStyleKeys[key])
|
|
23
64
|
continue;
|
|
24
65
|
if (key in pseudos) {
|
|
25
66
|
res[key] = expandStyles(style[key]);
|
|
26
67
|
} else {
|
|
27
|
-
|
|
68
|
+
const val = normalizeValueWithProperty(style[key], key);
|
|
69
|
+
const out = expandStyle(key, val);
|
|
70
|
+
if (out) {
|
|
71
|
+
Object.assign(res, Object.fromEntries(out));
|
|
72
|
+
} else {
|
|
73
|
+
res[key] = val;
|
|
74
|
+
}
|
|
28
75
|
}
|
|
29
76
|
}
|
|
30
77
|
return res;
|
|
31
78
|
}
|
|
32
79
|
__name(expandStyles, "expandStyles");
|
|
33
|
-
function
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
} else {
|
|
39
|
-
style[key] = value;
|
|
80
|
+
function borderReducer(res, cur) {
|
|
81
|
+
for (const key in borderDefaults) {
|
|
82
|
+
if (key in cur) {
|
|
83
|
+
res[borderDefaults[key]] = cur[borderDefaults[key]] || "solid";
|
|
84
|
+
}
|
|
40
85
|
}
|
|
41
86
|
}
|
|
42
|
-
__name(
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
87
|
+
__name(borderReducer, "borderReducer");
|
|
88
|
+
const borderDefaults = {
|
|
89
|
+
borderWidth: "borderStyle",
|
|
90
|
+
borderBottomWidth: "borderBottomStyle",
|
|
91
|
+
borderTopWidth: "borderTopStyle",
|
|
92
|
+
borderLeftWidth: "borderLeftStyle",
|
|
93
|
+
borderRightWidth: "borderRightStyle"
|
|
94
|
+
};
|
|
95
|
+
function createDeclarationBlock(style, important = false) {
|
|
96
|
+
let declarations = "";
|
|
97
|
+
for (const key in style) {
|
|
98
|
+
const prop = hyphenateStyleName(key);
|
|
99
|
+
const value = style[key];
|
|
100
|
+
declarations += `${prop}:${value}`;
|
|
101
|
+
}
|
|
102
|
+
return `{${declarations}${important ? ` !important` : ""};}`;
|
|
103
|
+
}
|
|
104
|
+
__name(createDeclarationBlock, "createDeclarationBlock");
|
|
105
|
+
const pseudoSelectorPrefixes = (() => {
|
|
106
|
+
const res = {};
|
|
107
|
+
for (const key in pseudos) {
|
|
108
|
+
const pseudo = pseudos[key];
|
|
109
|
+
res[pseudo.name] = [...Array(pseudo.priority)].map(() => ":root").join("") + " ";
|
|
110
|
+
}
|
|
111
|
+
return res;
|
|
112
|
+
})();
|
|
113
|
+
function createAtomicRules(identifier, property, value, pseudo) {
|
|
114
|
+
const selector = pseudo ? `${pseudoSelectorPrefixes[pseudo.name]} .${identifier}:${pseudo.name}` : `.${identifier}`;
|
|
115
|
+
const important = !!pseudo;
|
|
116
|
+
let rules = [];
|
|
117
|
+
switch (property) {
|
|
118
|
+
case "placeholderTextColor": {
|
|
119
|
+
const block = createDeclarationBlock({ color: value, opacity: 1 }, important);
|
|
120
|
+
rules.push(`${selector}::placeholder${block}`);
|
|
121
|
+
break;
|
|
122
|
+
}
|
|
123
|
+
case "pointerEvents": {
|
|
124
|
+
let finalValue = value;
|
|
125
|
+
if (value === "auto" || value === "box-only") {
|
|
126
|
+
finalValue = "auto!important";
|
|
127
|
+
if (value === "box-only") {
|
|
128
|
+
const block2 = createDeclarationBlock({ pointerEvents: "none" }, important);
|
|
129
|
+
rules.push(`${selector}>*${block2}`);
|
|
130
|
+
}
|
|
131
|
+
} else if (value === "none" || value === "box-none") {
|
|
132
|
+
finalValue = "none!important";
|
|
133
|
+
if (value === "box-none") {
|
|
134
|
+
const block2 = createDeclarationBlock({ pointerEvents: "auto" }, important);
|
|
135
|
+
rules.push(`${selector}>*${block2}`);
|
|
136
|
+
}
|
|
64
137
|
}
|
|
138
|
+
const block = createDeclarationBlock({ pointerEvents: finalValue }, important);
|
|
139
|
+
rules.push(`${selector}${block}`);
|
|
140
|
+
break;
|
|
141
|
+
}
|
|
142
|
+
case "scrollbarWidth": {
|
|
143
|
+
if (value === "none") {
|
|
144
|
+
rules.push(`${selector}::-webkit-scrollbar{display:none}`);
|
|
145
|
+
}
|
|
146
|
+
const block = createDeclarationBlock({ scrollbarWidth: value }, important);
|
|
147
|
+
rules.push(`${selector}${block}`);
|
|
148
|
+
break;
|
|
149
|
+
}
|
|
150
|
+
default: {
|
|
151
|
+
const block = createDeclarationBlock({ [property]: value }, important);
|
|
152
|
+
rules.push(`${selector}${block}`);
|
|
153
|
+
break;
|
|
65
154
|
}
|
|
66
155
|
}
|
|
67
|
-
|
|
68
|
-
}
|
|
156
|
+
if ((pseudo == null ? void 0 : pseudo.name) === "hover") {
|
|
157
|
+
rules = rules.map((r) => `@media not all and (hover: none) { ${r} }`);
|
|
158
|
+
}
|
|
159
|
+
return rules;
|
|
160
|
+
}
|
|
161
|
+
__name(createAtomicRules, "createAtomicRules");
|
|
69
162
|
function expandStyle(key, value) {
|
|
70
163
|
if (key === "flex") {
|
|
71
164
|
if (value <= -1) {
|
|
@@ -130,61 +223,6 @@ function expandStyle(key, value) {
|
|
|
130
223
|
}
|
|
131
224
|
}
|
|
132
225
|
__name(expandStyle, "expandStyle");
|
|
133
|
-
function createAtomicRules(identifier, property, value) {
|
|
134
|
-
const rules = [];
|
|
135
|
-
const selector = `.${identifier}`;
|
|
136
|
-
switch (property) {
|
|
137
|
-
case "placeholderTextColor": {
|
|
138
|
-
const block = createDeclarationBlock({ color: value, opacity: 1 });
|
|
139
|
-
rules.push(`${selector}::placeholder${block}`);
|
|
140
|
-
break;
|
|
141
|
-
}
|
|
142
|
-
case "pointerEvents": {
|
|
143
|
-
let finalValue = value;
|
|
144
|
-
if (value === "auto" || value === "box-only") {
|
|
145
|
-
finalValue = "auto!important";
|
|
146
|
-
if (value === "box-only") {
|
|
147
|
-
const block2 = createDeclarationBlock({ pointerEvents: "none" });
|
|
148
|
-
rules.push(`${selector}>*${block2}`);
|
|
149
|
-
}
|
|
150
|
-
} else if (value === "none" || value === "box-none") {
|
|
151
|
-
finalValue = "none!important";
|
|
152
|
-
if (value === "box-none") {
|
|
153
|
-
const block2 = createDeclarationBlock({ pointerEvents: "auto" });
|
|
154
|
-
rules.push(`${selector}>*${block2}`);
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
const block = createDeclarationBlock({ pointerEvents: finalValue });
|
|
158
|
-
rules.push(`${selector}${block}`);
|
|
159
|
-
break;
|
|
160
|
-
}
|
|
161
|
-
case "scrollbarWidth": {
|
|
162
|
-
if (value === "none") {
|
|
163
|
-
rules.push(`${selector}::-webkit-scrollbar{display:none}`);
|
|
164
|
-
}
|
|
165
|
-
const block = createDeclarationBlock({ scrollbarWidth: value });
|
|
166
|
-
rules.push(`${selector}${block}`);
|
|
167
|
-
break;
|
|
168
|
-
}
|
|
169
|
-
default: {
|
|
170
|
-
const block = createDeclarationBlock({ [property]: value });
|
|
171
|
-
rules.push(`${selector}${block}`);
|
|
172
|
-
break;
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
return rules;
|
|
176
|
-
}
|
|
177
|
-
__name(createAtomicRules, "createAtomicRules");
|
|
178
|
-
function createDeclarationBlock(style) {
|
|
179
|
-
const domStyle = expandStyles(style);
|
|
180
|
-
const declarationsString = Object.keys(domStyle).map((property) => {
|
|
181
|
-
const value = domStyle[property];
|
|
182
|
-
const prop = hyphenateStyleName(property);
|
|
183
|
-
return `${prop}:${value}`;
|
|
184
|
-
}).sort().join(";");
|
|
185
|
-
return `{${declarationsString};}`;
|
|
186
|
-
}
|
|
187
|
-
__name(createDeclarationBlock, "createDeclarationBlock");
|
|
188
226
|
const cache = {
|
|
189
227
|
get(property, value) {
|
|
190
228
|
if (cache[property] != null && cache[property].hasOwnProperty(value) && cache[property][value] != null) {
|
|
@@ -257,7 +295,13 @@ const normalizeColor = /* @__PURE__ */ __name((color, opacity = 1) => {
|
|
|
257
295
|
}
|
|
258
296
|
return `${color}`;
|
|
259
297
|
}, "normalizeColor");
|
|
260
|
-
const
|
|
298
|
+
const webColors = {
|
|
299
|
+
currentColor: true,
|
|
300
|
+
currentcolor: true,
|
|
301
|
+
transparent: true,
|
|
302
|
+
inherit: true
|
|
303
|
+
};
|
|
304
|
+
const isWebColor = /* @__PURE__ */ __name((color) => webColors[color] || color.indexOf("var(") === 0, "isWebColor");
|
|
261
305
|
const processColor = /* @__PURE__ */ __name((color) => {
|
|
262
306
|
if (color === void 0 || color === null) {
|
|
263
307
|
return color;
|
|
@@ -7,7 +7,7 @@ import { isClient, isWeb, useIsomorphicLayoutEffect } from "../constants/platfor
|
|
|
7
7
|
import { mediaQueryConfig, mediaState } from "../hooks/useMedia";
|
|
8
8
|
import { createMediaStyle } from "./createMediaStyle";
|
|
9
9
|
import { fixNativeShadow } from "./fixNativeShadow";
|
|
10
|
-
import { getStylesAtomic
|
|
10
|
+
import { getStylesAtomic } from "./getStylesAtomic";
|
|
11
11
|
import {
|
|
12
12
|
insertStyleRule,
|
|
13
13
|
insertedTransforms,
|
|
@@ -15,6 +15,7 @@ import {
|
|
|
15
15
|
updateInsertedCache
|
|
16
16
|
} from "./insertStyleRule";
|
|
17
17
|
import { mergeTransform } from "./mergeTransform";
|
|
18
|
+
import { pseudos as pseudoAttrs } from "./pseudos";
|
|
18
19
|
const skipProps = {
|
|
19
20
|
animation: true,
|
|
20
21
|
animateOnly: true,
|
|
@@ -35,6 +36,11 @@ const skipProps = {
|
|
|
35
36
|
}
|
|
36
37
|
};
|
|
37
38
|
let conf;
|
|
39
|
+
const pseudoCNInverse = {
|
|
40
|
+
hover: "hoverStyle",
|
|
41
|
+
focus: "focusStyle",
|
|
42
|
+
press: "pressStyle"
|
|
43
|
+
};
|
|
38
44
|
const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames, debug) => {
|
|
39
45
|
var _a;
|
|
40
46
|
conf = conf || getConfig();
|
|
@@ -44,6 +50,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
44
50
|
const medias = {};
|
|
45
51
|
const usedKeys = /* @__PURE__ */ new Set();
|
|
46
52
|
let style = {};
|
|
53
|
+
if (state.hasTextAncestor) {
|
|
54
|
+
style.display = "inline-flex";
|
|
55
|
+
}
|
|
47
56
|
let classNames = {};
|
|
48
57
|
let transforms = null;
|
|
49
58
|
const rulesToInsert = [];
|
|
@@ -90,6 +99,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
90
99
|
}
|
|
91
100
|
__name(mergeClassName, "mergeClassName");
|
|
92
101
|
const propKeys = Object.keys(props);
|
|
102
|
+
const shouldDoClasses = isWeb && !state.noClassNames;
|
|
93
103
|
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
94
104
|
console.log("propKeys", propKeys);
|
|
95
105
|
}
|
|
@@ -129,18 +139,18 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
129
139
|
}
|
|
130
140
|
for (const cn of valInit.split(" ")) {
|
|
131
141
|
if (cn[0] === "_") {
|
|
132
|
-
const [shorthand,
|
|
133
|
-
const isMedia2 =
|
|
134
|
-
const isPseudo2 =
|
|
142
|
+
const [shorthand, mediaOrPseudo] = cn.slice(1).split("-");
|
|
143
|
+
const isMedia2 = mediaOrPseudo[0] === "_";
|
|
144
|
+
const isPseudo2 = mediaOrPseudo[0] === "0";
|
|
135
145
|
const isMediaOrPseudo2 = isMedia2 || isPseudo2;
|
|
136
146
|
let fullKey = conf.shorthands[shorthand];
|
|
137
147
|
if (isMedia2) {
|
|
138
|
-
let mediaShortKey =
|
|
148
|
+
let mediaShortKey = mediaOrPseudo.slice(1);
|
|
139
149
|
mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf("_"));
|
|
140
|
-
fullKey +=
|
|
150
|
+
fullKey += `_${mediaShortKey}`;
|
|
141
151
|
} else if (isPseudo2) {
|
|
142
|
-
const pseudoShortKey =
|
|
143
|
-
fullKey +=
|
|
152
|
+
const pseudoShortKey = mediaOrPseudo.slice(1);
|
|
153
|
+
fullKey += `_${pseudoShortKey}`;
|
|
144
154
|
}
|
|
145
155
|
usedKeys.add(fullKey);
|
|
146
156
|
mergeClassName(fullKey, cn, isMediaOrPseudo2);
|
|
@@ -154,7 +164,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
154
164
|
}
|
|
155
165
|
continue;
|
|
156
166
|
}
|
|
157
|
-
if (
|
|
167
|
+
if (valInit && valInit[0] === "_") {
|
|
158
168
|
usedKeys.add(keyInit);
|
|
159
169
|
mergeClassName(keyInit, valInit);
|
|
160
170
|
continue;
|
|
@@ -204,10 +214,10 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
204
214
|
}
|
|
205
215
|
pseudos[key] = pseudos[key] || {};
|
|
206
216
|
pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true);
|
|
207
|
-
if (
|
|
217
|
+
if (shouldDoClasses) {
|
|
208
218
|
const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] });
|
|
209
219
|
for (const style2 of pseudoStyles) {
|
|
210
|
-
const fullKey = `${style2.property}
|
|
220
|
+
const fullKey = `${style2.property}_${pseudoAttrs[key].name}`;
|
|
211
221
|
if (!usedKeys.has(fullKey)) {
|
|
212
222
|
usedKeys.add(fullKey);
|
|
213
223
|
addStyle(style2.identifier, style2.rules.join(";"));
|
|
@@ -227,7 +237,6 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
227
237
|
continue;
|
|
228
238
|
}
|
|
229
239
|
const mediaStyle = getSubStyle(val, staticConfig, theme, props, state);
|
|
230
|
-
const shouldDoClasses = isWeb && !state.noClassNames;
|
|
231
240
|
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
232
241
|
console.log(" \xBB getSplitStyles mediaStyle", { mediaKey, mediaStyle, props, shouldDoClasses });
|
|
233
242
|
}
|
|
@@ -235,7 +244,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
235
244
|
const mediaStyles = getStylesAtomic(mediaStyle);
|
|
236
245
|
for (const style2 of mediaStyles) {
|
|
237
246
|
const out = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
|
|
238
|
-
const fullKey = `${style2.property}
|
|
247
|
+
const fullKey = `${style2.property}_${mediaKeyShort}`;
|
|
239
248
|
if (!usedKeys.has(fullKey)) {
|
|
240
249
|
usedKeys.add(fullKey);
|
|
241
250
|
addStyle(out.identifier, out.styleRule);
|
|
@@ -261,15 +270,10 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
261
270
|
usedKeys.add(key);
|
|
262
271
|
if (val && val[0] === "_") {
|
|
263
272
|
classNames[key] = val;
|
|
273
|
+
} else if (key in stylePropsTransform) {
|
|
274
|
+
mergeTransform(style, key, val, true);
|
|
264
275
|
} else {
|
|
265
|
-
|
|
266
|
-
if (process.env.NODE_ENV === "development" && debug) {
|
|
267
|
-
console.log(" > mergeTransform", key, val);
|
|
268
|
-
}
|
|
269
|
-
mergeTransform(style, key, val, true);
|
|
270
|
-
} else {
|
|
271
|
-
style[key] = val;
|
|
272
|
-
}
|
|
276
|
+
style[key] = val;
|
|
273
277
|
}
|
|
274
278
|
continue;
|
|
275
279
|
}
|
|
@@ -287,7 +291,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
287
291
|
...classNames
|
|
288
292
|
};
|
|
289
293
|
}
|
|
290
|
-
if (
|
|
294
|
+
if (shouldDoClasses) {
|
|
291
295
|
const atomic = getStylesAtomic(style);
|
|
292
296
|
for (const atomicStyle of atomic) {
|
|
293
297
|
const key = atomicStyle.property;
|
|
@@ -375,5 +379,6 @@ export {
|
|
|
375
379
|
getSubStyle,
|
|
376
380
|
insertSplitStyles,
|
|
377
381
|
normalizeStyleObject,
|
|
382
|
+
pseudoCNInverse,
|
|
378
383
|
useSplitStyles
|
|
379
384
|
};
|
|
@@ -1,18 +1,15 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
3
|
import { stylePropsTransform } from "@tamagui/helpers";
|
|
4
|
-
import { reversedShorthands } from "../createTamagui";
|
|
5
4
|
import { isVariable } from "../createVariable";
|
|
6
5
|
import { generateAtomicStyles } from "./generateAtomicStyles";
|
|
7
6
|
import { invertMapTransformKeys, mergeTransform } from "./mergeTransform";
|
|
8
7
|
import { pseudos } from "./pseudos";
|
|
9
8
|
const pseudosOrdered = Object.values(pseudos);
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
};
|
|
15
|
-
function getStylesAtomic(stylesIn, options = {}) {
|
|
9
|
+
function getStylesAtomic(stylesIn, options) {
|
|
10
|
+
if (!stylesIn.hoverStyle && !stylesIn.pressStyle && !stylesIn.focusStyle) {
|
|
11
|
+
return getAtomicStyle(stylesIn, void 0, options);
|
|
12
|
+
}
|
|
16
13
|
const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn;
|
|
17
14
|
let res = [];
|
|
18
15
|
for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {
|
|
@@ -36,75 +33,33 @@ function getStylesAtomic(stylesIn, options = {}) {
|
|
|
36
33
|
}
|
|
37
34
|
__name(getStylesAtomic, "getStylesAtomic");
|
|
38
35
|
function getAtomicStyle(style, pseudo, options) {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
if (
|
|
45
|
-
|
|
36
|
+
if (process.env.NODE_ENV === "development") {
|
|
37
|
+
if (!style || typeof style !== "object") {
|
|
38
|
+
throw new Error(`Wrong style type: "${typeof style}": ${style}`);
|
|
39
|
+
}
|
|
40
|
+
} else {
|
|
41
|
+
if (!style) {
|
|
42
|
+
console.warn(`Invalid style`);
|
|
43
|
+
return [];
|
|
46
44
|
}
|
|
47
45
|
}
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
if (options && options.splitTransforms && style.transform) {
|
|
47
|
+
let atomicStyles = [];
|
|
50
48
|
let { transform, ...rest } = style;
|
|
51
|
-
style = rest;
|
|
52
49
|
for (const t of transform) {
|
|
53
50
|
const tKey = Object.keys(t)[0];
|
|
54
51
|
const transformProperty = invertMapTransformKeys[tKey] || tKey;
|
|
55
|
-
const out = generateAtomicStyles({ transform: [t] });
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
};
|
|
52
|
+
const out = generateAtomicStyles({ transform: [t] }, pseudo)[0];
|
|
53
|
+
atomicStyles.push({
|
|
54
|
+
...out,
|
|
55
|
+
property: transformProperty
|
|
56
|
+
});
|
|
61
57
|
}
|
|
58
|
+
return [...atomicStyles, ...generateAtomicStyles(rest, pseudo)];
|
|
62
59
|
}
|
|
63
|
-
|
|
64
|
-
Object.assign(atomicStyles, generateAtomicStyles(style));
|
|
65
|
-
}
|
|
66
|
-
return Object.keys(atomicStyles).map((key) => {
|
|
67
|
-
const val = atomicStyles[key];
|
|
68
|
-
const hash = val.identifier;
|
|
69
|
-
const psuedoPrefix = pseudo ? `0${pseudo.name}-` : "";
|
|
70
|
-
if (!val.property) {
|
|
71
|
-
throw new Error(`no prop`);
|
|
72
|
-
}
|
|
73
|
-
const shortProp = reversedShorthands[val.property] || val.property;
|
|
74
|
-
const identifier = `_${shortProp}-${psuedoPrefix}${hash}`;
|
|
75
|
-
const className = `.${identifier}`;
|
|
76
|
-
const rules = val.rules.map((rule) => {
|
|
77
|
-
if (pseudo) {
|
|
78
|
-
const psuedoPrefixSelect = [...Array(pseudo.priority)].map(() => ":root").join("") + " ";
|
|
79
|
-
let res = rule.replace(`.${val.identifier}`, `${psuedoPrefixSelect} ${className}`).replace("{", `:${pseudo.name}{`).replace(";", " !important;");
|
|
80
|
-
if (pseudo.name === "hover") {
|
|
81
|
-
res = `@media not all and (hover: none) { ${res} }`;
|
|
82
|
-
}
|
|
83
|
-
return res;
|
|
84
|
-
}
|
|
85
|
-
return rule.replace(`.${val.identifier}`, className).replace(importantRegex, "");
|
|
86
|
-
});
|
|
87
|
-
const result = {
|
|
88
|
-
property: val.transformProperty || val.property,
|
|
89
|
-
pseudo: pseudo == null ? void 0 : pseudo.name,
|
|
90
|
-
value: val.value,
|
|
91
|
-
identifier,
|
|
92
|
-
className,
|
|
93
|
-
rules
|
|
94
|
-
};
|
|
95
|
-
return result;
|
|
96
|
-
});
|
|
60
|
+
return generateAtomicStyles(style, pseudo);
|
|
97
61
|
}
|
|
98
62
|
__name(getAtomicStyle, "getAtomicStyle");
|
|
99
|
-
const importantRegex = /\!important*/g;
|
|
100
|
-
const borderDefaults = {
|
|
101
|
-
borderWidth: "borderStyle",
|
|
102
|
-
borderBottomWidth: "borderBottomStyle",
|
|
103
|
-
borderTopWidth: "borderTopStyle",
|
|
104
|
-
borderLeftWidth: "borderLeftStyle",
|
|
105
|
-
borderRightWidth: "borderRightStyle"
|
|
106
|
-
};
|
|
107
63
|
export {
|
|
108
|
-
getStylesAtomic
|
|
109
|
-
psuedoCNInverse
|
|
64
|
+
getStylesAtomic
|
|
110
65
|
};
|
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.69",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -21,10 +21,11 @@
|
|
|
21
21
|
],
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@expo/match-media": "^0.3.0",
|
|
24
|
-
"@tamagui/
|
|
24
|
+
"@tamagui/compose-refs": "^1.0.1-beta.69",
|
|
25
|
+
"@tamagui/helpers": "^1.0.1-beta.69",
|
|
25
26
|
"@tamagui/ow": "^0.28.1",
|
|
26
|
-
"@tamagui/use-debounce": "^1.0.1-beta.
|
|
27
|
-
"@tamagui/use-force-update": "^1.0.1-beta.
|
|
27
|
+
"@tamagui/use-debounce": "^1.0.1-beta.69",
|
|
28
|
+
"@tamagui/use-force-update": "^1.0.1-beta.69",
|
|
28
29
|
"expo-screen-orientation": "^4.2.0",
|
|
29
30
|
"hyphenate-style-name": "^1.0.4",
|
|
30
31
|
"normalize-css-color": "^1.0.2",
|
|
@@ -35,7 +36,7 @@
|
|
|
35
36
|
"react-native-web": "*"
|
|
36
37
|
},
|
|
37
38
|
"devDependencies": {
|
|
38
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
39
|
+
"@tamagui/build": "^1.0.1-beta.69",
|
|
39
40
|
"@types/react": "^17.0.35",
|
|
40
41
|
"csstype": "^3.0.10",
|
|
41
42
|
"esbuild": "^0.14.36",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rnw.d.ts","sourceRoot":"","sources":["../../src/constants/rnw.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"rnw.d.ts","sourceRoot":"","sources":["../../src/constants/rnw.tsx"],"names":[],"mappings":"AACA,eAAO,MAAM,GAAG,EAAE,GAAQ,CAAA"}
|
|
@@ -24,7 +24,9 @@ export declare type SpacedChildrenProps = {
|
|
|
24
24
|
separator?: React.ReactNode;
|
|
25
25
|
};
|
|
26
26
|
export declare function spacedChildren({ isZStack, children, space, direction, spaceFlex, separator, }: SpacedChildrenProps): any;
|
|
27
|
-
export declare function AbsoluteFill(props:
|
|
27
|
+
export declare function AbsoluteFill(props: {
|
|
28
|
+
children?: React.ReactNode;
|
|
29
|
+
}): JSX.Element;
|
|
28
30
|
export declare function assignNativePropsToWeb(elementType: string, viewProps: any, nativeProps: any): void;
|
|
29
31
|
export {};
|
|
30
32
|
//# sourceMappingURL=createComponent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAWN,MAAM,OAAO,CAAA;AAqBd,OAAO,EACL,kBAAkB,EAClB,WAAW,EACX,UAAU,EACV,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAGhB,cAAc,EAGf,MAAM,SAAS,CAAA;AAgBhB,eAAO,MAAM,QAAQ,eAAsB,CAAA;AA0B3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EACjB,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,EAAE,eAAe,CAAC,EAAE,iBAAiB,
|
|
1
|
+
{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAWN,MAAM,OAAO,CAAA;AAqBd,OAAO,EACL,kBAAkB,EAClB,WAAW,EACX,UAAU,EACV,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAGhB,cAAc,EAGf,MAAM,SAAS,CAAA;AAgBhB,eAAO,MAAM,QAAQ,eAAsB,CAAA;AA0B3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EACjB,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,EAAE,eAAe,CAAC,EAAE,iBAAiB,4DAq7B1F;AAKD,eAAO,MAAM,QAAQ;YAAW;QAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAE;;CAEjD,CAAA;AAMD,aAAK,cAAc,GAAG,UAAU,GAAG,YAAY,CAAA;AAE/C,oBAAY,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,WAAW,CAAC,GAAG;IACjE,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAA;IAC3B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,cAAc,CAAA;CAC3B,CAAA;AACD,eAAO,MAAM,MAAM,0DA2CjB,CAAA;AAEF,oBAAY,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAC9B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B,CAAA;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,SAAS,EACT,SAAS,EACT,SAAS,GACV,EAAE,mBAAmB,OAgFrB;AA2BD,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,eAMjE;AA6BD,wBAAgB,sBAAsB,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,QA6K3F"}
|
|
@@ -1,21 +1,12 @@
|
|
|
1
|
+
import { StyleObject } from '@tamagui/helpers';
|
|
1
2
|
import { TextStyle, ViewStyle } from 'react-native';
|
|
3
|
+
import { PseudoDescriptor } from './pseudos';
|
|
2
4
|
declare type Value = Object | Array<any> | string | number;
|
|
3
5
|
export declare type Style = {
|
|
4
6
|
[key: string]: Value;
|
|
5
7
|
};
|
|
6
|
-
declare
|
|
7
|
-
declare type Rules = Array<Rule>;
|
|
8
|
-
export declare type RulesData = {
|
|
9
|
-
property?: string;
|
|
10
|
-
value?: string;
|
|
11
|
-
identifier: string;
|
|
12
|
-
rules: Rules;
|
|
13
|
-
};
|
|
14
|
-
declare type CompilerOutput = {
|
|
15
|
-
[key: string]: RulesData;
|
|
16
|
-
};
|
|
8
|
+
export declare const generateAtomicStyles: (style: ViewStyle & TextStyle, pseudo?: PseudoDescriptor) => StyleObject[];
|
|
17
9
|
export declare function expandStyles(style: any): {};
|
|
18
|
-
export declare const generateAtomicStyles: (style: ViewStyle & TextStyle) => CompilerOutput;
|
|
19
10
|
export declare function expandStyle(key: string, value: any): any;
|
|
20
11
|
export {};
|
|
21
12
|
//# sourceMappingURL=generateAtomicStyles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generateAtomicStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/generateAtomicStyles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"generateAtomicStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/generateAtomicStyles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAc,MAAM,kBAAkB,CAAA;AAG1D,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAKnD,OAAO,EAAE,gBAAgB,EAAW,MAAM,WAAW,CAAA;AAErD,aAAK,KAAK,GAAG,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,MAAM,CAAA;AAClD,oBAAY,KAAK,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,CAAA;CAAE,CAAA;AAE5C,eAAO,MAAM,oBAAoB,UACxB,SAAS,GAAG,SAAS,WACnB,gBAAgB,KACxB,WAAW,EAgCb,CAAA;AAeD,wBAAgB,YAAY,CAAC,KAAK,EAAE,GAAG,MAwBtC;AAiHD,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,OA8ElD"}
|
|
@@ -7,6 +7,7 @@ declare type StyleSplitter = (props: {
|
|
|
7
7
|
[key: string]: any;
|
|
8
8
|
}, staticConfig: StaticConfigParsed, theme: ThemeObject, state: SplitStyleState & {
|
|
9
9
|
keepVariantsAsProps?: boolean;
|
|
10
|
+
hasTextAncestor?: boolean;
|
|
10
11
|
}, defaultClassNames?: any, debug?: DebugProp) => {
|
|
11
12
|
pseudos: PseudoStyles;
|
|
12
13
|
medias: Record<MediaKeys, ViewStyle>;
|
|
@@ -15,6 +16,11 @@ declare type StyleSplitter = (props: {
|
|
|
15
16
|
rulesToInsert: [string, string][];
|
|
16
17
|
viewProps: StackProps;
|
|
17
18
|
};
|
|
19
|
+
export declare const pseudoCNInverse: {
|
|
20
|
+
hover: string;
|
|
21
|
+
focus: string;
|
|
22
|
+
press: string;
|
|
23
|
+
};
|
|
18
24
|
export declare const getSplitStyles: StyleSplitter;
|
|
19
25
|
export declare const insertSplitStyles: StyleSplitter;
|
|
20
26
|
export declare const useSplitStyles: StyleSplitter;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAKxC,OAAO,EACL,SAAS,EACT,SAAS,
|
|
1
|
+
{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAKxC,OAAO,EACL,SAAS,EACT,SAAS,EAGT,YAAY,EACZ,eAAe,EACf,UAAU,EACV,kBAAkB,EAElB,WAAW,EACZ,MAAM,UAAU,CAAA;AAajB,oBAAY,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAC3D,oBAAY,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AACrD,oBAAY,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AA2BhE,aAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,kBAAkB,EAChC,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,eAAe,GAAG;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,EACD,iBAAiB,CAAC,EAAE,GAAG,EACvB,KAAK,CAAC,EAAE,SAAS,KACd;IACH,OAAO,EAAE,YAAY,CAAA;IACrB,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;IACpC,KAAK,EAAE,SAAS,CAAA;IAChB,UAAU,EAAE,gBAAgB,CAAA;IAC5B,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAA;IACjC,SAAS,EAAE,UAAU,CAAA;CACtB,CAAA;AAID,eAAO,MAAM,eAAe;;;;CAI3B,CAAA;AASD,eAAO,MAAM,cAAc,EAAE,aA8W5B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,aAM/B,CAAA;AAID,eAAO,MAAM,cAAc,EAAE,aAQ5B,CAAA;AAED,eAAO,MAAM,WAAW,YACb,MAAM,gBACD,kBAAkB,SACzB,WAAW,SACX,GAAG,SACH,eAAe,sBACF,OAAO,KAC1B,SAeF,CAAA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,GAAG,QAI9C"}
|
|
@@ -8,11 +8,6 @@ export declare type ViewStyleWithPseudos = ViewStyle & {
|
|
|
8
8
|
declare type AtomicStyleOptions = {
|
|
9
9
|
splitTransforms?: boolean;
|
|
10
10
|
};
|
|
11
|
-
export declare const psuedoCNInverse: {
|
|
12
|
-
hover: string;
|
|
13
|
-
focus: string;
|
|
14
|
-
press: string;
|
|
15
|
-
};
|
|
16
11
|
export declare function getStylesAtomic(stylesIn: ViewStyleWithPseudos, options?: AtomicStyleOptions): StyleObject[];
|
|
17
12
|
export {};
|
|
18
13
|
//# sourceMappingURL=getStylesAtomic.d.ts.map
|