@tamagui/core 1.0.1-beta.61 → 1.0.1-beta.62
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/createComponent.js +15 -5
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/helpers/createMediaStyle.js +1 -1
- package/dist/cjs/helpers/createMediaStyle.js.map +2 -2
- package/dist/cjs/helpers/createPropMapper.js +34 -15
- package/dist/cjs/helpers/createPropMapper.js.map +2 -2
- package/dist/cjs/helpers/extendStaticConfig.js +2 -1
- package/dist/cjs/helpers/extendStaticConfig.js.map +2 -2
- package/dist/cjs/helpers/generateAtomicStyles.js +30 -23
- package/dist/cjs/helpers/generateAtomicStyles.js.map +2 -2
- package/dist/cjs/helpers/getSplitStyles.js +29 -14
- package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
- package/dist/cjs/helpers/getStylesAtomic.js +7 -21
- package/dist/cjs/helpers/getStylesAtomic.js.map +2 -2
- package/dist/cjs/helpers/insertStyleRule.js +2 -1
- package/dist/cjs/helpers/insertStyleRule.js.map +2 -2
- package/dist/cjs/helpers/mergeProps.js +40 -0
- package/dist/cjs/helpers/mergeProps.js.map +7 -0
- package/dist/cjs/helpers/pseudos.js +41 -0
- package/dist/cjs/helpers/pseudos.js.map +7 -0
- package/dist/cjs/helpers/themeable.js +2 -2
- package/dist/cjs/helpers/themeable.js.map +2 -2
- package/dist/cjs/index.js +5 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/static.js +2 -0
- package/dist/cjs/static.js.map +2 -2
- package/dist/cjs/types.js.map +1 -1
- package/dist/esm/createComponent.js +15 -8
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/helpers/createMediaStyle.js +1 -1
- package/dist/esm/helpers/createMediaStyle.js.map +2 -2
- package/dist/esm/helpers/createPropMapper.js +34 -15
- package/dist/esm/helpers/createPropMapper.js.map +2 -2
- package/dist/esm/helpers/extendStaticConfig.js +5 -3
- package/dist/esm/helpers/extendStaticConfig.js.map +2 -2
- package/dist/esm/helpers/generateAtomicStyles.js +30 -23
- package/dist/esm/helpers/generateAtomicStyles.js.map +2 -2
- package/dist/esm/helpers/getSplitStyles.js +29 -14
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/getStylesAtomic.js +6 -19
- package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
- package/dist/esm/helpers/insertStyleRule.js +2 -1
- package/dist/esm/helpers/insertStyleRule.js.map +2 -2
- package/dist/esm/helpers/mergeProps.js +18 -0
- package/dist/esm/helpers/mergeProps.js.map +7 -0
- package/dist/esm/helpers/pseudos.js +18 -0
- package/dist/esm/helpers/pseudos.js.map +7 -0
- package/dist/esm/helpers/themeable.js +2 -1
- package/dist/esm/helpers/themeable.js.map +2 -2
- package/dist/esm/index.js +4 -0
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/static.js +2 -0
- package/dist/esm/static.js.map +2 -2
- package/dist/jsx/createComponent.js +15 -8
- package/dist/jsx/helpers/createMediaStyle.js +1 -1
- package/dist/jsx/helpers/createPropMapper.js +34 -15
- package/dist/jsx/helpers/extendStaticConfig.js +5 -3
- package/dist/jsx/helpers/generateAtomicStyles.js +30 -23
- package/dist/jsx/helpers/getSplitStyles.js +29 -14
- package/dist/jsx/helpers/getStylesAtomic.js +6 -19
- package/dist/jsx/helpers/insertStyleRule.js +2 -1
- package/dist/jsx/helpers/mergeProps.js +17 -0
- package/dist/jsx/helpers/pseudos.js +17 -0
- package/dist/jsx/helpers/themeable.js +2 -1
- package/dist/jsx/index.js +4 -0
- package/dist/jsx/static.js +2 -0
- package/package.json +5 -5
- package/types/createComponent.d.ts.map +1 -1
- package/types/helpers/createPropMapper.d.ts +1 -1
- package/types/helpers/createPropMapper.d.ts.map +1 -1
- package/types/helpers/extendStaticConfig.d.ts.map +1 -1
- package/types/helpers/generateAtomicStyles.d.ts.map +1 -1
- package/types/helpers/getSplitStyles.d.ts +2 -2
- package/types/helpers/getSplitStyles.d.ts.map +1 -1
- package/types/helpers/getStylesAtomic.d.ts +0 -14
- package/types/helpers/getStylesAtomic.d.ts.map +1 -1
- package/types/helpers/insertStyleRule.d.ts.map +1 -1
- package/types/helpers/mergeProps.d.ts +2 -0
- package/types/helpers/mergeProps.d.ts.map +1 -0
- package/types/helpers/pseudos.d.ts +15 -0
- package/types/helpers/pseudos.d.ts.map +1 -0
- package/types/helpers/themeable.d.ts.map +1 -1
- package/types/index.d.ts +3 -0
- package/types/index.d.ts.map +1 -1
- package/types/static.d.ts +2 -0
- package/types/static.d.ts.map +1 -1
- package/types/types.d.ts +3 -2
- package/types/types.d.ts.map +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/extendStaticConfig.ts"],
|
|
4
|
-
"sourcesContent": ["import { stylePropsView } from '@tamagui/helpers'\n\nimport { StaticConfig, StaticConfigParsed, StylableComponent } from '../types'\nimport { createPropMapper } from './createPropMapper'\n\nexport function extendStaticConfig(config: Partial<StaticConfig>, parent?: StylableComponent) {\n if (!parent || !('staticConfig' in parent)) {\n return parseStaticConfig(config)\n }\n\n const variants = {\n ...parent.staticConfig.variants,\n }\n\n // merge variants... can we type this?\n if (config.variants) {\n for (const key in config.variants) {\n if (variants[key]) {\n variants[key] = {\n ...variants[key],\n ...config.variants[key],\n }\n } else {\n variants[key] = config.variants[key]\n }\n }\n }\n\n return parseStaticConfig({\n ...parent.staticConfig,\n ...config,\n variants,\n isZStack: config.isZStack || parent.staticConfig.isZStack,\n isText: config.isText || parent.staticConfig.isText || false,\n isInput: config.isInput || parent.staticConfig.isInput || false,\n neverFlatten: config.neverFlatten || parent.staticConfig.neverFlatten,\n ensureOverriddenProp: config.ensureOverriddenProp ?? parent.staticConfig.ensureOverriddenProp,\n validStyles: config.validStyles\n ? {\n ...parent.staticConfig.validStyles,\n ...config.validStyles,\n }\n : parent.staticConfig.validStyles || stylePropsView,\n defaultProps: {\n
|
|
5
|
-
"mappings": ";;AAAA;AAGA;AAEO,4BAA4B,QAA+B,QAA4B;
|
|
4
|
+
"sourcesContent": ["import { stylePropsView } from '@tamagui/helpers'\n\nimport { StaticConfig, StaticConfigParsed, StylableComponent } from '../types'\nimport { createPropMapper } from './createPropMapper'\nimport { mergeProps } from './mergeProps'\n\nexport function extendStaticConfig(config: Partial<StaticConfig>, parent?: StylableComponent) {\n if (!parent || !('staticConfig' in parent)) {\n return parseStaticConfig(config)\n }\n\n const variants = {\n ...parent.staticConfig.variants,\n }\n\n // merge variants... can we type this?\n if (config.variants) {\n for (const key in config.variants) {\n if (variants[key]) {\n variants[key] = {\n ...variants[key],\n ...config.variants[key],\n }\n } else {\n variants[key] = config.variants[key]\n }\n }\n }\n\n return parseStaticConfig({\n ...parent.staticConfig,\n ...config,\n variants,\n isZStack: config.isZStack || parent.staticConfig.isZStack,\n isText: config.isText || parent.staticConfig.isText || false,\n isInput: config.isInput || parent.staticConfig.isInput || false,\n neverFlatten: config.neverFlatten || parent.staticConfig.neverFlatten,\n ensureOverriddenProp: config.ensureOverriddenProp ?? parent.staticConfig.ensureOverriddenProp,\n validStyles: config.validStyles\n ? {\n ...parent.staticConfig.validStyles,\n ...config.validStyles,\n }\n : parent.staticConfig.validStyles || stylePropsView,\n defaultProps: mergeProps(\n {\n ...parent.staticConfig.defaultProps,\n ...parent.staticConfig.defaultVariants,\n },\n {\n ...config.defaultProps,\n ...config.defaultVariants,\n }\n ),\n })\n}\n\nexport const parseStaticConfig = (config: Partial<StaticConfig>): StaticConfigParsed => {\n return {\n ...config,\n parsed: true,\n propMapper: createPropMapper(config),\n }\n}\n"],
|
|
5
|
+
"mappings": ";;AAAA;AAGA;AACA;AAEO,4BAA4B,QAA+B,QAA4B;AAN9F;AAOE,MAAI,CAAC,UAAU,CAAE,mBAAkB,SAAS;AAC1C,WAAO,kBAAkB,MAAM;AAAA,EACjC;AAEA,QAAM,WAAW;AAAA,IACf,GAAG,OAAO,aAAa;AAAA,EACzB;AAGA,MAAI,OAAO,UAAU;AACnB,eAAW,OAAO,OAAO,UAAU;AACjC,UAAI,SAAS,MAAM;AACjB,iBAAS,OAAO;AAAA,UACd,GAAG,SAAS;AAAA,UACZ,GAAG,OAAO,SAAS;AAAA,QACrB;AAAA,MACF,OAAO;AACL,iBAAS,OAAO,OAAO,SAAS;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAEA,SAAO,kBAAkB;AAAA,IACvB,GAAG,OAAO;AAAA,IACV,GAAG;AAAA,IACH;AAAA,IACA,UAAU,OAAO,YAAY,OAAO,aAAa;AAAA,IACjD,QAAQ,OAAO,UAAU,OAAO,aAAa,UAAU;AAAA,IACvD,SAAS,OAAO,WAAW,OAAO,aAAa,WAAW;AAAA,IAC1D,cAAc,OAAO,gBAAgB,OAAO,aAAa;AAAA,IACzD,sBAAsB,aAAO,yBAAP,YAA+B,OAAO,aAAa;AAAA,IACzE,aAAa,OAAO,cAChB;AAAA,MACE,GAAG,OAAO,aAAa;AAAA,MACvB,GAAG,OAAO;AAAA,IACZ,IACA,OAAO,aAAa,eAAe;AAAA,IACvC,cAAc,WACZ;AAAA,MACE,GAAG,OAAO,aAAa;AAAA,MACvB,GAAG,OAAO,aAAa;AAAA,IACzB,GACA;AAAA,MACE,GAAG,OAAO;AAAA,MACV,GAAG,OAAO;AAAA,IACZ,CACF;AAAA,EACF,CAAC;AACH;AAjDgB;AAmDT,MAAM,oBAAoB,wBAAC,WAAsD;AACtF,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,YAAY,iBAAiB,MAAM;AAAA,EACrC;AACF,GANiC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,10 +4,28 @@ import { simpleHash } from "@tamagui/helpers";
|
|
|
4
4
|
import hyphenateStyleName from "hyphenate-style-name";
|
|
5
5
|
import normalizeCSSColor from "normalize-css-color";
|
|
6
6
|
import { isWeb } from "../constants/platform";
|
|
7
|
+
import { pseudos } from "./pseudos";
|
|
8
|
+
const reducedStyleKeys = {
|
|
9
|
+
shadowColor: true,
|
|
10
|
+
shadowOffset: true,
|
|
11
|
+
shadowOpacity: true,
|
|
12
|
+
shadowRadius: true,
|
|
13
|
+
textShadowColor: true,
|
|
14
|
+
textShadowOffset: true,
|
|
15
|
+
textShadowRadius: true
|
|
16
|
+
};
|
|
7
17
|
function expandStyles(style) {
|
|
8
18
|
const res = {};
|
|
19
|
+
boxShadowReducer(res, style);
|
|
20
|
+
textShadowReducer(res, style);
|
|
9
21
|
for (const key in style) {
|
|
10
|
-
|
|
22
|
+
if (reducedStyleKeys[key])
|
|
23
|
+
continue;
|
|
24
|
+
if (key in pseudos) {
|
|
25
|
+
res[key] = expandStyles(style[key]);
|
|
26
|
+
} else {
|
|
27
|
+
updateReactDOMStyle(res, key, style[key]);
|
|
28
|
+
}
|
|
11
29
|
}
|
|
12
30
|
return res;
|
|
13
31
|
}
|
|
@@ -24,19 +42,6 @@ function updateReactDOMStyle(style, key, value) {
|
|
|
24
42
|
__name(updateReactDOMStyle, "updateReactDOMStyle");
|
|
25
43
|
const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
|
|
26
44
|
const res = expandStyles(style);
|
|
27
|
-
if (style.shadowColor != null || style.shadowOffset != null || style.shadowOpacity != null || style.shadowRadius != null) {
|
|
28
|
-
boxShadowReducer(res, style);
|
|
29
|
-
delete res["shadowColor"];
|
|
30
|
-
delete res["shadowOffset"];
|
|
31
|
-
delete res["shadowOpacity"];
|
|
32
|
-
delete res["shadowRadius"];
|
|
33
|
-
}
|
|
34
|
-
if (style.textShadowColor != null || style.textShadowOffset != null || style.textShadowRadius != null) {
|
|
35
|
-
textShadowReducer(res, style);
|
|
36
|
-
delete res["textShadowColor"];
|
|
37
|
-
delete res["textShadowOffset"];
|
|
38
|
-
delete res["textShadowRadius"];
|
|
39
|
-
}
|
|
40
45
|
const out = {};
|
|
41
46
|
for (const key in res) {
|
|
42
47
|
const value = res[key];
|
|
@@ -47,8 +52,8 @@ const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
|
|
|
47
52
|
const { identifier } = cachedResult;
|
|
48
53
|
out[identifier] = cachedResult;
|
|
49
54
|
} else {
|
|
50
|
-
const identifier = simpleHash(key +
|
|
51
|
-
const rules = createAtomicRules(identifier, key,
|
|
55
|
+
const identifier = simpleHash(key + valueString);
|
|
56
|
+
const rules = createAtomicRules(identifier, key, valueString);
|
|
52
57
|
const cachedResult2 = cache.set(key, valueString, {
|
|
53
58
|
property: key,
|
|
54
59
|
value: valueString,
|
|
@@ -194,8 +199,7 @@ const cache = {
|
|
|
194
199
|
}
|
|
195
200
|
};
|
|
196
201
|
function stringifyValueWithProperty(value, property) {
|
|
197
|
-
|
|
198
|
-
return typeof normalizedValue !== "string" ? JSON.stringify(normalizedValue || "") : normalizedValue;
|
|
202
|
+
return normalizeValueWithProperty(value, property);
|
|
199
203
|
}
|
|
200
204
|
__name(stringifyValueWithProperty, "stringifyValueWithProperty");
|
|
201
205
|
const mapTransform = /* @__PURE__ */ __name((transform) => {
|
|
@@ -222,7 +226,8 @@ const colorProps = {
|
|
|
222
226
|
};
|
|
223
227
|
function normalizeValueWithProperty(value, property) {
|
|
224
228
|
if (process.env.TAMAGUI_TARGET === "web") {
|
|
225
|
-
|
|
229
|
+
const shouldCoerceToPx = typeof value === "number" && (property === void 0 || property === null || !unitlessNumbers[property]);
|
|
230
|
+
if (shouldCoerceToPx) {
|
|
226
231
|
return `${value}px`;
|
|
227
232
|
}
|
|
228
233
|
}
|
|
@@ -250,6 +255,7 @@ const normalizeColor = /* @__PURE__ */ __name((color, opacity = 1) => {
|
|
|
250
255
|
const alpha = (a * opacity).toFixed(2);
|
|
251
256
|
return `rgba(${r},${g},${b},${alpha})`;
|
|
252
257
|
}
|
|
258
|
+
return `${color}`;
|
|
253
259
|
}, "normalizeColor");
|
|
254
260
|
const isWebColor = /* @__PURE__ */ __name((color) => color === "currentcolor" || color === "currentColor" || color === "inherit" || color.indexOf("var(") === 0, "isWebColor");
|
|
255
261
|
const processColor = /* @__PURE__ */ __name((color) => {
|
|
@@ -311,14 +317,15 @@ const unitlessNumbers = {
|
|
|
311
317
|
};
|
|
312
318
|
const resolveShadowValue = /* @__PURE__ */ __name((style) => {
|
|
313
319
|
const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style;
|
|
320
|
+
if (shadowRadius === void 0) {
|
|
321
|
+
return;
|
|
322
|
+
}
|
|
314
323
|
const { height, width } = shadowOffset || defaultOffset;
|
|
315
324
|
const offsetX = normalizeValueWithProperty(width);
|
|
316
325
|
const offsetY = normalizeValueWithProperty(height);
|
|
317
326
|
const blurRadius = normalizeValueWithProperty(shadowRadius || 0);
|
|
318
|
-
const color = normalizeColor(shadowColor || "black", shadowOpacity);
|
|
319
|
-
|
|
320
|
-
return `${offsetX} ${offsetY} ${blurRadius} ${color}`;
|
|
321
|
-
}
|
|
327
|
+
const color = normalizeColor(String(shadowColor || "black"), shadowOpacity);
|
|
328
|
+
return `${offsetX} ${offsetY} ${blurRadius} ${color}`;
|
|
322
329
|
}, "resolveShadowValue");
|
|
323
330
|
function boxShadowReducer(resolvedStyle, style) {
|
|
324
331
|
const { boxShadow } = style;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/generateAtomicStyles.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Some parts adapted from react-native-web\n * Copyright (c) Nicolas Gallagher licensed under the MIT license.\n */\n\nimport { simpleHash } from '@tamagui/helpers'\nimport hyphenateStyleName from 'hyphenate-style-name'\nimport normalizeCSSColor from 'normalize-css-color'\nimport { TextStyle, ViewStyle } from 'react-native'\n\nimport { isWeb } from '../constants/platform'\n\ntype Value = Object | Array<any> | string | number\nexport type Style = { [key: string]: Value }\n\ntype Rule = string\ntype Rules = Array<Rule>\n\nexport type RulesData = {\n property?: string\n value?: string\n identifier: string\n rules: Rules\n}\n\ntype CompilerOutput = { [key: string]: RulesData }\n\nexport function expandStyles(style: any) {\n const res = {}\n for (const key in style) {\n updateReactDOMStyle(res, key, style[key])\n }\n return res\n}\n\nfunction updateReactDOMStyle(style: Object, key: string, value: any) {\n value = normalizeValueWithProperty(value, key)\n const out = expandStyle(key, value)\n if (out) {\n Object.assign(style, Object.fromEntries(out))\n } else {\n style[key] = value\n }\n}\n\nexport const generateAtomicStyles = (style: ViewStyle & TextStyle): CompilerOutput => {\n const res = expandStyles(style)\n\n if (\n style.shadowColor != null ||\n style.shadowOffset != null ||\n style.shadowOpacity != null ||\n style.shadowRadius != null\n ) {\n boxShadowReducer(res, style)\n delete res['shadowColor']\n delete res['shadowOffset']\n delete res['shadowOpacity']\n delete res['shadowRadius']\n }\n\n if (\n style.textShadowColor != null ||\n style.textShadowOffset != null ||\n style.textShadowRadius != null\n ) {\n textShadowReducer(res, style)\n delete res['textShadowColor']\n delete res['textShadowOffset']\n delete res['textShadowRadius']\n }\n\n const out = {}\n for (const key in res) {\n const value = res[key]\n if (value != null) {\n const valueString = stringifyValueWithProperty(value, key)\n const cachedResult = cache.get(key, valueString)\n if (cachedResult != null) {\n const { identifier } = cachedResult\n out[identifier] = cachedResult\n } else {\n const identifier = simpleHash(key + value)\n const rules = createAtomicRules(identifier, key, value)\n const cachedResult = cache.set(key, valueString, {\n property: key,\n value: valueString,\n identifier,\n rules,\n })\n out[identifier] = cachedResult\n }\n }\n }\n\n return out\n}\n\nexport function expandStyle(key: string, value: any) {\n if (key === 'flex') {\n // The 'flex' property value in React Native must be a positive integer,\n // 0, or -1.\n if (value <= -1) {\n return [\n ['flexGrow', 0],\n ['flexShrink', 1],\n ['flexBasis', 'auto'],\n ]\n }\n // normalizing to better align with native\n // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex\n if (value >= 0) {\n return [\n ['flexGrow', value],\n ['flexShrink', 1],\n ]\n }\n return\n }\n\n // web only\n switch (key) {\n // Ignore some React Native styles\n case 'elevation':\n case 'overlayColor':\n case 'resizeMode':\n case 'tintColor': {\n break\n }\n\n case 'aspectRatio': {\n return [[key, value.toString()]]\n }\n\n // TODO: remove once this issue is fixed\n // https://github.com/rofrischmann/inline-style-prefixer/issues/159\n case 'backgroundClip': {\n if (value === 'text') {\n return [\n ['backgroundClip', value],\n ['WebkitBackgroundClip', value],\n ]\n }\n break\n }\n\n case 'textAlignVertical': {\n return [['verticalAlign', value === 'center' ? 'middle' : value]]\n }\n\n case 'textDecorationLine': {\n return [['textDecorationLine', value]]\n }\n\n case 'transform': {\n if (Array.isArray(value)) {\n return [[key, value.map(mapTransform).join(' ')]]\n }\n break\n }\n\n case 'writingDirection': {\n return [['direction', value]]\n }\n }\n\n const longKey = STYLE_SHORT_FORM_EXPANSIONS[key]\n if (longKey) {\n return longKey.map((key) => {\n return [key, value]\n })\n } else {\n if (isWeb && Array.isArray(value)) {\n return [[key, value.join(',')]]\n }\n }\n}\n\nfunction createAtomicRules(identifier: string, property, value): Rules {\n const rules: string[] = []\n const selector = `.${identifier}`\n\n // Handle non-standard properties and object values that require multiple\n // CSS rules to be created.\n switch (property) {\n // Equivalent to using '::placeholder'\n case 'placeholderTextColor': {\n const block = createDeclarationBlock({ color: value, opacity: 1 })\n rules.push(`${selector}::placeholder${block}`)\n break\n }\n\n // Polyfill for additional 'pointer-events' values\n // See d13f78622b233a0afc0c7a200c0a0792c8ca9e58\n case 'pointerEvents': {\n let finalValue = value\n if (value === 'auto' || value === 'box-only') {\n finalValue = 'auto!important'\n if (value === 'box-only') {\n const block = createDeclarationBlock({ pointerEvents: 'none' })\n rules.push(`${selector}>*${block}`)\n }\n } else if (value === 'none' || value === 'box-none') {\n finalValue = 'none!important'\n if (value === 'box-none') {\n const block = createDeclarationBlock({ pointerEvents: 'auto' })\n rules.push(`${selector}>*${block}`)\n }\n }\n const block = createDeclarationBlock({ pointerEvents: finalValue })\n rules.push(`${selector}${block}`)\n break\n }\n\n // Polyfill for draft spec\n // https://drafts.csswg.org/css-scrollbars-1/\n case 'scrollbarWidth': {\n if (value === 'none') {\n rules.push(`${selector}::-webkit-scrollbar{display:none}`)\n }\n const block = createDeclarationBlock({ scrollbarWidth: value })\n rules.push(`${selector}${block}`)\n break\n }\n\n default: {\n const block = createDeclarationBlock({ [property]: value })\n rules.push(`${selector}${block}`)\n break\n }\n }\n\n return rules\n}\n\n/**\n * Creates a CSS declaration block from a StyleSheet object.\n */\nfunction createDeclarationBlock(style: Style) {\n const domStyle = expandStyles(style)\n const declarationsString = Object.keys(domStyle)\n .map((property) => {\n const value = domStyle[property]\n const prop = hyphenateStyleName(property)\n return `${prop}:${value}`\n })\n // Once properties are hyphenated, this will put the vendor\n // prefixed and short-form properties first in the list.\n .sort()\n .join(';')\n\n return `{${declarationsString};}`\n}\n\nconst cache = {\n get(property, value) {\n if (\n cache[property] != null &&\n cache[property].hasOwnProperty(value) &&\n cache[property][value] != null\n ) {\n return cache[property][value]\n }\n },\n set(property, value, object) {\n if (cache[property] == null) {\n cache[property] = {}\n }\n return (cache[property][value] = object)\n },\n}\n\nfunction stringifyValueWithProperty(value: Value, property?: string): string {\n // e.g., 0 => '0px', 'black' => 'rgba(0,0,0,1)'\n const normalizedValue = normalizeValueWithProperty(value, property)\n return typeof normalizedValue !== 'string'\n ? JSON.stringify(normalizedValue || '')\n : normalizedValue\n}\n\n// { scale: 2 } => 'scale(2)'\n// { translateX: 20 } => 'translateX(20px)'\n// { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'\nconst mapTransform = (transform) => {\n const type = Object.keys(transform)[0]\n const value = transform[type]\n if (type === 'matrix' || type === 'matrix3d') {\n return `${type}(${value.join(',')})`\n } else {\n const normalizedValue = normalizeValueWithProperty(value, type)\n return `${type}(${normalizedValue})`\n }\n}\n\nconst colorProps = {\n backgroundColor: true,\n borderColor: true,\n borderTopColor: true,\n borderRightColor: true,\n borderBottomColor: true,\n borderLeftColor: true,\n color: true,\n shadowColor: true,\n textDecorationColor: true,\n textShadowColor: true,\n}\n\nfunction normalizeValueWithProperty(value: any, property?: string): any {\n if (process.env.TAMAGUI_TARGET === 'web') {\n if (\n (property === undefined || property === null || !unitlessNumbers[property]) &&\n typeof value === 'number'\n ) {\n return `${value}px`\n }\n }\n if (property && colorProps[property]) {\n return normalizeColor(value)\n }\n return value\n}\n\nconst normalizeColor = (color?: number | string, opacity = 1): void | string => {\n if (color == null || color == undefined) {\n return\n }\n if (process.env.TAMAGUI_TARGET === 'web') {\n if (typeof color === 'string' && isWebColor(color)) {\n return color\n }\n }\n const colorInt = processColor(color)\n if (colorInt != null) {\n const r = (colorInt >> 16) & 255\n const g = (colorInt >> 8) & 255\n const b = colorInt & 255\n const a = ((colorInt >> 24) & 255) / 255\n const alpha = (a * opacity).toFixed(2)\n return `rgba(${r},${g},${b},${alpha})`\n }\n}\n\nconst isWebColor = (color: string): boolean =>\n color === 'currentcolor' ||\n color === 'currentColor' ||\n color === 'inherit' ||\n color.indexOf('var(') === 0\n\nconst processColor = (color?: number | string): number | undefined | null => {\n if (color === undefined || color === null) {\n return color\n }\n let intColor = normalizeCSSColor(color)\n if (intColor === undefined || intColor === null) {\n return undefined\n }\n return ((+intColor << 24) | (+intColor >>> 8)) >>> 0\n}\n\nconst unitlessNumbers = {\n animationIterationCount: true,\n aspectRatio: true,\n borderImageOutset: true,\n borderImageSlice: true,\n borderImageWidth: true,\n boxFlex: true,\n boxFleGroup: true,\n boxOrdinalGroup: true,\n columnCount: true,\n flex: true,\n flexGrow: true,\n flexOrder: true,\n flexPositive: true,\n flexShrink: true,\n flexNegative: true,\n fontWeight: true,\n gridRow: true,\n gridRowEnd: true,\n gridRowGap: true,\n gridRowStart: true,\n gridColumn: true,\n gridColumnEnd: true,\n gridColumnGap: true,\n gridColumnStart: true,\n lineClamp: true,\n opacity: true,\n order: true,\n orphans: true,\n tabSize: true,\n widows: true,\n zIndex: true,\n zoom: true,\n fillOpacity: true,\n floodOpacity: true,\n stopOpacity: true,\n strokeDasharray: true,\n strokeDashoffset: true,\n strokeMiterlimit: true,\n strokeOpacity: true,\n strokeWidth: true,\n scale: true,\n scaleX: true,\n scaleY: true,\n scaleZ: true,\n shadowOpacity: true,\n}\n\n/**\n * Support style names that may come passed in prefixed by adding permutations\n * of vendor prefixes.\n */\n\nconst resolveShadowValue = (style: ViewStyle): void | string => {\n const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style\n const { height, width } = shadowOffset || defaultOffset\n const offsetX = normalizeValueWithProperty(width)\n const offsetY = normalizeValueWithProperty(height)\n const blurRadius = normalizeValueWithProperty(shadowRadius || 0)\n // @ts-ignore\n const color = normalizeColor(shadowColor || 'black', shadowOpacity)\n if (color != null && offsetX != null && offsetY != null && blurRadius != null) {\n return `${offsetX} ${offsetY} ${blurRadius} ${color}`\n }\n}\n\nfunction boxShadowReducer(resolvedStyle, style) {\n const { boxShadow } = style\n const shadow = resolveShadowValue(style)\n if (shadow != null) {\n resolvedStyle.boxShadow = boxShadow ? `${boxShadow}, ${shadow}` : shadow\n }\n}\n\nconst defaultOffset = { height: 0, width: 0 }\nfunction textShadowReducer(resolvedStyle, style) {\n const { textShadowColor, textShadowOffset, textShadowRadius } = style\n const { height, width } = textShadowOffset || defaultOffset\n const radius = textShadowRadius || 0\n const offsetX = normalizeValueWithProperty(width)\n const offsetY = normalizeValueWithProperty(height)\n const blurRadius = normalizeValueWithProperty(radius)\n const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor')\n\n if (\n color &&\n (height !== 0 || width !== 0 || radius !== 0) &&\n offsetX != null &&\n offsetY != null &&\n blurRadius != null\n ) {\n resolvedStyle.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`\n }\n}\n\nconst STYLE_SHORT_FORM_EXPANSIONS = {\n borderColor: ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'],\n borderRadius: [\n 'borderTopLeftRadius',\n 'borderTopRightRadius',\n 'borderBottomRightRadius',\n 'borderBottomLeftRadius',\n ],\n borderStyle: ['borderTopStyle', 'borderRightStyle', 'borderBottomStyle', 'borderLeftStyle'],\n borderWidth: ['borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'],\n margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],\n marginHorizontal: ['marginRight', 'marginLeft'],\n marginVertical: ['marginTop', 'marginBottom'],\n overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'],\n padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],\n paddingHorizontal: ['paddingRight', 'paddingLeft'],\n paddingVertical: ['paddingTop', 'paddingBottom'],\n ...(isWeb && {\n // react-native doesn't support X / Y\n overflow: ['overflowX', 'overflowY'],\n }),\n}\n"],
|
|
5
|
-
"mappings": ";;AAKA;AACA;AACA;AAGA;
|
|
4
|
+
"sourcesContent": ["/**\n * Some parts adapted from react-native-web\n * Copyright (c) Nicolas Gallagher licensed under the MIT license.\n */\n\nimport { simpleHash } from '@tamagui/helpers'\nimport hyphenateStyleName from 'hyphenate-style-name'\nimport normalizeCSSColor from 'normalize-css-color'\nimport { TextStyle, ViewStyle } from 'react-native'\n\nimport { isWeb } from '../constants/platform'\nimport { pseudos } from './pseudos'\n\ntype Value = Object | Array<any> | string | number\nexport type Style = { [key: string]: Value }\n\ntype Rule = string\ntype Rules = Array<Rule>\n\nexport type RulesData = {\n property?: string\n value?: string\n identifier: string\n rules: Rules\n}\n\ntype CompilerOutput = { [key: string]: RulesData }\n\nconst reducedStyleKeys = {\n shadowColor: true,\n shadowOffset: true,\n shadowOpacity: true,\n shadowRadius: true,\n textShadowColor: true,\n textShadowOffset: true,\n textShadowRadius: true,\n}\n\nexport function expandStyles(style: any) {\n const res = {}\n boxShadowReducer(res, style)\n textShadowReducer(res, style)\n for (const key in style) {\n if (reducedStyleKeys[key]) continue\n if (key in pseudos) {\n res[key] = expandStyles(style[key])\n } else {\n updateReactDOMStyle(res, key, style[key])\n }\n }\n return res\n}\n\nfunction updateReactDOMStyle(style: Object, key: string, value: any) {\n value = normalizeValueWithProperty(value, key)\n const out = expandStyle(key, value)\n if (out) {\n Object.assign(style, Object.fromEntries(out))\n } else {\n style[key] = value\n }\n}\n\nexport const generateAtomicStyles = (style: ViewStyle & TextStyle): CompilerOutput => {\n const res = expandStyles(style)\n\n const out = {}\n for (const key in res) {\n const value = res[key]\n if (value != null) {\n const valueString = stringifyValueWithProperty(value, key)\n const cachedResult = cache.get(key, valueString)\n if (cachedResult != null) {\n const { identifier } = cachedResult\n out[identifier] = cachedResult\n } else {\n const identifier = simpleHash(key + valueString)\n const rules = createAtomicRules(identifier, key, valueString)\n const cachedResult = cache.set(key, valueString, {\n property: key,\n value: valueString,\n identifier,\n rules,\n })\n out[identifier] = cachedResult\n }\n }\n }\n\n return out\n}\n\nexport function expandStyle(key: string, value: any) {\n if (key === 'flex') {\n // The 'flex' property value in React Native must be a positive integer,\n // 0, or -1.\n if (value <= -1) {\n return [\n ['flexGrow', 0],\n ['flexShrink', 1],\n ['flexBasis', 'auto'],\n ]\n }\n // normalizing to better align with native\n // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex\n if (value >= 0) {\n return [\n ['flexGrow', value],\n ['flexShrink', 1],\n ]\n }\n return\n }\n\n // web only\n switch (key) {\n // Ignore some React Native styles\n case 'elevation':\n case 'overlayColor':\n case 'resizeMode':\n case 'tintColor': {\n break\n }\n\n case 'aspectRatio': {\n return [[key, value.toString()]]\n }\n\n // TODO: remove once this issue is fixed\n // https://github.com/rofrischmann/inline-style-prefixer/issues/159\n case 'backgroundClip': {\n if (value === 'text') {\n return [\n ['backgroundClip', value],\n ['WebkitBackgroundClip', value],\n ]\n }\n break\n }\n\n case 'textAlignVertical': {\n return [['verticalAlign', value === 'center' ? 'middle' : value]]\n }\n\n case 'textDecorationLine': {\n return [['textDecorationLine', value]]\n }\n\n case 'transform': {\n if (Array.isArray(value)) {\n return [[key, value.map(mapTransform).join(' ')]]\n }\n break\n }\n\n case 'writingDirection': {\n return [['direction', value]]\n }\n }\n\n const longKey = STYLE_SHORT_FORM_EXPANSIONS[key]\n if (longKey) {\n return longKey.map((key) => {\n return [key, value]\n })\n } else {\n if (isWeb && Array.isArray(value)) {\n return [[key, value.join(',')]]\n }\n }\n}\n\nfunction createAtomicRules(identifier: string, property, value): Rules {\n const rules: string[] = []\n const selector = `.${identifier}`\n\n // Handle non-standard properties and object values that require multiple\n // CSS rules to be created.\n switch (property) {\n // Equivalent to using '::placeholder'\n case 'placeholderTextColor': {\n const block = createDeclarationBlock({ color: value, opacity: 1 })\n rules.push(`${selector}::placeholder${block}`)\n break\n }\n\n // Polyfill for additional 'pointer-events' values\n // See d13f78622b233a0afc0c7a200c0a0792c8ca9e58\n case 'pointerEvents': {\n let finalValue = value\n if (value === 'auto' || value === 'box-only') {\n finalValue = 'auto!important'\n if (value === 'box-only') {\n const block = createDeclarationBlock({ pointerEvents: 'none' })\n rules.push(`${selector}>*${block}`)\n }\n } else if (value === 'none' || value === 'box-none') {\n finalValue = 'none!important'\n if (value === 'box-none') {\n const block = createDeclarationBlock({ pointerEvents: 'auto' })\n rules.push(`${selector}>*${block}`)\n }\n }\n const block = createDeclarationBlock({ pointerEvents: finalValue })\n rules.push(`${selector}${block}`)\n break\n }\n\n // Polyfill for draft spec\n // https://drafts.csswg.org/css-scrollbars-1/\n case 'scrollbarWidth': {\n if (value === 'none') {\n rules.push(`${selector}::-webkit-scrollbar{display:none}`)\n }\n const block = createDeclarationBlock({ scrollbarWidth: value })\n rules.push(`${selector}${block}`)\n break\n }\n\n default: {\n const block = createDeclarationBlock({ [property]: value })\n rules.push(`${selector}${block}`)\n break\n }\n }\n\n return rules\n}\n\n/**\n * Creates a CSS declaration block from a StyleSheet object.\n */\nfunction createDeclarationBlock(style: Style) {\n const domStyle = expandStyles(style)\n const declarationsString = Object.keys(domStyle)\n .map((property) => {\n const value = domStyle[property]\n const prop = hyphenateStyleName(property)\n return `${prop}:${value}`\n })\n // Once properties are hyphenated, this will put the vendor\n // prefixed and short-form properties first in the list.\n .sort()\n .join(';')\n\n return `{${declarationsString};}`\n}\n\nconst cache = {\n get(property, value) {\n if (\n cache[property] != null &&\n cache[property].hasOwnProperty(value) &&\n cache[property][value] != null\n ) {\n return cache[property][value]\n }\n },\n set(property, value, object) {\n if (cache[property] == null) {\n cache[property] = {}\n }\n return (cache[property][value] = object)\n },\n}\n\nfunction stringifyValueWithProperty(value: Value, property?: string): string {\n // e.g., 0 => '0px', 'black' => 'rgba(0,0,0,1)'\n return normalizeValueWithProperty(value, property)\n}\n\n// { scale: 2 } => 'scale(2)'\n// { translateX: 20 } => 'translateX(20px)'\n// { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'\nconst mapTransform = (transform) => {\n const type = Object.keys(transform)[0]\n const value = transform[type]\n if (type === 'matrix' || type === 'matrix3d') {\n return `${type}(${value.join(',')})`\n } else {\n const normalizedValue = normalizeValueWithProperty(value, type)\n return `${type}(${normalizedValue})`\n }\n}\n\nconst colorProps = {\n backgroundColor: true,\n borderColor: true,\n borderTopColor: true,\n borderRightColor: true,\n borderBottomColor: true,\n borderLeftColor: true,\n color: true,\n shadowColor: true,\n textDecorationColor: true,\n textShadowColor: true,\n}\n\nfunction normalizeValueWithProperty(value: any, property?: string): any {\n if (process.env.TAMAGUI_TARGET === 'web') {\n const shouldCoerceToPx =\n typeof value === 'number' &&\n (property === undefined || property === null || !unitlessNumbers[property])\n if (shouldCoerceToPx) {\n return `${value}px`\n }\n }\n if (property && colorProps[property]) {\n return normalizeColor(value)\n }\n return value\n}\n\nconst normalizeColor = (color?: number | string, opacity = 1): void | string => {\n if (color == null || color == undefined) {\n return\n }\n if (process.env.TAMAGUI_TARGET === 'web') {\n if (typeof color === 'string' && isWebColor(color)) {\n return color\n }\n }\n const colorInt = processColor(color)\n if (colorInt != null) {\n const r = (colorInt >> 16) & 255\n const g = (colorInt >> 8) & 255\n const b = colorInt & 255\n const a = ((colorInt >> 24) & 255) / 255\n const alpha = (a * opacity).toFixed(2)\n return `rgba(${r},${g},${b},${alpha})`\n }\n return `${color}`\n}\n\nconst isWebColor = (color: string): boolean =>\n color === 'currentcolor' ||\n color === 'currentColor' ||\n color === 'inherit' ||\n color.indexOf('var(') === 0\n\nconst processColor = (color?: number | string): number | undefined | null => {\n if (color === undefined || color === null) {\n return color\n }\n let intColor = normalizeCSSColor(color)\n if (intColor === undefined || intColor === null) {\n return undefined\n }\n return ((+intColor << 24) | (+intColor >>> 8)) >>> 0\n}\n\nconst unitlessNumbers = {\n animationIterationCount: true,\n aspectRatio: true,\n borderImageOutset: true,\n borderImageSlice: true,\n borderImageWidth: true,\n boxFlex: true,\n boxFleGroup: true,\n boxOrdinalGroup: true,\n columnCount: true,\n flex: true,\n flexGrow: true,\n flexOrder: true,\n flexPositive: true,\n flexShrink: true,\n flexNegative: true,\n fontWeight: true,\n gridRow: true,\n gridRowEnd: true,\n gridRowGap: true,\n gridRowStart: true,\n gridColumn: true,\n gridColumnEnd: true,\n gridColumnGap: true,\n gridColumnStart: true,\n lineClamp: true,\n opacity: true,\n order: true,\n orphans: true,\n tabSize: true,\n widows: true,\n zIndex: true,\n zoom: true,\n fillOpacity: true,\n floodOpacity: true,\n stopOpacity: true,\n strokeDasharray: true,\n strokeDashoffset: true,\n strokeMiterlimit: true,\n strokeOpacity: true,\n strokeWidth: true,\n scale: true,\n scaleX: true,\n scaleY: true,\n scaleZ: true,\n shadowOpacity: true,\n}\n\n/**\n * Support style names that may come passed in prefixed by adding permutations\n * of vendor prefixes.\n */\n\nconst resolveShadowValue = (style: ViewStyle): void | string => {\n const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style\n if (shadowRadius === undefined) {\n return\n }\n const { height, width } = shadowOffset || defaultOffset\n const offsetX = normalizeValueWithProperty(width)\n const offsetY = normalizeValueWithProperty(height)\n const blurRadius = normalizeValueWithProperty(shadowRadius || 0)\n const color = normalizeColor(String(shadowColor || 'black'), shadowOpacity)\n return `${offsetX} ${offsetY} ${blurRadius} ${color}`\n}\n\nfunction boxShadowReducer(resolvedStyle, style) {\n const { boxShadow } = style\n const shadow = resolveShadowValue(style)\n if (shadow != null) {\n resolvedStyle.boxShadow = boxShadow ? `${boxShadow}, ${shadow}` : shadow\n }\n}\n\nconst defaultOffset = { height: 0, width: 0 }\nfunction textShadowReducer(resolvedStyle, style) {\n const { textShadowColor, textShadowOffset, textShadowRadius } = style\n const { height, width } = textShadowOffset || defaultOffset\n const radius = textShadowRadius || 0\n const offsetX = normalizeValueWithProperty(width)\n const offsetY = normalizeValueWithProperty(height)\n const blurRadius = normalizeValueWithProperty(radius)\n const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor')\n\n if (\n color &&\n (height !== 0 || width !== 0 || radius !== 0) &&\n offsetX != null &&\n offsetY != null &&\n blurRadius != null\n ) {\n resolvedStyle.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`\n }\n}\n\nconst STYLE_SHORT_FORM_EXPANSIONS = {\n borderColor: ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'],\n borderRadius: [\n 'borderTopLeftRadius',\n 'borderTopRightRadius',\n 'borderBottomRightRadius',\n 'borderBottomLeftRadius',\n ],\n borderStyle: ['borderTopStyle', 'borderRightStyle', 'borderBottomStyle', 'borderLeftStyle'],\n borderWidth: ['borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'],\n margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],\n marginHorizontal: ['marginRight', 'marginLeft'],\n marginVertical: ['marginTop', 'marginBottom'],\n overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'],\n padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],\n paddingHorizontal: ['paddingRight', 'paddingLeft'],\n paddingVertical: ['paddingTop', 'paddingBottom'],\n ...(isWeb && {\n // react-native doesn't support X / Y\n overflow: ['overflowX', 'overflowY'],\n }),\n}\n"],
|
|
5
|
+
"mappings": ";;AAKA;AACA;AACA;AAGA;AACA;AAiBA,MAAM,mBAAmB;AAAA,EACvB,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AAAA,EACf,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAEO,sBAAsB,OAAY;AACvC,QAAM,MAAM,CAAC;AACb,mBAAiB,KAAK,KAAK;AAC3B,oBAAkB,KAAK,KAAK;AAC5B,aAAW,OAAO,OAAO;AACvB,QAAI,iBAAiB;AAAM;AAC3B,QAAI,OAAO,SAAS;AAClB,UAAI,OAAO,aAAa,MAAM,IAAI;AAAA,IACpC,OAAO;AACL,0BAAoB,KAAK,KAAK,MAAM,IAAI;AAAA,IAC1C;AAAA,EACF;AACA,SAAO;AACT;AAbgB;AAehB,6BAA6B,OAAe,KAAa,OAAY;AACnE,UAAQ,2BAA2B,OAAO,GAAG;AAC7C,QAAM,MAAM,YAAY,KAAK,KAAK;AAClC,MAAI,KAAK;AACP,WAAO,OAAO,OAAO,OAAO,YAAY,GAAG,CAAC;AAAA,EAC9C,OAAO;AACL,UAAM,OAAO;AAAA,EACf;AACF;AARS;AAUF,MAAM,uBAAuB,wBAAC,UAAiD;AACpF,QAAM,MAAM,aAAa,KAAK;AAE9B,QAAM,MAAM,CAAC;AACb,aAAW,OAAO,KAAK;AACrB,UAAM,QAAQ,IAAI;AAClB,QAAI,SAAS,MAAM;AACjB,YAAM,cAAc,2BAA2B,OAAO,GAAG;AACzD,YAAM,eAAe,MAAM,IAAI,KAAK,WAAW;AAC/C,UAAI,gBAAgB,MAAM;AACxB,cAAM,EAAE,eAAe;AACvB,YAAI,cAAc;AAAA,MACpB,OAAO;AACL,cAAM,aAAa,WAAW,MAAM,WAAW;AAC/C,cAAM,QAAQ,kBAAkB,YAAY,KAAK,WAAW;AAC5D,cAAM,gBAAe,MAAM,IAAI,KAAK,aAAa;AAAA,UAC/C,UAAU;AAAA,UACV,OAAO;AAAA,UACP;AAAA,UACA;AAAA,QACF,CAAC;AACD,YAAI,cAAc;AAAA,MACpB;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT,GA3BoC;AA6B7B,qBAAqB,KAAa,OAAY;AACnD,MAAI,QAAQ,QAAQ;AAGlB,QAAI,SAAS,IAAI;AACf,aAAO;AAAA,QACL,CAAC,YAAY,CAAC;AAAA,QACd,CAAC,cAAc,CAAC;AAAA,QAChB,CAAC,aAAa,MAAM;AAAA,MACtB;AAAA,IACF;AAGA,QAAI,SAAS,GAAG;AACd,aAAO;AAAA,QACL,CAAC,YAAY,KAAK;AAAA,QAClB,CAAC,cAAc,CAAC;AAAA,MAClB;AAAA,IACF;AACA;AAAA,EACF;AAGA,UAAQ;AAAA,SAED;AAAA,SACA;AAAA,SACA;AAAA,SACA,aAAa;AAChB;AAAA,IACF;AAAA,SAEK,eAAe;AAClB,aAAO,CAAC,CAAC,KAAK,MAAM,SAAS,CAAC,CAAC;AAAA,IACjC;AAAA,SAIK,kBAAkB;AACrB,UAAI,UAAU,QAAQ;AACpB,eAAO;AAAA,UACL,CAAC,kBAAkB,KAAK;AAAA,UACxB,CAAC,wBAAwB,KAAK;AAAA,QAChC;AAAA,MACF;AACA;AAAA,IACF;AAAA,SAEK,qBAAqB;AACxB,aAAO,CAAC,CAAC,iBAAiB,UAAU,WAAW,WAAW,KAAK,CAAC;AAAA,IAClE;AAAA,SAEK,sBAAsB;AACzB,aAAO,CAAC,CAAC,sBAAsB,KAAK,CAAC;AAAA,IACvC;AAAA,SAEK,aAAa;AAChB,UAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,eAAO,CAAC,CAAC,KAAK,MAAM,IAAI,YAAY,EAAE,KAAK,GAAG,CAAC,CAAC;AAAA,MAClD;AACA;AAAA,IACF;AAAA,SAEK,oBAAoB;AACvB,aAAO,CAAC,CAAC,aAAa,KAAK,CAAC;AAAA,IAC9B;AAAA;AAGF,QAAM,UAAU,4BAA4B;AAC5C,MAAI,SAAS;AACX,WAAO,QAAQ,IAAI,CAAC,SAAQ;AAC1B,aAAO,CAAC,MAAK,KAAK;AAAA,IACpB,CAAC;AAAA,EACH,OAAO;AACL,QAAI,SAAS,MAAM,QAAQ,KAAK,GAAG;AACjC,aAAO,CAAC,CAAC,KAAK,MAAM,KAAK,GAAG,CAAC,CAAC;AAAA,IAChC;AAAA,EACF;AACF;AA9EgB;AAgFhB,2BAA2B,YAAoB,UAAU,OAAc;AACrE,QAAM,QAAkB,CAAC;AACzB,QAAM,WAAW,IAAI;AAIrB,UAAQ;AAAA,SAED,wBAAwB;AAC3B,YAAM,QAAQ,uBAAuB,EAAE,OAAO,OAAO,SAAS,EAAE,CAAC;AACjE,YAAM,KAAK,GAAG,wBAAwB,OAAO;AAC7C;AAAA,IACF;AAAA,SAIK,iBAAiB;AACpB,UAAI,aAAa;AACjB,UAAI,UAAU,UAAU,UAAU,YAAY;AAC5C,qBAAa;AACb,YAAI,UAAU,YAAY;AACxB,gBAAM,SAAQ,uBAAuB,EAAE,eAAe,OAAO,CAAC;AAC9D,gBAAM,KAAK,GAAG,aAAa,QAAO;AAAA,QACpC;AAAA,MACF,WAAW,UAAU,UAAU,UAAU,YAAY;AACnD,qBAAa;AACb,YAAI,UAAU,YAAY;AACxB,gBAAM,SAAQ,uBAAuB,EAAE,eAAe,OAAO,CAAC;AAC9D,gBAAM,KAAK,GAAG,aAAa,QAAO;AAAA,QACpC;AAAA,MACF;AACA,YAAM,QAAQ,uBAAuB,EAAE,eAAe,WAAW,CAAC;AAClE,YAAM,KAAK,GAAG,WAAW,OAAO;AAChC;AAAA,IACF;AAAA,SAIK,kBAAkB;AACrB,UAAI,UAAU,QAAQ;AACpB,cAAM,KAAK,GAAG,2CAA2C;AAAA,MAC3D;AACA,YAAM,QAAQ,uBAAuB,EAAE,gBAAgB,MAAM,CAAC;AAC9D,YAAM,KAAK,GAAG,WAAW,OAAO;AAChC;AAAA,IACF;AAAA,aAES;AACP,YAAM,QAAQ,uBAAuB,EAAE,CAAC,WAAW,MAAM,CAAC;AAC1D,YAAM,KAAK,GAAG,WAAW,OAAO;AAChC;AAAA,IACF;AAAA;AAGF,SAAO;AACT;AAvDS;AA4DT,gCAAgC,OAAc;AAC5C,QAAM,WAAW,aAAa,KAAK;AACnC,QAAM,qBAAqB,OAAO,KAAK,QAAQ,EAC5C,IAAI,CAAC,aAAa;AACjB,UAAM,QAAQ,SAAS;AACvB,UAAM,OAAO,mBAAmB,QAAQ;AACxC,WAAO,GAAG,QAAQ;AAAA,EACpB,CAAC,EAGA,KAAK,EACL,KAAK,GAAG;AAEX,SAAO,IAAI;AACb;AAdS;AAgBT,MAAM,QAAQ;AAAA,EACZ,IAAI,UAAU,OAAO;AACnB,QACE,MAAM,aAAa,QACnB,MAAM,UAAU,eAAe,KAAK,KACpC,MAAM,UAAU,UAAU,MAC1B;AACA,aAAO,MAAM,UAAU;AAAA,IACzB;AAAA,EACF;AAAA,EACA,IAAI,UAAU,OAAO,QAAQ;AAC3B,QAAI,MAAM,aAAa,MAAM;AAC3B,YAAM,YAAY,CAAC;AAAA,IACrB;AACA,WAAQ,MAAM,UAAU,SAAS;AAAA,EACnC;AACF;AAEA,oCAAoC,OAAc,UAA2B;AAE3E,SAAO,2BAA2B,OAAO,QAAQ;AACnD;AAHS;AAQT,MAAM,eAAe,wBAAC,cAAc;AAClC,QAAM,OAAO,OAAO,KAAK,SAAS,EAAE;AACpC,QAAM,QAAQ,UAAU;AACxB,MAAI,SAAS,YAAY,SAAS,YAAY;AAC5C,WAAO,GAAG,QAAQ,MAAM,KAAK,GAAG;AAAA,EAClC,OAAO;AACL,UAAM,kBAAkB,2BAA2B,OAAO,IAAI;AAC9D,WAAO,GAAG,QAAQ;AAAA,EACpB;AACF,GATqB;AAWrB,MAAM,aAAa;AAAA,EACjB,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,iBAAiB;AACnB;AAEA,oCAAoC,OAAY,UAAwB;AACtE,MAAI,QAAQ,IAAI,mBAAmB,OAAO;AACxC,UAAM,mBACJ,OAAO,UAAU,YAChB,cAAa,UAAa,aAAa,QAAQ,CAAC,gBAAgB;AACnE,QAAI,kBAAkB;AACpB,aAAO,GAAG;AAAA,IACZ;AAAA,EACF;AACA,MAAI,YAAY,WAAW,WAAW;AACpC,WAAO,eAAe,KAAK;AAAA,EAC7B;AACA,SAAO;AACT;AAbS;AAeT,MAAM,iBAAiB,wBAAC,OAAyB,UAAU,MAAqB;AAC9E,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC;AAAA,EACF;AACA,MAAI,QAAQ,IAAI,mBAAmB,OAAO;AACxC,QAAI,OAAO,UAAU,YAAY,WAAW,KAAK,GAAG;AAClD,aAAO;AAAA,IACT;AAAA,EACF;AACA,QAAM,WAAW,aAAa,KAAK;AACnC,MAAI,YAAY,MAAM;AACpB,UAAM,IAAK,YAAY,KAAM;AAC7B,UAAM,IAAK,YAAY,IAAK;AAC5B,UAAM,IAAI,WAAW;AACrB,UAAM,IAAM,aAAY,KAAM,OAAO;AACrC,UAAM,QAAS,KAAI,SAAS,QAAQ,CAAC;AACrC,WAAO,QAAQ,KAAK,KAAK,KAAK;AAAA,EAChC;AACA,SAAO,GAAG;AACZ,GAnBuB;AAqBvB,MAAM,aAAa,wBAAC,UAClB,UAAU,kBACV,UAAU,kBACV,UAAU,aACV,MAAM,QAAQ,MAAM,MAAM,GAJT;AAMnB,MAAM,eAAe,wBAAC,UAAuD;AAC3E,MAAI,UAAU,UAAa,UAAU,MAAM;AACzC,WAAO;AAAA,EACT;AACA,MAAI,WAAW,kBAAkB,KAAK;AACtC,MAAI,aAAa,UAAa,aAAa,MAAM;AAC/C,WAAO;AAAA,EACT;AACA,SAAS,EAAC,YAAY,KAAO,CAAC,aAAa,OAAQ;AACrD,GATqB;AAWrB,MAAM,kBAAkB;AAAA,EACtB,yBAAyB;AAAA,EACzB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,SAAS;AAAA,EACT,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,MAAM;AAAA,EACN,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,aAAa;AAAA,EACb,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,eAAe;AACjB;AAOA,MAAM,qBAAqB,wBAAC,UAAoC;AAC9D,QAAM,EAAE,aAAa,cAAc,eAAe,iBAAiB;AACnE,MAAI,iBAAiB,QAAW;AAC9B;AAAA,EACF;AACA,QAAM,EAAE,QAAQ,UAAU,gBAAgB;AAC1C,QAAM,UAAU,2BAA2B,KAAK;AAChD,QAAM,UAAU,2BAA2B,MAAM;AACjD,QAAM,aAAa,2BAA2B,gBAAgB,CAAC;AAC/D,QAAM,QAAQ,eAAe,OAAO,eAAe,OAAO,GAAG,aAAa;AAC1E,SAAO,GAAG,WAAW,WAAW,cAAc;AAChD,GAX2B;AAa3B,0BAA0B,eAAe,OAAO;AAC9C,QAAM,EAAE,cAAc;AACtB,QAAM,SAAS,mBAAmB,KAAK;AACvC,MAAI,UAAU,MAAM;AAClB,kBAAc,YAAY,YAAY,GAAG,cAAc,WAAW;AAAA,EACpE;AACF;AANS;AAQT,MAAM,gBAAgB,EAAE,QAAQ,GAAG,OAAO,EAAE;AAC5C,2BAA2B,eAAe,OAAO;AAC/C,QAAM,EAAE,iBAAiB,kBAAkB,qBAAqB;AAChE,QAAM,EAAE,QAAQ,UAAU,oBAAoB;AAC9C,QAAM,SAAS,oBAAoB;AACnC,QAAM,UAAU,2BAA2B,KAAK;AAChD,QAAM,UAAU,2BAA2B,MAAM;AACjD,QAAM,aAAa,2BAA2B,MAAM;AACpD,QAAM,QAAQ,2BAA2B,iBAAiB,iBAAiB;AAE3E,MACE,SACC,YAAW,KAAK,UAAU,KAAK,WAAW,MAC3C,WAAW,QACX,WAAW,QACX,cAAc,MACd;AACA,kBAAc,aAAa,GAAG,WAAW,WAAW,cAAc;AAAA,EACpE;AACF;AAlBS;AAoBT,MAAM,8BAA8B;AAAA,EAClC,aAAa,CAAC,kBAAkB,oBAAoB,qBAAqB,iBAAiB;AAAA,EAC1F,cAAc;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,aAAa,CAAC,kBAAkB,oBAAoB,qBAAqB,iBAAiB;AAAA,EAC1F,aAAa,CAAC,kBAAkB,oBAAoB,qBAAqB,iBAAiB;AAAA,EAC1F,QAAQ,CAAC,aAAa,eAAe,gBAAgB,YAAY;AAAA,EACjE,kBAAkB,CAAC,eAAe,YAAY;AAAA,EAC9C,gBAAgB,CAAC,aAAa,cAAc;AAAA,EAC5C,oBAAoB,CAAC,uBAAuB,qBAAqB;AAAA,EACjE,SAAS,CAAC,cAAc,gBAAgB,iBAAiB,aAAa;AAAA,EACtE,mBAAmB,CAAC,gBAAgB,aAAa;AAAA,EACjD,iBAAiB,CAAC,cAAc,eAAe;AAAA,EAC/C,GAAI,SAAS;AAAA,IAEX,UAAU,CAAC,aAAa,WAAW;AAAA,EACrC;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,7 +35,7 @@ const skipProps = {
|
|
|
35
35
|
}
|
|
36
36
|
};
|
|
37
37
|
let conf;
|
|
38
|
-
const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames) => {
|
|
38
|
+
const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames, debug) => {
|
|
39
39
|
var _a;
|
|
40
40
|
conf = conf || getConfig();
|
|
41
41
|
const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
|
|
@@ -45,7 +45,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
45
45
|
const usedKeys = /* @__PURE__ */ new Set();
|
|
46
46
|
let style = {};
|
|
47
47
|
let classNames = {};
|
|
48
|
-
let transforms =
|
|
48
|
+
let transforms = null;
|
|
49
49
|
const rulesToInsert = [];
|
|
50
50
|
function addStyle(prop, rule) {
|
|
51
51
|
rulesToInsert.push([prop, rule]);
|
|
@@ -62,17 +62,22 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
62
62
|
if (!transform) {
|
|
63
63
|
updateInserted();
|
|
64
64
|
transform = insertedTransforms[val];
|
|
65
|
+
if (process.env.NODE_ENV === "development") {
|
|
66
|
+
if (!transform) {
|
|
67
|
+
console.warn("no transform, error", { insertedTransforms, val });
|
|
68
|
+
}
|
|
69
|
+
}
|
|
65
70
|
}
|
|
66
71
|
if (!transform) {
|
|
67
72
|
if (isWeb && val[0] !== "_") {
|
|
68
73
|
transform = val;
|
|
69
|
-
} else {
|
|
70
74
|
}
|
|
71
75
|
}
|
|
72
|
-
if (process.env.NODE_ENV === "development" &&
|
|
76
|
+
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
73
77
|
console.log(" \xBB getSplitStyles mergeClassName transform", { key, val, namespace, transform, insertedTransforms });
|
|
74
78
|
}
|
|
75
79
|
}
|
|
80
|
+
transforms = transforms || {};
|
|
76
81
|
transforms[namespace] = transforms[namespace] || ["", ""];
|
|
77
82
|
const identifier = val.replace("_transform", "");
|
|
78
83
|
transforms[namespace][0] += identifier;
|
|
@@ -85,6 +90,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
85
90
|
}
|
|
86
91
|
__name(mergeClassName, "mergeClassName");
|
|
87
92
|
const propKeys = Object.keys(props);
|
|
93
|
+
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
94
|
+
console.log("propKeys", propKeys);
|
|
95
|
+
}
|
|
88
96
|
for (let i = propKeys.length - 1; i >= 0; i--) {
|
|
89
97
|
const keyInit = propKeys[i];
|
|
90
98
|
if (usedKeys.has(keyInit))
|
|
@@ -160,9 +168,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
160
168
|
viewProps[keyInit] = valInit;
|
|
161
169
|
continue;
|
|
162
170
|
}
|
|
163
|
-
const expanded = isMedia || isPseudo ? [[keyInit, valInit]] : staticConfig.propMapper(keyInit, valInit, theme, props, state);
|
|
171
|
+
const expanded = isMedia || isPseudo ? [[keyInit, valInit]] : staticConfig.propMapper(keyInit, valInit, theme, props, state, void 0, debug);
|
|
164
172
|
let isMediaOrPseudo = isMedia || isPseudo;
|
|
165
|
-
if (process.env.NODE_ENV === "development" &&
|
|
173
|
+
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
166
174
|
console.log(" \xBB getSplitStyles", keyInit, expanded);
|
|
167
175
|
}
|
|
168
176
|
if (!expanded) {
|
|
@@ -184,6 +192,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
184
192
|
continue;
|
|
185
193
|
}
|
|
186
194
|
if (staticConfig.deoptProps && staticConfig.deoptProps.has(key) || staticConfig.inlineProps && staticConfig.inlineProps.has(key)) {
|
|
195
|
+
usedKeys.add(key);
|
|
187
196
|
viewProps[key] = val;
|
|
188
197
|
}
|
|
189
198
|
if (isPseudo) {
|
|
@@ -200,7 +209,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
200
209
|
const fullKey = `${style2.property}-${key}`;
|
|
201
210
|
if (!usedKeys.has(fullKey)) {
|
|
202
211
|
usedKeys.add(fullKey);
|
|
203
|
-
addStyle(style2.identifier, style2.rules
|
|
212
|
+
addStyle(style2.identifier, style2.rules.join(";"));
|
|
204
213
|
mergeClassName(fullKey, style2.identifier, isMediaOrPseudo);
|
|
205
214
|
}
|
|
206
215
|
}
|
|
@@ -211,12 +220,14 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
211
220
|
const mediaKey = key;
|
|
212
221
|
const mediaKeyShort = mediaKey.slice(1);
|
|
213
222
|
if (!mediaQueryConfig[mediaKeyShort]) {
|
|
214
|
-
|
|
223
|
+
if (!usedKeys.has(key)) {
|
|
224
|
+
viewProps[key] = val;
|
|
225
|
+
}
|
|
215
226
|
continue;
|
|
216
227
|
}
|
|
217
228
|
const mediaStyle = getSubStyle(val, staticConfig, theme, props, state);
|
|
218
229
|
const shouldDoClasses = isWeb && !state.noClassNames;
|
|
219
|
-
if (process.env.NODE_ENV === "development" &&
|
|
230
|
+
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
220
231
|
console.log(" \xBB getSplitStyles mediaStyle", { mediaKey, mediaStyle, props, shouldDoClasses });
|
|
221
232
|
}
|
|
222
233
|
if (shouldDoClasses) {
|
|
@@ -232,7 +243,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
232
243
|
}
|
|
233
244
|
} else {
|
|
234
245
|
if (mediaState[mediaKey]) {
|
|
235
|
-
if (process.env.NODE_ENV === "development" &&
|
|
246
|
+
if (process.env.NODE_ENV === "development" && debug) {
|
|
236
247
|
console.log("apply media style", mediaKey, mediaState);
|
|
237
248
|
}
|
|
238
249
|
Object.assign(shouldDoClasses ? medias : style, mediaStyle);
|
|
@@ -251,8 +262,8 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
251
262
|
classNames[key] = val;
|
|
252
263
|
} else {
|
|
253
264
|
if (key in stylePropsTransform) {
|
|
254
|
-
if (process.env.NODE_ENV === "development" &&
|
|
255
|
-
console.log("mergeTransform", key, val);
|
|
265
|
+
if (process.env.NODE_ENV === "development" && debug) {
|
|
266
|
+
console.log(" > mergeTransform", key, val);
|
|
256
267
|
}
|
|
257
268
|
mergeTransform(style, key, val, true);
|
|
258
269
|
} else {
|
|
@@ -280,7 +291,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
280
291
|
for (const atomicStyle of atomic) {
|
|
281
292
|
const key = atomicStyle.property;
|
|
282
293
|
if (!state.dynamicStylesInline) {
|
|
283
|
-
addStyle(atomicStyle.identifier, atomicStyle.rules
|
|
294
|
+
addStyle(atomicStyle.identifier, atomicStyle.rules.join(";"));
|
|
284
295
|
mergeClassName(key, atomicStyle.identifier);
|
|
285
296
|
} else {
|
|
286
297
|
style[key] = atomicStyle.value;
|
|
@@ -289,6 +300,10 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
289
300
|
}
|
|
290
301
|
if (transforms) {
|
|
291
302
|
for (const namespace in transforms) {
|
|
303
|
+
if (!transforms[namespace]) {
|
|
304
|
+
console.warn("Error no transform");
|
|
305
|
+
continue;
|
|
306
|
+
}
|
|
292
307
|
const [hash, val] = transforms[namespace];
|
|
293
308
|
const identifier = `_transform${hash}`;
|
|
294
309
|
if (isClient) {
|
|
@@ -300,7 +315,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
300
315
|
classNames[namespace] = identifier;
|
|
301
316
|
}
|
|
302
317
|
}
|
|
303
|
-
if (process.env.NODE_ENV === "development" &&
|
|
318
|
+
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
304
319
|
if (typeof document !== "undefined") {
|
|
305
320
|
console.log(" \xBB getSplitStyles out", { style, pseudos, medias, classNames, viewProps, state });
|
|
306
321
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/getSplitStyles.tsx"],
|
|
4
|
-
"sourcesContent": ["import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from '@tamagui/helpers'\n// @ts-ignore\nimport { useInsertionEffect } from 'react'\nimport { ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { isClient, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { mediaQueryConfig, mediaState } from '../hooks/useMedia'\nimport {\n MediaKeys,\n MediaQueryKey,\n PseudoStyles,\n PsuedoPropKeys,\n SplitStyleState,\n StackProps,\n StaticConfigParsed,\n TamaguiInternalConfig,\n ThemeObject,\n} from '../types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { fixNativeShadow } from './fixNativeShadow'\nimport { getStylesAtomic, psuedoCNInverse } from './getStylesAtomic'\nimport {\n insertStyleRule,\n insertedTransforms,\n updateInserted,\n updateInsertedCache,\n} from './insertStyleRule'\nimport { mergeTransform } from './mergeTransform'\n\nexport type SplitStyles = ReturnType<typeof getSplitStyles>\nexport type ClassNamesObject = Record<string, string>\nexport type SplitStyleResult = ReturnType<typeof getSplitStyles>\n\nconst skipProps = {\n animation: true,\n animateOnly: true,\n debug: true,\n componentName: true,\n\n ...(!isWeb && {\n tag: true,\n whiteSpace: true,\n wordWrap: true,\n textOverflow: true,\n textDecorationDistance: true,\n userSelect: true,\n selectable: true,\n cursor: true,\n contain: true,\n boxSizing: true,\n boxShadow: true,\n }),\n}\n\ntype TransformNamespaceKey = 'transform' | PsuedoPropKeys | MediaQueryKey\n\nlet conf: TamaguiInternalConfig\n\ntype StyleSplitter = (\n props: { [key: string]: any },\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n state: SplitStyleState & {\n keepVariantsAsProps?: boolean\n },\n defaultClassNames?: any\n) => {\n pseudos: PseudoStyles\n medias: Record<MediaKeys, ViewStyle>\n style: ViewStyle\n classNames: ClassNamesObject\n rulesToInsert: [string, string][]\n viewProps: StackProps\n}\n\n// loop props backwards\n// track used keys:\n// const keys = new Set<string>()\n// keep classnames and styles separate:\n// const styles = {}\n// const classNames = {}\n\nexport const getSplitStyles: StyleSplitter = (\n props,\n staticConfig,\n theme,\n state,\n defaultClassNames\n) => {\n conf = conf || getConfig()\n const validStyleProps = staticConfig.isText ? stylePropsText : validStyles\n const viewProps: StackProps = {}\n const pseudos: PseudoStyles = {}\n const medias: Record<MediaKeys, ViewStyle> = {}\n const usedKeys = new Set<string>()\n\n let style: ViewStyle = {}\n let classNames: ClassNamesObject = {}\n // we need to gather these specific to each media query / pseudo\n // value is [hash, val], so [\"-jnjad-asdnjk\", \"scaleX(1) rotate(10deg)\"]\n let transforms: Record<TransformNamespaceKey, [string, string]> = {}\n\n const rulesToInsert: [string, string][] = []\n function addStyle(prop: string, rule: string) {\n rulesToInsert.push([prop, rule])\n updateInsertedCache(prop, rule)\n }\n\n function mergeClassName(key: string, val: string, isMediaOrPseudo = false) {\n // empty classnames passed by compiler sometimes\n if (!val) return\n if (val.startsWith('_transform-')) {\n // const isMediaOrPseudo = key !== 'transform'\n // const isMedia = isMediaOrPseudo && key[11] === '_'\n // const isPsuedo = (isMediaOrPseudo && key[11] === '0') || key.endsWith('Style')\n const namespace: TransformNamespaceKey = isMediaOrPseudo ? key : 'transform'\n\n let transform = insertedTransforms[val]\n if (isClient) {\n if (!transform) {\n // HMR or loaded a new chunk\n updateInserted()\n transform = insertedTransforms[val]\n }\n if (!transform) {\n if (isWeb && val[0] !== '_') {\n // runtime insert\n transform = val\n } else {\n // shouldn't reach\n }\n }\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n // prettier-ignore\n console.log(' \u00BB getSplitStyles mergeClassName transform', { key, val, namespace, transform, insertedTransforms })\n }\n }\n transforms[namespace] = transforms[namespace] || ['', '']\n const identifier = val.replace('_transform', '')\n transforms[namespace][0] += identifier\n // ssr doesn't need to do anything just make the right classname\n if (transform) {\n transforms[namespace][1] += transform\n }\n } else {\n classNames[key] = val\n }\n }\n\n const propKeys = Object.keys(props)\n\n for (let i = propKeys.length - 1; i >= 0; i--) {\n const keyInit = propKeys[i]\n if (usedKeys.has(keyInit)) continue\n if (skipProps[keyInit]) continue\n if (!isWeb && keyInit.startsWith('data-')) continue\n\n const valInit = props[keyInit]\n\n if (keyInit === 'style' || keyInit.startsWith('_style')) {\n if (!valInit) continue\n for (const key in valInit) {\n if (usedKeys.has(key)) continue\n if (valInit && typeof valInit === 'object') {\n // newer react native versions return a full object instead of ID\n for (const skey in valInit) {\n if (usedKeys.has(skey)) continue\n usedKeys.add(skey)\n style[skey] = valInit[skey]\n }\n } else {\n usedKeys.add(key)\n style[key] = valInit\n }\n }\n continue\n }\n\n if (keyInit === 'className') {\n let nonTamaguis = ''\n if (!valInit) {\n continue\n }\n for (const cn of valInit.split(' ')) {\n if (cn[0] === '_') {\n // tamagui, merge it expanded on key, eventually this will go away with better compiler\n const [shorthand, mediaOrPsuedo] = cn.slice(1).split('-')\n const isMedia = mediaOrPsuedo[0] === '_'\n const isPseudo = mediaOrPsuedo[0] === '0'\n const isMediaOrPseudo = isMedia || isPseudo\n let fullKey = conf.shorthands[shorthand]\n if (isMedia) {\n // is media\n let mediaShortKey = mediaOrPsuedo.slice(1)\n mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf('_'))\n fullKey += `-${mediaShortKey}`\n } else if (isPseudo) {\n // is psuedo\n const pseudoShortKey = mediaOrPsuedo.slice(1)\n fullKey += `-${psuedoCNInverse[pseudoShortKey]}`\n }\n usedKeys.add(fullKey)\n mergeClassName(fullKey, cn, isMediaOrPseudo)\n } else {\n nonTamaguis += ' ' + cn\n }\n }\n if (nonTamaguis) {\n mergeClassName(keyInit, nonTamaguis)\n }\n continue\n }\n\n if (validStyleProps[keyInit] && valInit && valInit[0] === '_') {\n usedKeys.add(keyInit)\n mergeClassName(keyInit, valInit)\n continue\n }\n\n if (\n state.keepVariantsAsProps &&\n staticConfig.defaultVariants &&\n keyInit in staticConfig.defaultVariants\n ) {\n viewProps[keyInit] = valInit\n }\n\n let isMedia = keyInit[0] === '$'\n let isPseudo = validPseudoKeys[keyInit]\n\n if (\n !isMedia &&\n !isPseudo &&\n !staticConfig.variants?.[keyInit] &&\n !validStyleProps[keyInit] &&\n !conf.shorthands[keyInit]\n ) {\n usedKeys.add(keyInit)\n viewProps[keyInit] = valInit\n continue\n }\n\n const expanded =\n isMedia || isPseudo\n ? [[keyInit, valInit]]\n : staticConfig.propMapper(keyInit, valInit, theme, props, state)\n\n let isMediaOrPseudo = isMedia || isPseudo\n\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n console.log(' \u00BB getSplitStyles', keyInit, expanded)\n }\n\n if (!expanded) {\n continue\n }\n\n for (const [key, val] of expanded) {\n if (val === undefined) continue\n\n if (key !== 'target' && val && val[0] === '_') {\n usedKeys.add(key)\n mergeClassName(key, val, isMediaOrPseudo)\n continue\n }\n\n isMedia = key[0] === '$'\n isPseudo = validPseudoKeys[key]\n isMediaOrPseudo = isMedia || isPseudo\n\n if (!isMediaOrPseudo) {\n if (usedKeys.has(key)) continue\n }\n\n if (\n (staticConfig.deoptProps && staticConfig.deoptProps.has(key)) ||\n (staticConfig.inlineProps && staticConfig.inlineProps.has(key))\n ) {\n viewProps[key] = val\n }\n\n // pseudo\n if (isPseudo) {\n if (!val) continue\n if (key === 'enterStyle' && state.mounted) {\n // once mounted we can ignore enterStyle\n continue\n }\n pseudos[key] = pseudos[key] || {}\n pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true)\n if (isWeb && !state.noClassNames) {\n const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] })\n for (const style of pseudoStyles) {\n const fullKey = `${style.property}-${key}`\n if (!usedKeys.has(fullKey)) {\n usedKeys.add(fullKey)\n addStyle(style.identifier, style.rules[0])\n mergeClassName(fullKey, style.identifier, isMediaOrPseudo)\n }\n }\n }\n continue\n }\n\n // media\n if (isMedia) {\n const mediaKey = key\n const mediaKeyShort = mediaKey.slice(1)\n\n if (!mediaQueryConfig[mediaKeyShort]) {\n // this isn't a media key, pass through\n viewProps[key] = val\n continue\n }\n\n // dont check if media is active, we just apply *all* media styles\n // we combine the media props on top regular props, could proxy this\n // TODO test proxy here instead of merge\n // THIS USED TO PROXY BACK TO REGULAR PROPS BUT THAT IS THE WRONG BEHAVIOR\n // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n const mediaStyle = getSubStyle(val, staticConfig, theme, props, state)\n const shouldDoClasses = isWeb && !state.noClassNames\n\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n // prettier-ignore\n console.log(' \u00BB getSplitStyles mediaStyle', { mediaKey, mediaStyle, props, shouldDoClasses })\n }\n\n if (shouldDoClasses) {\n const mediaStyles = getStylesAtomic(mediaStyle)\n for (const style of mediaStyles) {\n const out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig)\n // TODO handle psuedo + media, not too hard just need to set up example case\n const fullKey = `${style.property}-${mediaKeyShort}`\n if (!usedKeys.has(fullKey)) {\n usedKeys.add(fullKey)\n addStyle(out.identifier, out.styleRule)\n mergeClassName(fullKey, out.identifier, true)\n }\n }\n } else {\n if (mediaState[mediaKey]) {\n if (process.env.NODE_ENV === 'development' && props['debug']) {\n console.log('apply media style', mediaKey, mediaState)\n }\n Object.assign(shouldDoClasses ? medias : style, mediaStyle)\n }\n }\n continue\n }\n\n if (!isWeb && key === 'pointerEvents') {\n usedKeys.add(key)\n viewProps[key] = val\n continue\n }\n\n if (validStyleProps[key]) {\n usedKeys.add(key)\n if (val && val[0] === '_') {\n classNames[key] = val\n } else {\n if (key in stylePropsTransform) {\n if (process.env.NODE_ENV === 'development' && props['debug']) {\n console.log('mergeTransform', key, val)\n }\n mergeTransform(style, key, val, true)\n } else {\n style[key] = val\n }\n }\n\n continue\n }\n\n // pass to view props\n if (!staticConfig.variants || !(key in staticConfig.variants)) {\n if (!skipProps[key]) {\n // push()\n viewProps[key] = val\n usedKeys.add(key)\n }\n }\n }\n }\n\n // add in defaults if not set:\n if (defaultClassNames) {\n classNames = {\n ...defaultClassNames,\n ...classNames,\n }\n }\n\n if (isWeb && !state.noClassNames) {\n const atomic = getStylesAtomic(style)\n for (const atomicStyle of atomic) {\n const key = atomicStyle.property\n if (!state.dynamicStylesInline) {\n addStyle(atomicStyle.identifier, atomicStyle.rules[0])\n mergeClassName(key, atomicStyle.identifier)\n } else {\n style[key] = atomicStyle.value\n }\n }\n }\n\n if (transforms) {\n for (const namespace in transforms) {\n const [hash, val] = transforms[namespace]\n const identifier = `_transform${hash}`\n if (isClient) {\n if (!insertedTransforms[identifier]) {\n const rule = `.${identifier} { transform: ${val}; }`\n addStyle(identifier, rule)\n }\n }\n classNames[namespace] = identifier\n }\n }\n\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n if (typeof document !== 'undefined') {\n // prettier-ignore\n console.log(' \u00BB getSplitStyles out', { style, pseudos, medias, classNames, viewProps, state })\n }\n }\n\n return {\n viewProps,\n style,\n medias,\n pseudos,\n classNames,\n rulesToInsert,\n }\n}\n\nexport const insertSplitStyles: StyleSplitter = (...args) => {\n const res = getSplitStyles(...args)\n for (const [prop, rule] of res.rulesToInsert) {\n insertStyleRule(prop, rule)\n }\n return res\n}\n\nconst effect = isWeb ? useInsertionEffect || useIsomorphicLayoutEffect : useIsomorphicLayoutEffect\n\nexport const useSplitStyles: StyleSplitter = (...args) => {\n const res = getSplitStyles(...args)\n effect(() => {\n for (const [prop, rule] of res.rulesToInsert) {\n insertStyleRule(prop, rule)\n }\n })\n return res\n}\n\nexport const getSubStyle = (\n styleIn: Object,\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n props: any,\n state: SplitStyleState,\n avoidDefaultProps?: boolean\n): ViewStyle => {\n const styleOut: ViewStyle = {}\n for (const key in styleIn) {\n const val = styleIn[key]\n const expanded = staticConfig.propMapper(key, val, theme, props, state, avoidDefaultProps)\n if (!expanded) continue\n for (const [skey, sval] of expanded) {\n if (skey in stylePropsTransform) {\n mergeTransform(styleOut, skey, sval)\n } else {\n styleOut[skey] = sval\n }\n }\n }\n return styleOut\n}\n\nexport function normalizeStyleObject(style: any) {\n if (!isWeb) {\n fixNativeShadow(style)\n }\n}\n"],
|
|
5
|
-
"mappings": ";;AAAA;AAEA;AAGA;AACA;AACA;
|
|
4
|
+
"sourcesContent": ["import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from '@tamagui/helpers'\n// @ts-ignore\nimport { useInsertionEffect } from 'react'\nimport { ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { isClient, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { mediaQueryConfig, mediaState } from '../hooks/useMedia'\nimport {\n DebugProp,\n MediaKeys,\n MediaQueryKey,\n PseudoStyles,\n PsuedoPropKeys,\n SplitStyleState,\n StackProps,\n StaticConfigParsed,\n TamaguiInternalConfig,\n ThemeObject,\n} from '../types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { fixNativeShadow } from './fixNativeShadow'\nimport { getStylesAtomic, psuedoCNInverse } from './getStylesAtomic'\nimport {\n insertStyleRule,\n insertedTransforms,\n updateInserted,\n updateInsertedCache,\n} from './insertStyleRule'\nimport { mergeTransform } from './mergeTransform'\n\nexport type SplitStyles = ReturnType<typeof getSplitStyles>\nexport type ClassNamesObject = Record<string, string>\nexport type SplitStyleResult = ReturnType<typeof getSplitStyles>\n\nconst skipProps = {\n animation: true,\n animateOnly: true,\n debug: true,\n componentName: true,\n\n ...(!isWeb && {\n tag: true,\n whiteSpace: true,\n wordWrap: true,\n textOverflow: true,\n textDecorationDistance: true,\n userSelect: true,\n selectable: true,\n cursor: true,\n contain: true,\n boxSizing: true,\n boxShadow: true,\n }),\n}\n\ntype TransformNamespaceKey = 'transform' | PsuedoPropKeys | MediaQueryKey\n\nlet conf: TamaguiInternalConfig\n\ntype StyleSplitter = (\n props: { [key: string]: any },\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n state: SplitStyleState & {\n keepVariantsAsProps?: boolean\n },\n defaultClassNames?: any,\n debug?: DebugProp\n) => {\n pseudos: PseudoStyles\n medias: Record<MediaKeys, ViewStyle>\n style: ViewStyle\n classNames: ClassNamesObject\n rulesToInsert: [string, string][]\n viewProps: StackProps\n}\n\n// loop props backwards\n// track used keys:\n// const keys = new Set<string>()\n// keep classnames and styles separate:\n// const styles = {}\n// const classNames = {}\n\nexport const getSplitStyles: StyleSplitter = (\n props,\n staticConfig,\n theme,\n state,\n defaultClassNames,\n debug\n) => {\n conf = conf || getConfig()\n const validStyleProps = staticConfig.isText ? stylePropsText : validStyles\n const viewProps: StackProps = {}\n const pseudos: PseudoStyles = {}\n const medias: Record<MediaKeys, ViewStyle> = {}\n const usedKeys = new Set<string>()\n\n let style: ViewStyle = {}\n let classNames: ClassNamesObject = {}\n // we need to gather these specific to each media query / pseudo\n // value is [hash, val], so [\"-jnjad-asdnjk\", \"scaleX(1) rotate(10deg)\"]\n let transforms = null as Record<TransformNamespaceKey, [string, string]> | null\n\n const rulesToInsert: [string, string][] = []\n function addStyle(prop: string, rule: string) {\n rulesToInsert.push([prop, rule])\n updateInsertedCache(prop, rule)\n }\n\n function mergeClassName(key: string, val: string, isMediaOrPseudo = false) {\n // empty classnames passed by compiler sometimes\n if (!val) return\n if (val.startsWith('_transform-')) {\n // const isMediaOrPseudo = key !== 'transform'\n // const isMedia = isMediaOrPseudo && key[11] === '_'\n // const isPsuedo = (isMediaOrPseudo && key[11] === '0') || key.endsWith('Style')\n const namespace: TransformNamespaceKey = isMediaOrPseudo ? key : 'transform'\n\n let transform = insertedTransforms[val]\n if (isClient) {\n if (!transform) {\n // HMR or loaded a new chunk\n updateInserted()\n transform = insertedTransforms[val]\n if (process.env.NODE_ENV === 'development') {\n if (!transform) {\n console.warn('no transform, error', { insertedTransforms, val })\n }\n }\n }\n if (!transform) {\n if (isWeb && val[0] !== '_') {\n // runtime insert\n transform = val\n }\n }\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n // prettier-ignore\n console.log(' \u00BB getSplitStyles mergeClassName transform', { key, val, namespace, transform, insertedTransforms })\n }\n }\n transforms = transforms || {}\n transforms[namespace] = transforms[namespace] || ['', '']\n const identifier = val.replace('_transform', '')\n transforms[namespace][0] += identifier\n // ssr doesn't need to do anything just make the right classname\n if (transform) {\n transforms[namespace][1] += transform\n }\n } else {\n classNames[key] = val\n }\n }\n\n const propKeys = Object.keys(props)\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n console.log('propKeys', propKeys)\n }\n\n for (let i = propKeys.length - 1; i >= 0; i--) {\n const keyInit = propKeys[i]\n if (usedKeys.has(keyInit)) continue\n if (skipProps[keyInit]) continue\n if (!isWeb && keyInit.startsWith('data-')) continue\n\n const valInit = props[keyInit]\n\n if (keyInit === 'style' || keyInit.startsWith('_style')) {\n if (!valInit) continue\n for (const key in valInit) {\n if (usedKeys.has(key)) continue\n if (valInit && typeof valInit === 'object') {\n // newer react native versions return a full object instead of ID\n for (const skey in valInit) {\n if (usedKeys.has(skey)) continue\n usedKeys.add(skey)\n style[skey] = valInit[skey]\n }\n } else {\n usedKeys.add(key)\n style[key] = valInit\n }\n }\n continue\n }\n\n if (keyInit === 'className') {\n let nonTamaguis = ''\n if (!valInit) {\n continue\n }\n for (const cn of valInit.split(' ')) {\n if (cn[0] === '_') {\n // tamagui, merge it expanded on key, eventually this will go away with better compiler\n const [shorthand, mediaOrPsuedo] = cn.slice(1).split('-')\n const isMedia = mediaOrPsuedo[0] === '_'\n const isPseudo = mediaOrPsuedo[0] === '0'\n const isMediaOrPseudo = isMedia || isPseudo\n let fullKey = conf.shorthands[shorthand]\n if (isMedia) {\n // is media\n let mediaShortKey = mediaOrPsuedo.slice(1)\n mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf('_'))\n fullKey += `-${mediaShortKey}`\n } else if (isPseudo) {\n // is psuedo\n const pseudoShortKey = mediaOrPsuedo.slice(1)\n fullKey += `-${psuedoCNInverse[pseudoShortKey]}`\n }\n usedKeys.add(fullKey)\n mergeClassName(fullKey, cn, isMediaOrPseudo)\n } else {\n nonTamaguis += ' ' + cn\n }\n }\n if (nonTamaguis) {\n mergeClassName(keyInit, nonTamaguis)\n }\n continue\n }\n\n if (validStyleProps[keyInit] && valInit && valInit[0] === '_') {\n usedKeys.add(keyInit)\n mergeClassName(keyInit, valInit)\n continue\n }\n\n if (\n state.keepVariantsAsProps &&\n staticConfig.defaultVariants &&\n keyInit in staticConfig.defaultVariants\n ) {\n viewProps[keyInit] = valInit\n }\n\n let isMedia = keyInit[0] === '$'\n let isPseudo = validPseudoKeys[keyInit]\n\n if (\n !isMedia &&\n !isPseudo &&\n !staticConfig.variants?.[keyInit] &&\n !validStyleProps[keyInit] &&\n !conf.shorthands[keyInit]\n ) {\n usedKeys.add(keyInit)\n viewProps[keyInit] = valInit\n continue\n }\n\n const expanded =\n isMedia || isPseudo\n ? [[keyInit, valInit]]\n : staticConfig.propMapper(keyInit, valInit, theme, props, state, undefined, debug)\n\n let isMediaOrPseudo = isMedia || isPseudo\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n console.log(' \u00BB getSplitStyles', keyInit, expanded)\n }\n\n if (!expanded) {\n continue\n }\n\n for (const [key, val] of expanded) {\n if (val === undefined) continue\n\n if (key !== 'target' && val && val[0] === '_') {\n usedKeys.add(key)\n mergeClassName(key, val, isMediaOrPseudo)\n continue\n }\n\n isMedia = key[0] === '$'\n isPseudo = validPseudoKeys[key]\n isMediaOrPseudo = isMedia || isPseudo\n\n if (!isMediaOrPseudo) {\n if (usedKeys.has(key)) continue\n }\n\n if (\n (staticConfig.deoptProps && staticConfig.deoptProps.has(key)) ||\n (staticConfig.inlineProps && staticConfig.inlineProps.has(key))\n ) {\n usedKeys.add(key)\n viewProps[key] = val\n }\n\n // pseudo\n if (isPseudo) {\n if (!val) continue\n if (key === 'enterStyle' && state.mounted) {\n // once mounted we can ignore enterStyle\n continue\n }\n pseudos[key] = pseudos[key] || {}\n pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true)\n if (isWeb && !state.noClassNames) {\n const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] })\n for (const style of pseudoStyles) {\n const fullKey = `${style.property}-${key}`\n if (!usedKeys.has(fullKey)) {\n usedKeys.add(fullKey)\n addStyle(style.identifier, style.rules.join(';'))\n mergeClassName(fullKey, style.identifier, isMediaOrPseudo)\n }\n }\n }\n continue\n }\n\n // media\n if (isMedia) {\n const mediaKey = key\n const mediaKeyShort = mediaKey.slice(1)\n\n if (!mediaQueryConfig[mediaKeyShort]) {\n if (!usedKeys.has(key)) {\n // this isn't a media key, pass through\n viewProps[key] = val\n }\n continue\n }\n\n // dont check if media is active, we just apply *all* media styles\n // we combine the media props on top regular props, could proxy this\n // TODO test proxy here instead of merge\n // THIS USED TO PROXY BACK TO REGULAR PROPS BUT THAT IS THE WRONG BEHAVIOR\n // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n const mediaStyle = getSubStyle(val, staticConfig, theme, props, state)\n const shouldDoClasses = isWeb && !state.noClassNames\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n // prettier-ignore\n console.log(' \u00BB getSplitStyles mediaStyle', { mediaKey, mediaStyle, props, shouldDoClasses })\n }\n\n if (shouldDoClasses) {\n const mediaStyles = getStylesAtomic(mediaStyle)\n for (const style of mediaStyles) {\n const out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig)\n // TODO handle psuedo + media, not too hard just need to set up example case\n const fullKey = `${style.property}-${mediaKeyShort}`\n if (!usedKeys.has(fullKey)) {\n usedKeys.add(fullKey)\n addStyle(out.identifier, out.styleRule)\n mergeClassName(fullKey, out.identifier, true)\n }\n }\n } else {\n if (mediaState[mediaKey]) {\n if (process.env.NODE_ENV === 'development' && debug) {\n console.log('apply media style', mediaKey, mediaState)\n }\n Object.assign(shouldDoClasses ? medias : style, mediaStyle)\n }\n }\n continue\n }\n\n if (!isWeb && key === 'pointerEvents') {\n usedKeys.add(key)\n viewProps[key] = val\n continue\n }\n\n if (validStyleProps[key]) {\n usedKeys.add(key)\n if (val && val[0] === '_') {\n classNames[key] = val\n } else {\n if (key in stylePropsTransform) {\n if (process.env.NODE_ENV === 'development' && debug) {\n console.log(' > mergeTransform', key, val)\n }\n mergeTransform(style, key, val, true)\n } else {\n style[key] = val\n }\n }\n\n continue\n }\n\n // pass to view props\n if (!staticConfig.variants || !(key in staticConfig.variants)) {\n if (!skipProps[key]) {\n // push()\n viewProps[key] = val\n usedKeys.add(key)\n }\n }\n }\n }\n\n // add in defaults if not set:\n if (defaultClassNames) {\n classNames = {\n ...defaultClassNames,\n ...classNames,\n }\n }\n\n if (isWeb && !state.noClassNames) {\n const atomic = getStylesAtomic(style)\n for (const atomicStyle of atomic) {\n const key = atomicStyle.property\n if (!state.dynamicStylesInline) {\n addStyle(atomicStyle.identifier, atomicStyle.rules.join(';'))\n mergeClassName(key, atomicStyle.identifier)\n } else {\n style[key] = atomicStyle.value\n }\n }\n }\n\n if (transforms) {\n for (const namespace in transforms) {\n if (!transforms[namespace]) {\n console.warn('Error no transform')\n continue\n }\n const [hash, val] = transforms[namespace]\n const identifier = `_transform${hash}`\n if (isClient) {\n if (!insertedTransforms[identifier]) {\n const rule = `.${identifier} { transform: ${val}; }`\n addStyle(identifier, rule)\n }\n }\n classNames[namespace] = identifier\n }\n }\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n if (typeof document !== 'undefined') {\n // prettier-ignore\n console.log(' \u00BB getSplitStyles out', { style, pseudos, medias, classNames, viewProps, state })\n }\n }\n\n return {\n viewProps,\n style,\n medias,\n pseudos,\n classNames,\n rulesToInsert,\n }\n}\n\nexport const insertSplitStyles: StyleSplitter = (...args) => {\n const res = getSplitStyles(...args)\n for (const [prop, rule] of res.rulesToInsert) {\n insertStyleRule(prop, rule)\n }\n return res\n}\n\nconst effect = isWeb ? useInsertionEffect || useIsomorphicLayoutEffect : useIsomorphicLayoutEffect\n\nexport const useSplitStyles: StyleSplitter = (...args) => {\n const res = getSplitStyles(...args)\n effect(() => {\n for (const [prop, rule] of res.rulesToInsert) {\n insertStyleRule(prop, rule)\n }\n })\n return res\n}\n\nexport const getSubStyle = (\n styleIn: Object,\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n props: any,\n state: SplitStyleState,\n avoidDefaultProps?: boolean\n): ViewStyle => {\n const styleOut: ViewStyle = {}\n for (const key in styleIn) {\n const val = styleIn[key]\n const expanded = staticConfig.propMapper(key, val, theme, props, state, avoidDefaultProps)\n if (!expanded) continue\n for (const [skey, sval] of expanded) {\n if (skey in stylePropsTransform) {\n mergeTransform(styleOut, skey, sval)\n } else {\n styleOut[skey] = sval\n }\n }\n }\n return styleOut\n}\n\nexport function normalizeStyleObject(style: any) {\n if (!isWeb) {\n fixNativeShadow(style)\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,20 +5,7 @@ import { reversedShorthands } from "../createTamagui";
|
|
|
5
5
|
import { isVariable } from "../createVariable";
|
|
6
6
|
import { generateAtomicStyles } from "./generateAtomicStyles";
|
|
7
7
|
import { invertMapTransformKeys, mergeTransform } from "./mergeTransform";
|
|
8
|
-
|
|
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
|
-
};
|
|
8
|
+
import { pseudos } from "./pseudos";
|
|
22
9
|
const pseudosOrdered = Object.values(pseudos);
|
|
23
10
|
const psuedoCNInverse = {
|
|
24
11
|
hover: "hoverStyle",
|
|
@@ -61,7 +48,7 @@ function getAtomicStyle(style, pseudo, options) {
|
|
|
61
48
|
let atomicStyles = {};
|
|
62
49
|
if (options.splitTransforms && style.transform) {
|
|
63
50
|
let { transform, ...rest } = style;
|
|
64
|
-
|
|
51
|
+
style = rest;
|
|
65
52
|
for (const t of transform) {
|
|
66
53
|
const tKey = Object.keys(t)[0];
|
|
67
54
|
const transformProperty = invertMapTransformKeys[tKey] || tKey;
|
|
@@ -72,8 +59,9 @@ function getAtomicStyle(style, pseudo, options) {
|
|
|
72
59
|
transformProperty
|
|
73
60
|
};
|
|
74
61
|
}
|
|
75
|
-
}
|
|
76
|
-
|
|
62
|
+
}
|
|
63
|
+
if (style) {
|
|
64
|
+
Object.assign(atomicStyles, generateAtomicStyles(style));
|
|
77
65
|
}
|
|
78
66
|
return Object.keys(atomicStyles).map((key) => {
|
|
79
67
|
const val = atomicStyles[key];
|
|
@@ -99,7 +87,7 @@ function getAtomicStyle(style, pseudo, options) {
|
|
|
99
87
|
const result = {
|
|
100
88
|
property: val.transformProperty || val.property,
|
|
101
89
|
pseudo: pseudo == null ? void 0 : pseudo.name,
|
|
102
|
-
value: val.value
|
|
90
|
+
value: val.value,
|
|
103
91
|
identifier,
|
|
104
92
|
className,
|
|
105
93
|
rules
|
|
@@ -118,7 +106,6 @@ const borderDefaults = {
|
|
|
118
106
|
};
|
|
119
107
|
export {
|
|
120
108
|
getStylesAtomic,
|
|
121
|
-
pseudos,
|
|
122
109
|
psuedoCNInverse
|
|
123
110
|
};
|
|
124
111
|
//# sourceMappingURL=getStylesAtomic.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/getStylesAtomic.ts"],
|
|
4
|
-
"sourcesContent": ["import { StyleObject, stylePropsTransform } from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { reversedShorthands } from '../createTamagui'\nimport { isVariable } from '../createVariable'\nimport { RulesData, generateAtomicStyles } from './generateAtomicStyles'\nimport { invertMapTransformKeys, mergeTransform } from './mergeTransform'\n\nexport type ViewStyleWithPseudos = ViewStyle & {\n hoverStyle?: ViewStyle\n pressStyle?: ViewStyle\n focusStyle?: ViewStyle\n}\n\ntype AtomicStyleOptions = {\n splitTransforms?: boolean\n}\n\
|
|
5
|
-
"mappings": ";;AAAA;AAGA;AACA;AACA;AACA;
|
|
4
|
+
"sourcesContent": ["import { StyleObject, stylePropsTransform } from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { reversedShorthands } from '../createTamagui'\nimport { isVariable } from '../createVariable'\nimport { RulesData, generateAtomicStyles } from './generateAtomicStyles'\nimport { invertMapTransformKeys, mergeTransform } from './mergeTransform'\nimport { pseudos } from './pseudos'\n\nexport type ViewStyleWithPseudos = ViewStyle & {\n hoverStyle?: ViewStyle\n pressStyle?: ViewStyle\n focusStyle?: ViewStyle\n}\n\ntype AtomicStyleOptions = {\n splitTransforms?: boolean\n}\n\ntype PseudoDescriptor = typeof pseudos[keyof typeof pseudos]\n\nconst pseudosOrdered = Object.values(pseudos)\n\n// this is how compiler outputs psueodo identifier\n// TODO remove in next refactor\nexport const psuedoCNInverse = {\n hover: 'hoverStyle',\n focus: 'focusStyle',\n press: 'pressStyle',\n}\n\nexport function getStylesAtomic(stylesIn: ViewStyleWithPseudos, options: AtomicStyleOptions = {}) {\n const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn\n let res: StyleObject[] = []\n\n // *1 order matched to *0\n for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {\n if (!style || !Object.keys(style).length) {\n continue\n }\n const pseudo = pseudosOrdered[index]\n for (const skey in style) {\n const val = style[skey]\n if (isVariable(val)) {\n style[skey] = val.toString()\n }\n if (stylePropsTransform[skey]) {\n delete style[skey]\n mergeTransform(style, skey, val)\n }\n }\n res = [...res, ...getAtomicStyle(style, pseudo, options)]\n }\n\n return res\n}\n\nfunction getAtomicStyle(\n style: ViewStyle,\n pseudo: PseudoDescriptor | undefined,\n options: AtomicStyleOptions\n): StyleObject[] {\n if (style == null || typeof style !== 'object') {\n throw new Error(`Wrong style type: \"${typeof style}\": ${style}`)\n }\n\n // why is this diff from react-native-web!? need to figure out\n for (const key in borderDefaults) {\n if (key in style) {\n style[borderDefaults[key]] = style[borderDefaults[key]] ?? 'solid'\n }\n }\n\n let atomicStyles: { [key: string]: RulesData & { transformProperty?: string } } = {}\n\n if (options.splitTransforms && style.transform) {\n let { transform, ...rest } = style\n style = rest\n for (const t of transform) {\n const tKey = Object.keys(t)[0]\n const transformProperty = invertMapTransformKeys[tKey] || tKey\n const out = generateAtomicStyles({ transform: [t] })\n const key = Object.keys(out)[0]\n atomicStyles[key] = {\n ...out[key],\n transformProperty,\n }\n }\n }\n\n if (style) {\n Object.assign(atomicStyles, generateAtomicStyles(style))\n }\n\n // TODO ... and then also avoid this loop! n^4\n return Object.keys(atomicStyles).map((key) => {\n const val = atomicStyles[key]\n const hash = val.identifier\n // pseudos have a `--` to be easier to find with concatClassNames\n const psuedoPrefix = pseudo ? `0${pseudo.name}-` : ''\n if (!val.property) {\n throw new Error(`no prop`)\n }\n const shortProp = reversedShorthands[val.property] || val.property\n const identifier = `_${shortProp}-${psuedoPrefix}${hash}`\n const className = `.${identifier}`\n const rules = val.rules.map((rule) => {\n if (pseudo) {\n const psuedoPrefixSelect = [...Array(pseudo.priority)].map(() => ':root').join('') + ' '\n let res = rule\n .replace(`.${val.identifier}`, `${psuedoPrefixSelect} ${className}`)\n .replace('{', `:${pseudo.name}{`)\n // important to override inline styles\n .replace(';', ' !important;')\n\n if (pseudo.name === 'hover') {\n // hover styles need to be conditional\n // perhaps this can be generalized but for now lets just shortcut\n // and hardcode for hover styles, if we need to later we can\n // WEIRD SYNTAX, SEE:\n // https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover\n res = `@media not all and (hover: none) { ${res} }`\n }\n return res\n }\n return rule.replace(`.${val.identifier}`, className).replace(importantRegex, '')\n })\n\n const result: StyleObject = {\n property: val.transformProperty || val.property,\n pseudo: pseudo?.name,\n value: val.value as any,\n identifier,\n className,\n rules,\n }\n\n return result\n })\n}\n\nconst importantRegex = /\\!important*/g\n\nconst borderDefaults = {\n borderWidth: 'borderStyle',\n borderBottomWidth: 'borderBottomStyle',\n borderTopWidth: 'borderTopStyle',\n borderLeftWidth: 'borderLeftStyle',\n borderRightWidth: 'borderRightStyle',\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -71,7 +71,8 @@ function updateInsertedCache(identifier, rule) {
|
|
|
71
71
|
if (insertedSelectors[identifier])
|
|
72
72
|
return;
|
|
73
73
|
insertedSelectors[identifier] = rule;
|
|
74
|
-
|
|
74
|
+
const isTransform = identifier.startsWith("_transform");
|
|
75
|
+
if (isTransform) {
|
|
75
76
|
addTransform(identifier, rule);
|
|
76
77
|
}
|
|
77
78
|
}
|