react-native-web-internals/dist/esm/StyleSheet/compiler/createReactDOMStyle.native.js

React Native for Web

import canUseDOM from "../../modules/canUseDOM.native.js";
import normalizeValueWithProperty from "./normalizeValueWithProperty.native.js";
var emptyObject = {},
  supportsCSS3TextDecoration = !canUseDOM || window.CSS != null && window.CSS.supports != null && (window.CSS.supports("text-decoration-line", "none") || window.CSS.supports("-webkit-text-decoration-line", "none")),
  ignoredProps = {
    elevation: !0,
    overlayColor: !0,
    resizeMode: !0,
    tintColor: !0
  },
  MONOSPACE_FONT_STACK = "monospace,monospace",
  SYSTEM_FONT_STACK = '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif',
  STYLE_SHORT_FORM_EXPANSIONS = {
    borderColor: ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"],
    borderRadius: ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomRightRadius", "borderBottomLeftRadius"],
    borderStyle: ["borderTopStyle", "borderRightStyle", "borderBottomStyle", "borderLeftStyle"],
    borderWidth: ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
    marginHorizontal: ["marginRight", "marginLeft"],
    marginVertical: ["marginTop", "marginBottom"],
    overflow: ["overflowX", "overflowY"],
    overscrollBehavior: ["overscrollBehaviorX", "overscrollBehaviorY"],
    paddingHorizontal: ["paddingRight", "paddingLeft"],
    paddingVertical: ["paddingTop", "paddingBottom"]
  },
  mapTransform = function (transform) {
    var type = Object.keys(transform)[0],
      value = transform[type];
    if (type === "matrix" || type === "matrix3d") return `${type}(${value.join(",")})`;
    var normalizedValue = normalizeValueWithProperty(value, type);
    return `${type}(${normalizedValue})`;
  },
  createTransformValue = function (style) {
    var transform = style.transform;
    return Array.isArray(style.transform) && (transform = style.transform.map(mapTransform).join(" ")), transform;
  },
  createReactDOMStyle = function (style, isInline) {
    var _loop = function (prop2) {
      var value = style[prop2];
      if (
      // Ignore everything with a null value
      value == null ||
      // Ignore some React Native styles
      ignoredProps[prop2]) return "continue";
      if (prop2 === "aspectRatio") resolvedStyle[prop2] = value.toString();else if (prop2 === "backgroundClip") value === "text" && (resolvedStyle.backgroundClip = value, resolvedStyle.WebkitBackgroundClip = value);else if (prop2 === "flex") value === -1 ? (resolvedStyle.flexGrow = 0, resolvedStyle.flexShrink = 1, resolvedStyle.flexBasis = "auto") : resolvedStyle.flex = value;else if (prop2 === "font") resolvedStyle[prop2] = value.replace("System", SYSTEM_FONT_STACK);else if (prop2 === "fontFamily") {
        if (value.indexOf("System") > -1) {
          var stack = value.split(/,\s*/);
          stack[stack.indexOf("System")] = SYSTEM_FONT_STACK, resolvedStyle[prop2] = stack.join(",");
        } else value === "monospace" ? resolvedStyle[prop2] = MONOSPACE_FONT_STACK : resolvedStyle[prop2] = value;
      } else if (prop2 === "fontVariant") Array.isArray(value) && value.length > 0 && (resolvedStyle.fontVariant = value.join(" "));else if (prop2 === "textAlignVertical") resolvedStyle.verticalAlign = value === "center" ? "middle" : value;else if (prop2 === "textDecorationLine") supportsCSS3TextDecoration ? resolvedStyle.textDecorationLine = value : resolvedStyle.textDecoration = value;else if (prop2 === "transform" || prop2 === "transformMatrix") resolvedStyle.transform = createTransformValue(style);else if (prop2 === "writingDirection") resolvedStyle.direction = value;else {
        var value1 = normalizeValueWithProperty(style[prop2], prop2),
          longFormProperties = STYLE_SHORT_FORM_EXPANSIONS[prop2];
        isInline && prop2 === "margin" ? (style.marginHorizontal == null && (resolvedStyle.marginLeft = value1, resolvedStyle.marginRight = value1), style.marginVertical == null && (resolvedStyle.marginTop = value1, resolvedStyle.marginBottom = value1)) : isInline && prop2 === "padding" ? (style.paddingHorizontal == null && (resolvedStyle.paddingLeft = value1, resolvedStyle.paddingRight = value1), style.paddingVertical == null && (resolvedStyle.paddingTop = value1, resolvedStyle.paddingBottom = value1)) : longFormProperties ? longFormProperties.forEach(function (longForm, i) {
          style[longForm] == null && (resolvedStyle[longForm] = value1);
        }) : resolvedStyle[prop2] = Array.isArray(value1) ? value1.join(",") : value1;
      }
    };
    if (!style) return emptyObject;
    var resolvedStyle = {};
    for (var prop in style) _loop(prop);
    return resolvedStyle;
  },
  createReactDOMStyle_default = createReactDOMStyle;
export { createTransformValue, createReactDOMStyle_default as default };
//# sourceMappingURL=createReactDOMStyle.native.js.map