@tamagui/react-native-web-internals 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/cjs/StyleSheet/compiler/index.cjs

@@ -3,20 +3,22 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
+  value: true
 }), mod);
 var compiler_exports = {};
 __export(compiler_exports, {
@@ -26,203 +28,242 @@ __export(compiler_exports, {
   stringifyValueWithProperty: () => stringifyValueWithProperty
 });
 module.exports = __toCommonJS(compiler_exports);
-var import_simple_hash = require("@tamagui/simple-hash"),
-  import_createReactDOMStyle = require("./createReactDOMStyle.cjs"),
-  import_hyphenateStyleName = require("./hyphenateStyleName.cjs"),
-  import_normalizeValueWithProperty = require("./normalizeValueWithProperty.cjs");
-const cache = /* @__PURE__ */new Map(),
-  emptyObject = {},
-  classicGroup = 1,
-  atomicGroup = 2.2,
-  customGroup = {
-    borderColor: 2,
-    borderRadius: 2,
-    borderStyle: 2,
-    borderWidth: 2,
-    display: 2,
-    flex: 2,
-    margin: 2,
-    overflow: 2,
-    overscrollBehavior: 2,
-    padding: 2,
-    marginHorizontal: 2.1,
-    marginVertical: 2.1,
-    paddingHorizontal: 2.1,
-    paddingVertical: 2.1
-  },
-  borderTopLeftRadius = "borderTopLeftRadius",
-  borderTopRightRadius = "borderTopRightRadius",
-  borderBottomLeftRadius = "borderBottomLeftRadius",
-  borderBottomRightRadius = "borderBottomRightRadius",
-  borderLeftColor = "borderLeftColor",
-  borderLeftStyle = "borderLeftStyle",
-  borderLeftWidth = "borderLeftWidth",
-  borderRightColor = "borderRightColor",
-  borderRightStyle = "borderRightStyle",
-  borderRightWidth = "borderRightWidth",
-  right = "right",
-  marginLeft = "marginLeft",
-  marginRight = "marginRight",
-  paddingLeft = "paddingLeft",
-  paddingRight = "paddingRight",
-  left = "left",
-  PROPERTIES_FLIP = {
-    [borderTopLeftRadius]: borderTopRightRadius,
-    [borderTopRightRadius]: borderTopLeftRadius,
-    [borderBottomLeftRadius]: borderBottomRightRadius,
-    [borderBottomRightRadius]: borderBottomLeftRadius,
-    [borderLeftColor]: borderRightColor,
-    [borderLeftStyle]: borderRightStyle,
-    [borderLeftWidth]: borderRightWidth,
-    [borderRightColor]: borderLeftColor,
-    [borderRightStyle]: borderLeftStyle,
-    [borderRightWidth]: borderLeftWidth,
-    [left]: right,
-    [marginLeft]: marginRight,
-    [marginRight]: marginLeft,
-    [paddingLeft]: paddingRight,
-    [paddingRight]: paddingLeft,
-    [right]: left
-  },
-  PROPERTIES_I18N = {
-    borderTopStartRadius: borderTopLeftRadius,
-    borderTopEndRadius: borderTopRightRadius,
-    borderBottomStartRadius: borderBottomLeftRadius,
-    borderBottomEndRadius: borderBottomRightRadius,
-    borderStartColor: borderLeftColor,
-    borderStartStyle: borderLeftStyle,
-    borderStartWidth: borderLeftWidth,
-    borderEndColor: borderRightColor,
-    borderEndStyle: borderRightStyle,
-    borderEndWidth: borderRightWidth,
-    end: right,
-    marginStart: marginLeft,
-    marginEnd: marginRight,
-    paddingStart: paddingLeft,
-    paddingEnd: paddingRight,
-    start: left
-  },
-  PROPERTIES_VALUE = ["clear", "float", "textAlign"];
+var import_simple_hash = require("@tamagui/simple-hash");
+var import_createReactDOMStyle = require("./createReactDOMStyle.cjs");
+var import_hyphenateStyleName = require("./hyphenateStyleName.cjs");
+var import_normalizeValueWithProperty = require("./normalizeValueWithProperty.cjs");
+const cache = /* @__PURE__ */new Map();
+const emptyObject = {};
+const classicGroup = 1;
+const atomicGroup = 2.2;
+const customGroup = {
+  borderColor: 2,
+  borderRadius: 2,
+  borderStyle: 2,
+  borderWidth: 2,
+  display: 2,
+  flex: 2,
+  margin: 2,
+  overflow: 2,
+  overscrollBehavior: 2,
+  padding: 2,
+  marginHorizontal: 2.1,
+  marginVertical: 2.1,
+  paddingHorizontal: 2.1,
+  paddingVertical: 2.1
+};
+const borderTopLeftRadius = "borderTopLeftRadius";
+const borderTopRightRadius = "borderTopRightRadius";
+const borderBottomLeftRadius = "borderBottomLeftRadius";
+const borderBottomRightRadius = "borderBottomRightRadius";
+const borderLeftColor = "borderLeftColor";
+const borderLeftStyle = "borderLeftStyle";
+const borderLeftWidth = "borderLeftWidth";
+const borderRightColor = "borderRightColor";
+const borderRightStyle = "borderRightStyle";
+const borderRightWidth = "borderRightWidth";
+const right = "right";
+const marginLeft = "marginLeft";
+const marginRight = "marginRight";
+const paddingLeft = "paddingLeft";
+const paddingRight = "paddingRight";
+const left = "left";
+const PROPERTIES_FLIP = {
+  [borderTopLeftRadius]: borderTopRightRadius,
+  [borderTopRightRadius]: borderTopLeftRadius,
+  [borderBottomLeftRadius]: borderBottomRightRadius,
+  [borderBottomRightRadius]: borderBottomLeftRadius,
+  [borderLeftColor]: borderRightColor,
+  [borderLeftStyle]: borderRightStyle,
+  [borderLeftWidth]: borderRightWidth,
+  [borderRightColor]: borderLeftColor,
+  [borderRightStyle]: borderLeftStyle,
+  [borderRightWidth]: borderLeftWidth,
+  [left]: right,
+  [marginLeft]: marginRight,
+  [marginRight]: marginLeft,
+  [paddingLeft]: paddingRight,
+  [paddingRight]: paddingLeft,
+  [right]: left
+};
+const PROPERTIES_I18N = {
+  borderTopStartRadius: borderTopLeftRadius,
+  borderTopEndRadius: borderTopRightRadius,
+  borderBottomStartRadius: borderBottomLeftRadius,
+  borderBottomEndRadius: borderBottomRightRadius,
+  borderStartColor: borderLeftColor,
+  borderStartStyle: borderLeftStyle,
+  borderStartWidth: borderLeftWidth,
+  borderEndColor: borderRightColor,
+  borderEndStyle: borderRightStyle,
+  borderEndWidth: borderRightWidth,
+  end: right,
+  marginStart: marginLeft,
+  marginEnd: marginRight,
+  paddingStart: paddingLeft,
+  paddingEnd: paddingRight,
+  start: left
+};
+const PROPERTIES_VALUE = ["clear", "float", "textAlign"];
 function atomic(style) {
   const compiledStyle = {
-      $$css: !0
-    },
-    compiledRules = [];
+    $$css: true
+  };
+  const compiledRules = [];
   function atomicCompile(prop, value) {
-    const valueString = stringifyValueWithProperty(value, prop),
-      cacheKey = prop + valueString,
-      cachedResult = cache.get(cacheKey);
+    const valueString = stringifyValueWithProperty(value, prop);
+    const cacheKey = prop + valueString;
+    const cachedResult = cache.get(cacheKey);
     let identifier;
-    if (cachedResult != null) identifier = cachedResult[0], compiledRules.push(cachedResult[1]);else {
+    if (cachedResult != null) {
+      identifier = cachedResult[0];
+      compiledRules.push(cachedResult[1]);
+    } else {
       identifier = createIdentifier("r", prop, value);
-      const order = customGroup[prop] || atomicGroup,
-        orderedRules = [createAtomicRules(identifier, prop, value), order];
-      compiledRules.push(orderedRules), cache.set(cacheKey, [identifier, orderedRules]);
+      const order = customGroup[prop] || atomicGroup;
+      const rules = createAtomicRules(identifier, prop, value);
+      const orderedRules = [rules, order];
+      compiledRules.push(orderedRules);
+      cache.set(cacheKey, [identifier, orderedRules]);
     }
     return identifier;
   }
-  return Object.keys(style).sort().forEach(prop => {
+  Object.keys(style).sort().forEach(prop => {
     const value = style[prop];
     if (value != null) {
       let localizeableValue;
       if (PROPERTIES_VALUE.indexOf(prop) > -1) {
-        const left2 = atomicCompile(prop, "left"),
-          right2 = atomicCompile(prop, "right");
-        value === "start" ? localizeableValue = [left2, right2] : value === "end" && (localizeableValue = [right2, left2]);
+        const left2 = atomicCompile(prop, "left");
+        const right2 = atomicCompile(prop, "right");
+        if (value === "start") {
+          localizeableValue = [left2, right2];
+        } else if (value === "end") {
+          localizeableValue = [right2, left2];
+        }
       }
       const propPolyfill = PROPERTIES_I18N[prop];
       if (propPolyfill != null) {
-        const ltr = atomicCompile(propPolyfill, value),
-          rtl = atomicCompile(PROPERTIES_FLIP[propPolyfill], value);
+        const ltr = atomicCompile(propPolyfill, value);
+        const rtl = atomicCompile(PROPERTIES_FLIP[propPolyfill], value);
         localizeableValue = [ltr, rtl];
       }
       if (prop === "transitionProperty") {
-        const values = Array.isArray(value) ? value : [value],
-          polyfillIndices = [];
+        const values = Array.isArray(value) ? value : [value];
+        const polyfillIndices = [];
         for (let i = 0; i < values.length; i++) {
           const val = values[i];
-          typeof val == "string" && PROPERTIES_I18N[val] != null && polyfillIndices.push(i);
+          if (typeof val === "string" && PROPERTIES_I18N[val] != null) {
+            polyfillIndices.push(i);
+          }
         }
         if (polyfillIndices.length > 0) {
-          const ltrPolyfillValues = [...values],
-            rtlPolyfillValues = [...values];
+          const ltrPolyfillValues = [...values];
+          const rtlPolyfillValues = [...values];
           polyfillIndices.forEach(i => {
             const ltrVal = ltrPolyfillValues[i];
-            if (typeof ltrVal == "string") {
-              const ltrPolyfill = PROPERTIES_I18N[ltrVal],
-                rtlPolyfill = PROPERTIES_FLIP[ltrPolyfill];
-              ltrPolyfillValues[i] = ltrPolyfill, rtlPolyfillValues[i] = rtlPolyfill;
-              const ltr = atomicCompile(prop, ltrPolyfillValues),
-                rtl = atomicCompile(prop, rtlPolyfillValues);
+            if (typeof ltrVal === "string") {
+              const ltrPolyfill = PROPERTIES_I18N[ltrVal];
+              const rtlPolyfill = PROPERTIES_FLIP[ltrPolyfill];
+              ltrPolyfillValues[i] = ltrPolyfill;
+              rtlPolyfillValues[i] = rtlPolyfill;
+              const ltr = atomicCompile(prop, ltrPolyfillValues);
+              const rtl = atomicCompile(prop, rtlPolyfillValues);
               localizeableValue = [ltr, rtl];
             }
           });
         }
       }
-      localizeableValue == null ? localizeableValue = atomicCompile(prop, value) : compiledStyle.$$css$localize = !0, compiledStyle[prop] = localizeableValue;
+      if (localizeableValue == null) {
+        localizeableValue = atomicCompile(prop, value);
+      } else {
+        compiledStyle["$$css$localize"] = true;
+      }
+      compiledStyle[prop] = localizeableValue;
     }
-  }), [compiledStyle, compiledRules];
+  });
+  return [compiledStyle, compiledRules];
 }
 function classic(style, name) {
   const compiledStyle = {
-      $$css: !0
-    },
-    compiledRules = [],
-    {
-      animationKeyframes,
-      ...rest
-    } = style,
-    identifier = createIdentifier("css", name, style),
-    selector = `.${identifier}`;
+    $$css: true
+  };
+  const compiledRules = [];
+  const {
+    animationKeyframes,
+    ...rest
+  } = style;
+  const identifier = createIdentifier("css", name, style);
+  const selector = `.${identifier}`;
   let animationName;
   if (animationKeyframes != null) {
     const [animationNames, keyframesRules] = processKeyframesValue(animationKeyframes);
-    animationName = animationNames.join(","), compiledRules.push(...keyframesRules);
+    animationName = animationNames.join(",");
+    compiledRules.push(...keyframesRules);
   }
   const block = createDeclarationBlock({
     ...rest,
     animationName
   });
-  return compiledRules.push(`${selector}${block}`), compiledStyle[identifier] = identifier, [compiledStyle, [[compiledRules, classicGroup]]];
+  compiledRules.push(`${selector}${block}`);
+  compiledStyle[identifier] = identifier;
+  return [compiledStyle, [[compiledRules, classicGroup]]];
 }
 function inline(originalStyle, isRTL) {
-  const style = originalStyle || emptyObject,
-    frozenProps = {},
-    nextStyle = {};
+  const style = originalStyle || emptyObject;
+  const frozenProps = {};
+  const nextStyle = {};
   for (const originalProp in style) {
     const originalValue = style[originalProp];
-    let prop = originalProp,
-      value = originalValue;
-    if (!Object.prototype.hasOwnProperty.call(style, originalProp) || originalValue == null) continue;
-    PROPERTIES_VALUE.indexOf(originalProp) > -1 && (originalValue === "start" ? value = isRTL ? "right" : "left" : originalValue === "end" && (value = isRTL ? "left" : "right"));
+    let prop = originalProp;
+    let value = originalValue;
+    if (!Object.prototype.hasOwnProperty.call(style, originalProp) || originalValue == null) {
+      continue;
+    }
+    if (PROPERTIES_VALUE.indexOf(originalProp) > -1) {
+      if (originalValue === "start") {
+        value = isRTL ? "right" : "left";
+      } else if (originalValue === "end") {
+        value = isRTL ? "left" : "right";
+      }
+    }
     const propPolyfill = PROPERTIES_I18N[originalProp];
-    if (propPolyfill != null && (prop = isRTL ? PROPERTIES_FLIP[propPolyfill] : propPolyfill), originalProp === "transitionProperty") {
+    if (propPolyfill != null) {
+      prop = isRTL ? PROPERTIES_FLIP[propPolyfill] : propPolyfill;
+    }
+    if (originalProp === "transitionProperty") {
       const originalValues = Array.isArray(originalValue) ? originalValue : [originalValue];
       originalValues.forEach((val, i) => {
-        if (typeof val == "string") {
+        if (typeof val === "string") {
           const valuePolyfill = PROPERTIES_I18N[val];
-          valuePolyfill != null && (originalValues[i] = isRTL ? PROPERTIES_FLIP[valuePolyfill] : valuePolyfill);
+          if (valuePolyfill != null) {
+            originalValues[i] = isRTL ? PROPERTIES_FLIP[valuePolyfill] : valuePolyfill;
+          }
         }
       });
     }
-    frozenProps[prop] || (nextStyle[prop] = value), PROPERTIES_I18N.hasOwnProperty(originalProp) && (frozenProps[prop] = !0);
+    if (!frozenProps[prop]) {
+      nextStyle[prop] = value;
+    }
+    if (PROPERTIES_I18N.hasOwnProperty(originalProp)) {
+      frozenProps[prop] = true;
+    }
   }
-  return (0, import_createReactDOMStyle.createReactDOMStyle)(nextStyle, !0);
+  return (0, import_createReactDOMStyle.createReactDOMStyle)(nextStyle, true);
 }
 function stringifyValueWithProperty(value, property) {
   const normalizedValue = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(value, property);
-  return typeof normalizedValue != "string" ? JSON.stringify(normalizedValue || "") : normalizedValue;
+  return typeof normalizedValue !== "string" ? JSON.stringify(normalizedValue || "") : normalizedValue;
 }
 function createAtomicRules(identifier, property, value) {
-  const rules = [],
-    selector = `.${identifier}`;
+  const rules = [];
+  const selector = `.${identifier}`;
   switch (property) {
     case "animationKeyframes":
       {
-        const [animationNames, keyframesRules] = processKeyframesValue(value),
-          block = createDeclarationBlock({
-            animationName: animationNames.join(",")
-          });
+        const [animationNames, keyframesRules] = processKeyframesValue(value);
+        const block = createDeclarationBlock({
+          animationName: animationNames.join(",")
+        });
         rules.push(`${selector}${block}`, ...keyframesRules);
         break;
       }
@@ -242,17 +283,21 @@ function createAtomicRules(identifier, property, value) {
       {
         let finalValue = value;
         if (value === "auto" || value === "box-only") {
-          if (finalValue = "auto!important", 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", value === "box-none")) {
-          const block2 = createDeclarationBlock({
-            pointerEvents: "auto"
-          });
-          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
@@ -264,7 +309,9 @@ function createAtomicRules(identifier, property, value) {
     // https://drafts.csswg.org/css-scrollbars-1/
     case "scrollbarWidth":
       {
-        value === "none" && rules.push(`${selector}::-webkit-scrollbar{display:none}`);
+        if (value === "none") {
+          rules.push(`${selector}::-webkit-scrollbar{display:none}`);
+        }
         const block = createDeclarationBlock({
           scrollbarWidth: value
         });
@@ -284,35 +331,49 @@ function createAtomicRules(identifier, property, value) {
 }
 function createDeclarationBlock(style) {
   const domStyle = (0, import_createReactDOMStyle.createReactDOMStyle)(style);
-  return `{${Object.keys(domStyle).map(property => {
-    const value = domStyle[property],
-      prop = (0, import_hyphenateStyleName.hyphenateStyleName)(property);
-    return Array.isArray(value) ? value.map(v => `${prop}:${v}`).join(";") : `${prop}:${value}`;
-  }).sort().join(";")};}`;
+  const declarationsString = Object.keys(domStyle).map(property => {
+    const value = domStyle[property];
+    const prop = (0, import_hyphenateStyleName.hyphenateStyleName)(property);
+    if (Array.isArray(value)) {
+      return value.map(v => `${prop}:${v}`).join(";");
+    } else {
+      return `${prop}:${value}`;
+    }
+  }).sort().join(";");
+  return `{${declarationsString};}`;
 }
 function createIdentifier(prefix, name, value) {
   const hashedString = (0, import_simple_hash.simpleHash)(name + stringifyValueWithProperty(value, name));
   return process.env.NODE_ENV !== "production" ? `${prefix}-${name}-${hashedString}` : `${prefix}-${hashedString}`;
 }
 function createKeyframes(keyframes) {
-  const prefixes = ["-webkit-", ""],
-    identifier = createIdentifier("r", "animation", keyframes),
-    steps = "{" + Object.keys(keyframes).map(stepName => {
-      const rule = keyframes[stepName],
-        block = createDeclarationBlock(rule);
-      return `${stepName}${block}`;
-    }).join("") + "}",
-    rules = prefixes.map(prefix => `@${prefix}keyframes ${identifier}${steps}`);
+  const prefixes = ["-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 = prefixes.map(prefix => {
+    return `@${prefix}keyframes ${identifier}${steps}`;
+  });
   return [identifier, rules];
 }
 function processKeyframesValue(keyframesValue) {
-  if (typeof keyframesValue == "number") throw new Error(`Invalid CSS keyframes type: ${typeof keyframesValue}`);
-  const animationNames = [],
-    rules = [];
-  return (Array.isArray(keyframesValue) ? keyframesValue : [keyframesValue]).forEach(keyframes => {
-    if (typeof keyframes == "string") animationNames.push(keyframes);else {
+  if (typeof keyframesValue === "number") {
+    throw new Error(`Invalid CSS keyframes type: ${typeof keyframesValue}`);
+  }
+  const animationNames = [];
+  const rules = [];
+  const value = Array.isArray(keyframesValue) ? keyframesValue : [keyframesValue];
+  value.forEach(keyframes => {
+    if (typeof keyframes === "string") {
+      animationNames.push(keyframes);
+    } else {
       const [identifier, keyframesRules] = createKeyframes(keyframes);
-      animationNames.push(identifier), rules.push(...keyframesRules);
+      animationNames.push(identifier);
+      rules.push(...keyframesRules);
     }
-  }), [animationNames, rules];
+  });
+  return [animationNames, rules];
 }

package/dist/cjs/StyleSheet/compiler/normalizeColor.cjs

@@ -3,38 +3,34 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
+  value: true
 }), mod);
 var normalizeColor_exports = {};
 __export(normalizeColor_exports, {
   normalizeColor: () => normalizeColor
 });
 module.exports = __toCommonJS(normalizeColor_exports);
-var import_isWebColor = require("../../modules/isWebColor/index.cjs"),
-  import_processColor = require("../../modules/processColor/index.cjs");
+var import_isWebColor = require("../../modules/isWebColor/index.cjs");
+var import_processColor = require("../../modules/processColor/index.cjs");
 const normalizeColor = (color, opacity = 1) => {
   if (color == null) return;
-  if (typeof color == "string" && (0, import_isWebColor.isWebColor)(color)) return color;
+  if (typeof color === "string" && (0, import_isWebColor.isWebColor)(color)) return color;
   const colorInt = (0, import_processColor.processColor)(color);
-  if (colorInt != null) {
-    const r = colorInt >> 16 & 255,
-      g = colorInt >> 8 & 255,
-      b = colorInt & 255,
-      alpha = ((colorInt >> 24 & 255) / 255 * opacity).toFixed(2);
-    return `rgba(${r},${g},${b},${alpha})`;
-  }
-  if (typeof color == "string") return color;
+  if (colorInt != null) return `rgba(${colorInt >> 16 & 255},${colorInt >> 8 & 255},${colorInt & 255},${((colorInt >> 24 & 255) / 255 * opacity).toFixed(2)})`;
+  if (typeof color === "string") return color;
 };

package/dist/cjs/StyleSheet/compiler/normalizeValueWithProperty.cjs

@@ -3,41 +3,48 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
+  value: true
 }), mod);
 var normalizeValueWithProperty_exports = {};
 __export(normalizeValueWithProperty_exports, {
   normalizeValueWithProperty: () => normalizeValueWithProperty
 });
 module.exports = __toCommonJS(normalizeValueWithProperty_exports);
-var import_unitlessNumbers = require("../../modules/unitlessNumbers/index.cjs"),
-  import_normalizeColor = require("./normalizeColor.cjs");
+var import_unitlessNumbers = require("../../modules/unitlessNumbers/index.cjs");
+var import_normalizeColor = require("./normalizeColor.cjs");
 const colorProps = {
-  backgroundColor: !0,
-  borderColor: !0,
-  borderTopColor: !0,
-  borderRightColor: !0,
-  borderBottomColor: !0,
-  borderLeftColor: !0,
-  color: !0,
-  shadowColor: !0,
-  textDecorationColor: !0,
-  textShadowColor: !0
+  backgroundColor: true,
+  borderColor: true,
+  borderTopColor: true,
+  borderRightColor: true,
+  borderBottomColor: true,
+  borderLeftColor: true,
+  color: true,
+  shadowColor: true,
+  textDecorationColor: true,
+  textShadowColor: true
 };
 function normalizeValueWithProperty(value, property) {
   let returnValue = value;
-  return (property == null || !import_unitlessNumbers.unitlessNumbers[property]) && typeof value == "number" ? returnValue = `${value}px` : property != null && colorProps[property] && (returnValue = (0, import_normalizeColor.normalizeColor)(value)), returnValue;
+  if ((property == null || !import_unitlessNumbers.unitlessNumbers[property]) && typeof value === "number") {
+    returnValue = `${value}px`;
+  } else if (property != null && colorProps[property]) {
+    returnValue = (0, import_normalizeColor.normalizeColor)(value);
+  }
+  return returnValue;
 }