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

React Native for Web

import canUseDOM from "../../modules/canUseDOM";
import normalizeValueWithProperty from "./normalizeValueWithProperty";
const 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 = (transform) => {
  const type = Object.keys(transform)[0], value = transform[type];
  if (type === "matrix" || type === "matrix3d")
    return `${type}(${value.join(",")})`;
  {
    const normalizedValue = normalizeValueWithProperty(value, type);
    return `${type}(${normalizedValue})`;
  }
}, createTransformValue = (style) => {
  let transform = style.transform;
  return Array.isArray(style.transform) && (transform = style.transform.map(mapTransform).join(" ")), transform;
}, createReactDOMStyle = (style, isInline) => {
  if (!style)
    return emptyObject;
  const resolvedStyle = {};
  for (const prop in style) {
    const value = style[prop];
    if (
      // Ignore everything with a null value
      !(value == null || // Ignore some React Native styles
      ignoredProps[prop])
    )
      if (prop === "aspectRatio")
        resolvedStyle[prop] = value.toString();
      else if (prop === "backgroundClip")
        value === "text" && (resolvedStyle.backgroundClip = value, resolvedStyle.WebkitBackgroundClip = value);
      else if (prop === "flex")
        value === -1 ? (resolvedStyle.flexGrow = 0, resolvedStyle.flexShrink = 1, resolvedStyle.flexBasis = "auto") : resolvedStyle.flex = value;
      else if (prop === "font")
        resolvedStyle[prop] = value.replace("System", SYSTEM_FONT_STACK);
      else if (prop === "fontFamily")
        if (value.indexOf("System") > -1) {
          const stack = value.split(/,\s*/);
          stack[stack.indexOf("System")] = SYSTEM_FONT_STACK, resolvedStyle[prop] = stack.join(",");
        } else value === "monospace" ? resolvedStyle[prop] = MONOSPACE_FONT_STACK : resolvedStyle[prop] = value;
      else if (prop === "fontVariant")
        Array.isArray(value) && value.length > 0 && (resolvedStyle.fontVariant = value.join(" "));
      else if (prop === "textAlignVertical")
        resolvedStyle.verticalAlign = value === "center" ? "middle" : value;
      else if (prop === "textDecorationLine")
        supportsCSS3TextDecoration ? resolvedStyle.textDecorationLine = value : resolvedStyle.textDecoration = value;
      else if (prop === "transform" || prop === "transformMatrix")
        resolvedStyle.transform = createTransformValue(style);
      else if (prop === "writingDirection")
        resolvedStyle.direction = value;
      else {
        const value2 = normalizeValueWithProperty(style[prop], prop), longFormProperties = STYLE_SHORT_FORM_EXPANSIONS[prop];
        isInline && prop === "margin" ? (style.marginHorizontal == null && (resolvedStyle.marginLeft = value2, resolvedStyle.marginRight = value2), style.marginVertical == null && (resolvedStyle.marginTop = value2, resolvedStyle.marginBottom = value2)) : isInline && prop === "padding" ? (style.paddingHorizontal == null && (resolvedStyle.paddingLeft = value2, resolvedStyle.paddingRight = value2), style.paddingVertical == null && (resolvedStyle.paddingTop = value2, resolvedStyle.paddingBottom = value2)) : longFormProperties ? longFormProperties.forEach((longForm, i) => {
          style[longForm] == null && (resolvedStyle[longForm] = value2);
        }) : resolvedStyle[prop] = Array.isArray(value2) ? value2.join(",") : value2;
      }
  }
  return resolvedStyle;
};
var createReactDOMStyle_default = createReactDOMStyle;
export {
  createTransformValue,
  createReactDOMStyle_default as default
};
//# sourceMappingURL=createReactDOMStyle.js.map