@tamagui/core 1.0.1-beta.68 → 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.
Files changed (43) hide show
  1. package/dist/cjs/constants/rnw.js +2 -13
  2. package/dist/cjs/constants/rnw.js.map +2 -2
  3. package/dist/cjs/createComponent.js +18 -16
  4. package/dist/cjs/createComponent.js.map +2 -2
  5. package/dist/cjs/helpers/createPropMapper.js +3 -0
  6. package/dist/cjs/helpers/createPropMapper.js.map +2 -2
  7. package/dist/cjs/helpers/generateAtomicStyles.js +133 -89
  8. package/dist/cjs/helpers/generateAtomicStyles.js.map +2 -2
  9. package/dist/cjs/helpers/getSplitStyles.js +22 -21
  10. package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
  11. package/dist/cjs/helpers/getStylesAtomic.js +22 -67
  12. package/dist/cjs/helpers/getStylesAtomic.js.map +2 -2
  13. package/dist/cjs/helpers/pseudos.js.map +1 -1
  14. package/dist/esm/constants/rnw.js +2 -13
  15. package/dist/esm/constants/rnw.js.map +2 -2
  16. package/dist/esm/createComponent.js +18 -16
  17. package/dist/esm/createComponent.js.map +2 -2
  18. package/dist/esm/helpers/createPropMapper.js +3 -0
  19. package/dist/esm/helpers/createPropMapper.js.map +2 -2
  20. package/dist/esm/helpers/generateAtomicStyles.js +133 -89
  21. package/dist/esm/helpers/generateAtomicStyles.js.map +2 -2
  22. package/dist/esm/helpers/getSplitStyles.js +22 -22
  23. package/dist/esm/helpers/getSplitStyles.js.map +2 -2
  24. package/dist/esm/helpers/getStylesAtomic.js +22 -67
  25. package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
  26. package/dist/esm/helpers/pseudos.js.map +1 -1
  27. package/dist/jsx/constants/rnw.js +2 -13
  28. package/dist/jsx/createComponent.js +18 -16
  29. package/dist/jsx/helpers/createPropMapper.js +3 -0
  30. package/dist/jsx/helpers/generateAtomicStyles.js +133 -89
  31. package/dist/jsx/helpers/getSplitStyles.js +22 -22
  32. package/dist/jsx/helpers/getStylesAtomic.js +22 -67
  33. package/package.json +6 -6
  34. package/types/constants/rnw.d.ts.map +1 -1
  35. package/types/createComponent.d.ts.map +1 -1
  36. package/types/helpers/generateAtomicStyles.d.ts +3 -12
  37. package/types/helpers/generateAtomicStyles.d.ts.map +1 -1
  38. package/types/helpers/getSplitStyles.d.ts +6 -0
  39. package/types/helpers/getSplitStyles.d.ts.map +1 -1
  40. package/types/helpers/getStylesAtomic.d.ts +0 -5
  41. package/types/helpers/getStylesAtomic.d.ts.map +1 -1
  42. package/types/helpers/pseudos.d.ts +1 -0
  43. package/types/helpers/pseudos.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
- for (const key in style) {
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
- updateReactDOMStyle(res, key, style[key]);
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 updateReactDOMStyle(style, key, value) {
34
- value = normalizeValueWithProperty(value, key);
35
- const out = expandStyle(key, value);
36
- if (out) {
37
- Object.assign(style, Object.fromEntries(out));
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(updateReactDOMStyle, "updateReactDOMStyle");
43
- const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
44
- const res = expandStyles(style);
45
- const out = {};
46
- for (const key in res) {
47
- const value = res[key];
48
- if (value != null) {
49
- const valueString = stringifyValueWithProperty(value, key);
50
- const cachedResult = cache.get(key, valueString);
51
- if (cachedResult != null) {
52
- const { identifier } = cachedResult;
53
- out[identifier] = cachedResult;
54
- } else {
55
- const identifier = simpleHash(key + valueString);
56
- const rules = createAtomicRules(identifier, key, valueString);
57
- const cachedResult2 = cache.set(key, valueString, {
58
- property: key,
59
- value: valueString,
60
- identifier,
61
- rules
62
- });
63
- out[identifier] = cachedResult2;
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
- return out;
68
- }, "generateAtomicStyles");
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 isWebColor = /* @__PURE__ */ __name((color) => color === "currentcolor" || color === "currentColor" || color === "inherit" || color.indexOf("var(") === 0, "isWebColor");
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, pseudoCNInverse } from "./getStylesAtomic";
10
+ import { getStylesAtomic } from "./getStylesAtomic";
11
11
  import {
12
12
  insertStyleRule,
13
13
  insertedTransforms,
@@ -36,8 +36,13 @@ const skipProps = {
36
36
  }
37
37
  };
38
38
  let conf;
39
+ const pseudoCNInverse = {
40
+ hover: "hoverStyle",
41
+ focus: "focusStyle",
42
+ press: "pressStyle"
43
+ };
39
44
  const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames, debug) => {
40
- var _a, _b;
45
+ var _a;
41
46
  conf = conf || getConfig();
42
47
  const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
43
48
  const viewProps = {};
@@ -45,6 +50,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
45
50
  const medias = {};
46
51
  const usedKeys = /* @__PURE__ */ new Set();
47
52
  let style = {};
53
+ if (state.hasTextAncestor) {
54
+ style.display = "inline-flex";
55
+ }
48
56
  let classNames = {};
49
57
  let transforms = null;
50
58
  const rulesToInsert = [];
@@ -91,6 +99,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
91
99
  }
92
100
  __name(mergeClassName, "mergeClassName");
93
101
  const propKeys = Object.keys(props);
102
+ const shouldDoClasses = isWeb && !state.noClassNames;
94
103
  if (process.env.NODE_ENV === "development" && debug === "verbose") {
95
104
  console.log("propKeys", propKeys);
96
105
  }
@@ -138,10 +147,10 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
138
147
  if (isMedia2) {
139
148
  let mediaShortKey = mediaOrPseudo.slice(1);
140
149
  mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf("_"));
141
- fullKey += `-${mediaShortKey}`;
150
+ fullKey += `_${mediaShortKey}`;
142
151
  } else if (isPseudo2) {
143
152
  const pseudoShortKey = mediaOrPseudo.slice(1);
144
- fullKey += `-${pseudoCNInverse[pseudoShortKey]}`;
153
+ fullKey += `_${pseudoShortKey}`;
145
154
  }
146
155
  usedKeys.add(fullKey);
147
156
  mergeClassName(fullKey, cn, isMediaOrPseudo2);
@@ -155,7 +164,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
155
164
  }
156
165
  continue;
157
166
  }
158
- if (validStyleProps[keyInit] && valInit && valInit[0] === "_") {
167
+ if (valInit && valInit[0] === "_") {
159
168
  usedKeys.add(keyInit);
160
169
  mergeClassName(keyInit, valInit);
161
170
  continue;
@@ -205,14 +214,10 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
205
214
  }
206
215
  pseudos[key] = pseudos[key] || {};
207
216
  pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true);
208
- if (isWeb && !state.noClassNames) {
209
- const shorthand = pseudoAttrs[key].name;
210
- if ((_b = props.forceStyle) == null ? void 0 : _b[shorthand]) {
211
- console.warn("force");
212
- }
217
+ if (shouldDoClasses) {
213
218
  const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] });
214
219
  for (const style2 of pseudoStyles) {
215
- const fullKey = `${style2.property}-${key}`;
220
+ const fullKey = `${style2.property}_${pseudoAttrs[key].name}`;
216
221
  if (!usedKeys.has(fullKey)) {
217
222
  usedKeys.add(fullKey);
218
223
  addStyle(style2.identifier, style2.rules.join(";"));
@@ -232,7 +237,6 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
232
237
  continue;
233
238
  }
234
239
  const mediaStyle = getSubStyle(val, staticConfig, theme, props, state);
235
- const shouldDoClasses = isWeb && !state.noClassNames;
236
240
  if (process.env.NODE_ENV === "development" && debug === "verbose") {
237
241
  console.log(" \xBB getSplitStyles mediaStyle", { mediaKey, mediaStyle, props, shouldDoClasses });
238
242
  }
@@ -240,7 +244,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
240
244
  const mediaStyles = getStylesAtomic(mediaStyle);
241
245
  for (const style2 of mediaStyles) {
242
246
  const out = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
243
- const fullKey = `${style2.property}-${mediaKeyShort}`;
247
+ const fullKey = `${style2.property}_${mediaKeyShort}`;
244
248
  if (!usedKeys.has(fullKey)) {
245
249
  usedKeys.add(fullKey);
246
250
  addStyle(out.identifier, out.styleRule);
@@ -266,15 +270,10 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
266
270
  usedKeys.add(key);
267
271
  if (val && val[0] === "_") {
268
272
  classNames[key] = val;
273
+ } else if (key in stylePropsTransform) {
274
+ mergeTransform(style, key, val, true);
269
275
  } else {
270
- if (key in stylePropsTransform) {
271
- if (process.env.NODE_ENV === "development" && debug) {
272
- console.log(" > mergeTransform", key, val);
273
- }
274
- mergeTransform(style, key, val, true);
275
- } else {
276
- style[key] = val;
277
- }
276
+ style[key] = val;
278
277
  }
279
278
  continue;
280
279
  }
@@ -292,7 +291,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
292
291
  ...classNames
293
292
  };
294
293
  }
295
- if (isWeb && !state.noClassNames) {
294
+ if (shouldDoClasses) {
296
295
  const atomic = getStylesAtomic(style);
297
296
  for (const atomicStyle of atomic) {
298
297
  const key = atomicStyle.property;
@@ -380,5 +379,6 @@ export {
380
379
  getSubStyle,
381
380
  insertSplitStyles,
382
381
  normalizeStyleObject,
382
+ pseudoCNInverse,
383
383
  useSplitStyles
384
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
- const pseudoCNInverse = {
11
- hover: "hoverStyle",
12
- focus: "focusStyle",
13
- press: "pressStyle"
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
- var _a;
40
- if (style == null || typeof style !== "object") {
41
- throw new Error(`Wrong style type: "${typeof style}": ${style}`);
42
- }
43
- for (const key in borderDefaults) {
44
- if (key in style) {
45
- style[borderDefaults[key]] = (_a = style[borderDefaults[key]]) != null ? _a : "solid";
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
- let atomicStyles = {};
49
- if (options.splitTransforms && style.transform) {
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
- const key = Object.keys(out)[0];
57
- atomicStyles[key] = {
58
- ...out[key],
59
- transformProperty
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
- if (style) {
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 pseudoPrefix = 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}-${pseudoPrefix}${hash}`;
75
- const className = `.${identifier}`;
76
- const rules = val.rules.map((rule) => {
77
- if (pseudo) {
78
- const pseudoPrefixSelect = [...Array(pseudo.priority)].map(() => ":root").join("") + " ";
79
- let res = rule.replace(`.${val.identifier}`, `${pseudoPrefixSelect} ${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
- pseudoCNInverse
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.68",
3
+ "version": "1.0.1-beta.69",
4
4
  "source": "src/index.ts",
5
5
  "main": "dist/cjs",
6
6
  "module": "dist/esm",
@@ -21,11 +21,11 @@
21
21
  ],
22
22
  "dependencies": {
23
23
  "@expo/match-media": "^0.3.0",
24
- "@tamagui/compose-refs": "^1.0.1-beta.68",
25
- "@tamagui/helpers": "^1.0.1-beta.68",
24
+ "@tamagui/compose-refs": "^1.0.1-beta.69",
25
+ "@tamagui/helpers": "^1.0.1-beta.69",
26
26
  "@tamagui/ow": "^0.28.1",
27
- "@tamagui/use-debounce": "^1.0.1-beta.68",
28
- "@tamagui/use-force-update": "^1.0.1-beta.68",
27
+ "@tamagui/use-debounce": "^1.0.1-beta.69",
28
+ "@tamagui/use-force-update": "^1.0.1-beta.69",
29
29
  "expo-screen-orientation": "^4.2.0",
30
30
  "hyphenate-style-name": "^1.0.4",
31
31
  "normalize-css-color": "^1.0.2",
@@ -36,7 +36,7 @@
36
36
  "react-native-web": "*"
37
37
  },
38
38
  "devDependencies": {
39
- "@tamagui/build": "^1.0.1-beta.68",
39
+ "@tamagui/build": "^1.0.1-beta.69",
40
40
  "@types/react": "^17.0.35",
41
41
  "csstype": "^3.0.10",
42
42
  "esbuild": "^0.14.36",
@@ -1 +1 @@
1
- {"version":3,"file":"rnw.d.ts","sourceRoot":"","sources":["../../src/constants/rnw.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,EAAE,GAAQ,CAAA"}
1
+ {"version":3,"file":"rnw.d.ts","sourceRoot":"","sources":["../../src/constants/rnw.tsx"],"names":[],"mappings":"AACA,eAAO,MAAM,GAAG,EAAE,GAAQ,CAAA"}
@@ -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,4DAy7B1F;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
+ {"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 type Rule = string;
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":"AAQA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAKnD,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,aAAK,IAAI,GAAG,MAAM,CAAA;AAClB,aAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAA;AAExB,oBAAY,SAAS,GAAG;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,KAAK,CAAA;CACb,CAAA;AAED,aAAK,cAAc,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAAA;AAYlD,wBAAgB,YAAY,CAAC,KAAK,EAAE,GAAG,MAatC;AAYD,eAAO,MAAM,oBAAoB,UAAW,SAAS,GAAG,SAAS,KAAG,cA2BnE,CAAA;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,OA8ElD"}
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,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;CAC9B,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;AASD,eAAO,MAAM,cAAc,EAAE,aAoX5B,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"}
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 pseudoCNInverse: {
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
@@ -1 +1 @@
1
- {"version":3,"file":"getStylesAtomic.d.ts","sourceRoot":"","sources":["../../src/helpers/getStylesAtomic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAuB,MAAM,kBAAkB,CAAA;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAQxC,oBAAY,oBAAoB,GAAG,SAAS,GAAG;IAC7C,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,UAAU,CAAC,EAAE,SAAS,CAAA;CACvB,CAAA;AAED,aAAK,kBAAkB,GAAG;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAQD,eAAO,MAAM,eAAe;;;;CAI3B,CAAA;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,oBAAoB,EAAE,OAAO,GAAE,kBAAuB,iBAwB/F"}
1
+ {"version":3,"file":"getStylesAtomic.d.ts","sourceRoot":"","sources":["../../src/helpers/getStylesAtomic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAuB,MAAM,kBAAkB,CAAA;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AASxC,oBAAY,oBAAoB,GAAG,SAAS,GAAG;IAC7C,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,UAAU,CAAC,EAAE,SAAS,CAAA;CACvB,CAAA;AAED,aAAK,kBAAkB,GAAG;IAExB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAID,wBAAgB,eAAe,CAAC,QAAQ,EAAE,oBAAoB,EAAE,OAAO,CAAC,EAAE,kBAAkB,iBA4B3F"}
@@ -12,4 +12,5 @@ export declare const pseudos: {
12
12
  readonly priority: 3;
13
13
  };
14
14
  };
15
+ export declare type PseudoDescriptor = typeof pseudos[keyof typeof pseudos];
15
16
  //# sourceMappingURL=pseudos.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"pseudos.d.ts","sourceRoot":"","sources":["../../src/helpers/pseudos.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;CAaV,CAAA"}
1
+ {"version":3,"file":"pseudos.d.ts","sourceRoot":"","sources":["../../src/helpers/pseudos.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;CAaV,CAAA;AAEV,oBAAY,gBAAgB,GAAG,OAAO,OAAO,CAAC,MAAM,OAAO,OAAO,CAAC,CAAA"}