@tamagui/core 1.0.1-beta.26 → 1.0.1-beta.29

package/dist/jsx/helpers/createPropMapper.js

@@ -3,6 +3,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { getConfig } from "../conf";
 import { isWeb } from "../constants/platform";
 import { isVariable } from "../createVariable";
+import { expandStyle, expandStyles } from "./generateAtomicStyles";
 import { getVariantExtras } from "./getVariantExtras";
 import { isObj } from "./isObj";
 function getVariantFunction(variant, key, value) {
@@ -32,12 +33,14 @@ __name(getVariantFunction, "getVariantFunction");
 const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
   const variants = staticConfig.variants || {};
   const defaultProps = staticConfig.defaultProps || {};
-  return (key, value, theme, props, returnVariablesAs = !!props.animation ? "value" : "auto", avoidDefaultProps = false) => {
+  const mapper = /* @__PURE__ */ __name((key, value, theme, propsIn, state, avoidDefaultProps = false) => {
     const conf = getConfig();
     if (!conf) {
       console.trace("no conf! err");
       return;
     }
+    const props = state.fallbackProps || propsIn;
+    const returnVariablesAs = state.resolveVariablesAs || !!props.animation ? "value" : "auto";
     const fontFamily = props.fontFamily || defaultProps.fontFamily || "$body";
     const variant = variants && variants[key];
     if (variant && value !== void 0) {
@@ -50,16 +53,15 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
         if (isObj(variantValue)) {
           variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
         }
-        return expansions(variantValue);
+        return Object.entries(expandStyles(variantValue));
       }
     }
-    let shouldReturn = false;
+    let shouldReturn = value !== void 0 && value !== null;
     if (conf.shorthands[key]) {
       shouldReturn = true;
       key = conf.shorthands[key];
     }
     if (value) {
-      shouldReturn = true;
       if (value[0] === "$") {
         value = getToken(key, value, conf, theme, fontFamily, returnVariablesAs);
       } else if (isVariable(value)) {
@@ -67,11 +69,10 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
       }
     }
     if (shouldReturn) {
-      return expansions({
-        [key]: value
-      });
+      return expandStyle(key, value) || [[key, value]];
     }
-  };
+  }, "mapper");
+  return mapper;
 }, "createPropMapper");
 const resolveTokens = /* @__PURE__ */ __name((input, conf, theme, fontFamily, resolveAs) => {
   var _a;
@@ -194,38 +195,6 @@ const tokenCategories = {
     borderRightColor: true
   }
 };
-const sidesX = ["Left", "Right"];
-const sidesY = ["Top", "Bottom"];
-const sidesXY = [...sidesX, ...sidesY];
-const expand = {
-  padding: sidesXY.map((x) => `padding${x}`),
-  paddingHorizontal: sidesX.map((x) => `padding${x}`),
-  paddingVertical: sidesY.map((x) => `padding${x}`),
-  margin: sidesXY.map((x) => `margin${x}`),
-  marginHorizontal: sidesX.map((x) => `margin${x}`),
-  marginVertical: sidesY.map((x) => `margin${x}`),
-  borderWidth: sidesXY.map((x) => `border${x}Width`)
-};
-function expansions(styleObj) {
-  var _a, _b;
-  for (const key in expand) {
-    if (key in styleObj) {
-      for (const expandKey of expand[key]) {
-        styleObj[expandKey] = styleObj[key];
-      }
-      delete styleObj[key];
-    }
-  }
-  if ("flex" in styleObj) {
-    if (typeof styleObj.flex === "number") {
-      styleObj.flexGrow = (_a = styleObj.flexGrow) != null ? _a : styleObj.flex;
-      styleObj.flexShrink = (_b = styleObj.flexShrink) != null ? _b : 1;
-      delete styleObj.flex;
-    }
-  }
-  return styleObj;
-}
-__name(expansions, "expansions");
 export {
   createPropMapper
 };

package/dist/jsx/helpers/generateAtomicStyles.js

@@ -0,0 +1,424 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { simpleHash } from "@tamagui/helpers";
+import hyphenateStyleName from "hyphenate-style-name";
+import normalizeCSSColor from "normalize-css-color";
+import { isWeb } from "../constants/platform";
+import { prefixInlineStyles, prefixStyles } from "./prefixStyles";
+function expandStyles(style) {
+  const res = {};
+  for (const key in style) {
+    updateReactDOMStyle(res, key, style[key]);
+  }
+  return res;
+}
+__name(expandStyles, "expandStyles");
+function inline(style) {
+  return prefixInlineStyles(expandStyles(style));
+}
+__name(inline, "inline");
+const STYLE_SHORT_FORM_EXPANSIONS = {
+  borderColor: ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"],
+  borderRadius: [
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderBottomRightRadius",
+    "borderBottomLeftRadius"
+  ],
+  borderStyle: ["borderTopStyle", "borderRightStyle", "borderBottomStyle", "borderLeftStyle"],
+  borderWidth: ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
+  margin: ["marginTop", "marginRight", "marginBottom", "marginLeft"],
+  marginHorizontal: ["marginRight", "marginLeft"],
+  marginVertical: ["marginTop", "marginBottom"],
+  overflow: ["overflowX", "overflowY"],
+  overscrollBehavior: ["overscrollBehaviorX", "overscrollBehaviorY"],
+  padding: ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"],
+  paddingHorizontal: ["paddingRight", "paddingLeft"],
+  paddingVertical: ["paddingTop", "paddingBottom"]
+};
+const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
+  const res = expandStyles(style);
+  if (style.shadowColor != null || style.shadowOffset != null || style.shadowOpacity != null || style.shadowRadius != null) {
+    boxShadowReducer(res, style);
+  }
+  if (style.textShadowColor != null || style.textShadowOffset != null || style.textShadowRadius != null) {
+    textShadowReducer(res, style);
+  }
+  const out = {};
+  for (const key in res) {
+    const value = res[key];
+    if (value != null) {
+      const valueString = stringifyValueWithProperty(value, key);
+      const cachedResult = cache.get(key, valueString);
+      if (cachedResult != null) {
+        const { identifier } = cachedResult;
+        out[identifier] = cachedResult;
+      } else {
+        const identifier = createIdentifier("r", key, value);
+        const rules = createAtomicRules(identifier, key, value);
+        const cachedResult2 = cache.set(key, valueString, {
+          property: key,
+          value: stringifyValueWithProperty(value, key),
+          identifier,
+          rules
+        });
+        out[identifier] = cachedResult2;
+      }
+    }
+  }
+  return out;
+}, "generateAtomicStyles");
+function updateReactDOMStyle(style, key, value) {
+  value = normalizeValueWithProperty(value, key);
+  const out = expandStyle(key, value);
+  if (out) {
+    Object.assign(style, Object.fromEntries(out));
+  } else {
+    style[key] = value;
+  }
+}
+__name(updateReactDOMStyle, "updateReactDOMStyle");
+function expandStyle(key, value) {
+  if (key === "flex") {
+    if (value <= -1) {
+      return [
+        ["flexGrow", 0],
+        ["flexShrink", 1],
+        ["flexBasis", "auto"]
+      ];
+    }
+    if (value >= 0) {
+      return [
+        ["flexGrow", value],
+        ["flexShrink", 1]
+      ];
+    }
+    return;
+  }
+  if (isWeb) {
+    switch (key) {
+      case "elevation":
+      case "overlayColor":
+      case "resizeMode":
+      case "tintColor": {
+        break;
+      }
+      case "aspectRatio": {
+        return [key, value.toString()];
+      }
+      case "backgroundClip": {
+        if (value === "text") {
+          return [
+            ["backgroundClip", value],
+            ["WebkitBackgroundClip", value]
+          ];
+        }
+        break;
+      }
+      case "textAlignVertical": {
+        return [["verticalAlign", value === "center" ? "middle" : value]];
+      }
+      case "textDecorationLine": {
+        return ["textDecorationLine", value];
+      }
+      case "transform": {
+        if (Array.isArray(value)) {
+          return [[key, value.map(mapTransform).join(" ")]];
+        }
+        break;
+      }
+      case "writingDirection": {
+        return [["direction", value]];
+      }
+    }
+  }
+  const longKey = STYLE_SHORT_FORM_EXPANSIONS[key];
+  if (longKey) {
+    return longKey.map((key2) => {
+      return [key2, value];
+    });
+  } else {
+    if (isWeb && Array.isArray(value)) {
+      return [[key, value.join(",")]];
+    }
+  }
+}
+__name(expandStyle, "expandStyle");
+function createAtomicRules(identifier, property, value) {
+  const rules = [];
+  const selector = `.${identifier}`;
+  switch (property) {
+    case "animationKeyframes": {
+      const { animationNames, rules: keyframesRules } = processKeyframesValue(value);
+      const block = createDeclarationBlock({ animationName: animationNames.join(",") });
+      rules.push(`${selector}${block}`, ...keyframesRules);
+      break;
+    }
+    case "placeholderTextColor": {
+      const block = createDeclarationBlock({ color: value, opacity: 1 });
+      rules.push(`${selector}::-webkit-input-placeholder${block}`, `${selector}::-moz-placeholder${block}`, `${selector}:-ms-input-placeholder${block}`, `${selector}::placeholder${block}`);
+      break;
+    }
+    case "pointerEvents": {
+      let finalValue = value;
+      if (value === "auto" || value === "box-only") {
+        finalValue = "auto!important";
+        if (value === "box-only") {
+          const block2 = createDeclarationBlock({ pointerEvents: "none" });
+          rules.push(`${selector}>*${block2}`);
+        }
+      } else if (value === "none" || value === "box-none") {
+        finalValue = "none!important";
+        if (value === "box-none") {
+          const block2 = createDeclarationBlock({ pointerEvents: "auto" });
+          rules.push(`${selector}>*${block2}`);
+        }
+      }
+      const block = createDeclarationBlock({ pointerEvents: finalValue });
+      rules.push(`${selector}${block}`);
+      break;
+    }
+    case "scrollbarWidth": {
+      if (value === "none") {
+        rules.push(`${selector}::-webkit-scrollbar{display:none}`);
+      }
+      const block = createDeclarationBlock({ scrollbarWidth: value });
+      rules.push(`${selector}${block}`);
+      break;
+    }
+    default: {
+      const block = createDeclarationBlock({ [property]: value });
+      rules.push(`${selector}${block}`);
+      break;
+    }
+  }
+  return rules;
+}
+__name(createAtomicRules, "createAtomicRules");
+function processKeyframesValue(keyframesValue) {
+  if (typeof keyframesValue === "number") {
+    throw new Error(`Invalid CSS keyframes type: ${typeof keyframesValue}`);
+  }
+  const animationNames = [];
+  const rules = [];
+  const value = Array.isArray(keyframesValue) ? keyframesValue : [keyframesValue];
+  for (const keyframes of value) {
+    if (typeof keyframes === "string") {
+      animationNames.push(keyframes);
+    } else {
+      const { identifier, rules: keyframesRules } = createKeyframes(keyframes);
+      animationNames.push(identifier);
+      rules.push(...keyframesRules);
+    }
+  }
+  return { animationNames, rules };
+}
+__name(processKeyframesValue, "processKeyframesValue");
+function createKeyframes(keyframes) {
+  const prefixes2 = ["-webkit-", ""];
+  const identifier = createIdentifier("r", "animation", keyframes);
+  const steps = "{" + Object.keys(keyframes).map((stepName) => {
+    const rule = keyframes[stepName];
+    const block = createDeclarationBlock(rule);
+    return `${stepName}${block}`;
+  }).join("") + "}";
+  const rules = prefixes2.map((prefix) => {
+    return `@${prefix}keyframes ${identifier}${steps}`;
+  });
+  return { identifier, rules };
+}
+__name(createKeyframes, "createKeyframes");
+function createDeclarationBlock(style) {
+  const domStyle = prefixStyles(expandStyles(style));
+  const declarationsString = Object.keys(domStyle).map((property) => {
+    const value = domStyle[property];
+    const prop = hyphenateStyleName(property);
+    if (Array.isArray(value)) {
+      return value.map((v) => `${prop}:${v}`).join(";");
+    } else {
+      return `${prop}:${value}`;
+    }
+  }).sort().join(";");
+  return `{${declarationsString};}`;
+}
+__name(createDeclarationBlock, "createDeclarationBlock");
+function createIdentifier(prefix, name, value) {
+  const hashedString = simpleHash(name + stringifyValueWithProperty(value, name));
+  return `${prefix}-${hashedString}`;
+}
+__name(createIdentifier, "createIdentifier");
+const cache = {
+  get(property, value) {
+    if (cache[property] != null && cache[property].hasOwnProperty(value) && cache[property][value] != null) {
+      return cache[property][value];
+    }
+  },
+  set(property, value, object) {
+    if (cache[property] == null) {
+      cache[property] = {};
+    }
+    return cache[property][value] = object;
+  }
+};
+function stringifyValueWithProperty(value, property) {
+  const normalizedValue = normalizeValueWithProperty(value, property);
+  return typeof normalizedValue !== "string" ? JSON.stringify(normalizedValue || "") : normalizedValue;
+}
+__name(stringifyValueWithProperty, "stringifyValueWithProperty");
+const mapTransform = /* @__PURE__ */ __name((transform) => {
+  const type = Object.keys(transform)[0];
+  const value = transform[type];
+  if (type === "matrix" || type === "matrix3d") {
+    return `${type}(${value.join(",")})`;
+  } else {
+    const normalizedValue = normalizeValueWithProperty(value, type);
+    return `${type}(${normalizedValue})`;
+  }
+}, "mapTransform");
+const colorProps = {
+  backgroundColor: true,
+  borderColor: true,
+  borderTopColor: true,
+  borderRightColor: true,
+  borderBottomColor: true,
+  borderLeftColor: true,
+  color: true,
+  shadowColor: true,
+  textDecorationColor: true,
+  textShadowColor: true
+};
+function normalizeValueWithProperty(value, property) {
+  if (isWeb) {
+    if ((property == null || !unitlessNumbers[property]) && typeof value === "number") {
+      return `${value}px`;
+    }
+  }
+  if (property && colorProps[property]) {
+    return normalizeColor(value);
+  }
+  return value;
+}
+__name(normalizeValueWithProperty, "normalizeValueWithProperty");
+const normalizeColor = /* @__PURE__ */ __name((color, opacity = 1) => {
+  if (color == null || color == void 0) {
+    return;
+  }
+  if (typeof color === "string" && isWebColor(color)) {
+    return color;
+  }
+  const colorInt = processColor(color);
+  if (colorInt != null) {
+    const r = colorInt >> 16 & 255;
+    const g = colorInt >> 8 & 255;
+    const b = colorInt & 255;
+    const a = (colorInt >> 24 & 255) / 255;
+    const alpha = (a * opacity).toFixed(2);
+    return `rgba(${r},${g},${b},${alpha})`;
+  }
+}, "normalizeColor");
+const isWebColor = /* @__PURE__ */ __name((color) => color === "currentcolor" || color === "currentColor" || color === "inherit" || color.indexOf("var(") === 0, "isWebColor");
+const processColor = /* @__PURE__ */ __name((color) => {
+  if (color === void 0 || color === null) {
+    return color;
+  }
+  let intColor = normalizeCSSColor(color);
+  if (intColor === void 0 || intColor === null) {
+    return void 0;
+  }
+  return (+intColor << 24 | +intColor >>> 8) >>> 0;
+}, "processColor");
+const unitlessNumbers = {
+  animationIterationCount: true,
+  aspectRatio: true,
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  boxFlex: true,
+  boxFlexGroup: true,
+  boxOrdinalGroup: true,
+  columnCount: true,
+  flex: true,
+  flexGrow: true,
+  flexOrder: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  fontWeight: true,
+  gridRow: true,
+  gridRowEnd: true,
+  gridRowGap: true,
+  gridRowStart: true,
+  gridColumn: true,
+  gridColumnEnd: true,
+  gridColumnGap: true,
+  gridColumnStart: true,
+  lineClamp: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+  fillOpacity: true,
+  floodOpacity: true,
+  stopOpacity: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  strokeMiterlimit: true,
+  strokeOpacity: true,
+  strokeWidth: true,
+  scale: true,
+  scaleX: true,
+  scaleY: true,
+  scaleZ: true,
+  shadowOpacity: true
+};
+const prefixes = ["ms", "Moz", "O", "Webkit"];
+const prefixKey = /* @__PURE__ */ __name((prefix, key) => {
+  return prefix + key.charAt(0).toUpperCase() + key.substring(1);
+}, "prefixKey");
+Object.keys(unitlessNumbers).forEach((prop) => {
+  prefixes.forEach((prefix) => {
+    unitlessNumbers[prefixKey(prefix, prop)] = unitlessNumbers[prop];
+  });
+});
+const resolveShadowValue = /* @__PURE__ */ __name((style) => {
+  const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style;
+  const { height, width } = shadowOffset || defaultOffset;
+  const offsetX = normalizeValueWithProperty(width);
+  const offsetY = normalizeValueWithProperty(height);
+  const blurRadius = normalizeValueWithProperty(shadowRadius || 0);
+  const color = normalizeColor(shadowColor || "black", shadowOpacity);
+  if (color != null && offsetX != null && offsetY != null && blurRadius != null) {
+    return `${offsetX} ${offsetY} ${blurRadius} ${color}`;
+  }
+}, "resolveShadowValue");
+function boxShadowReducer(resolvedStyle, style) {
+  const { boxShadow } = style;
+  const shadow = resolveShadowValue(style);
+  if (shadow != null) {
+    resolvedStyle.boxShadow = boxShadow ? `${boxShadow}, ${shadow}` : shadow;
+  }
+}
+__name(boxShadowReducer, "boxShadowReducer");
+const defaultOffset = { height: 0, width: 0 };
+function textShadowReducer(resolvedStyle, style) {
+  const { textShadowColor, textShadowOffset, textShadowRadius } = style;
+  const { height, width } = textShadowOffset || defaultOffset;
+  const radius = textShadowRadius || 0;
+  const offsetX = normalizeValueWithProperty(width);
+  const offsetY = normalizeValueWithProperty(height);
+  const blurRadius = normalizeValueWithProperty(radius);
+  const color = normalizeValueWithProperty(textShadowColor, "textShadowColor");
+  if (color && (height !== 0 || width !== 0 || radius !== 0) && offsetX != null && offsetY != null && blurRadius != null) {
+    resolvedStyle.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`;
+  }
+}
+__name(textShadowReducer, "textShadowReducer");
+export {
+  expandStyle,
+  expandStyles,
+  generateAtomicStyles,
+  inline
+};