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

package/dist/cjs/StyleSheet/__tests__/compiler-createReactDOMStyle-test.cjs

@@ -2,13 +2,15 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __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, {
-    get: () => from[key],
-    enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-  });
+  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;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
@@ -18,7 +20,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 // "default" to the CommonJS "module.exports" for node compatibility.
 isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
   value: mod,
-  enumerable: !0
+  enumerable: true
 }) : target, mod));
 var import_createReactDOMStyle = __toESM(require("../compiler/createReactDOMStyle.cjs"), 1);
 const reactNativeStyle = {
@@ -38,10 +40,11 @@ const reactNativeStyle = {
 };
 describe("compiler/createReactDOMStyle", () => {
   test("noop on DOM styles", () => {
-    const firstStyle = (0, import_createReactDOMStyle.default)(reactNativeStyle),
-      secondStyle = (0, import_createReactDOMStyle.default)(firstStyle);
+    const firstStyle = (0, import_createReactDOMStyle.default)(reactNativeStyle);
+    const secondStyle = (0, import_createReactDOMStyle.default)(firstStyle);
     expect(firstStyle).toEqual(secondStyle);
-  }), test("shortform -> longform for inline styles", () => {
+  });
+  test("shortform -> longform for inline styles", () => {
     const style = {
       borderStyle: "solid",
       boxSizing: "border-box",
@@ -57,7 +60,7 @@ describe("compiler/createReactDOMStyle", () => {
       paddingHorizontal: 25,
       padding: 10
     };
-    expect((0, import_createReactDOMStyle.default)(style, !0)).toMatchInlineSnapshot(`
+    expect((0, import_createReactDOMStyle.default)(style, true)).toMatchInlineSnapshot(`
       {
         "borderBottomColor": "rgba(255,255,255,1.00)",
         "borderBottomStyle": "solid",
@@ -83,13 +86,15 @@ describe("compiler/createReactDOMStyle", () => {
         "paddingTop": "10px",
       }
     `);
-  }), test("aspectRatio", () => {
+  });
+  test("aspectRatio", () => {
     expect((0, import_createReactDOMStyle.default)({
       aspectRatio: 9 / 16
     })).toEqual({
       aspectRatio: "0.5625"
     });
-  }), describe("flexbox styles", () => {
+  });
+  describe("flexbox styles", () => {
     test("flex: -1", () => {
       expect((0, import_createReactDOMStyle.default)({
         flex: -1
@@ -98,42 +103,49 @@ describe("compiler/createReactDOMStyle", () => {
         flexShrink: 1,
         flexBasis: "auto"
       });
-    }), test("flex: 0", () => {
+    });
+    test("flex: 0", () => {
       expect((0, import_createReactDOMStyle.default)({
         flex: 0
       })).toEqual({
         flex: 0
       });
-    }), test("flex: 1", () => {
+    });
+    test("flex: 1", () => {
       expect((0, import_createReactDOMStyle.default)({
         flex: 1
       })).toEqual({
         flex: 1
       });
-    }), test("flex: 10", () => {
+    });
+    test("flex: 10", () => {
       expect((0, import_createReactDOMStyle.default)({
         flex: 10
       })).toEqual({
         flex: 10
       });
-    }), test("flexBasis overrides", () => {
+    });
+    test("flexBasis overrides", () => {
       expect((0, import_createReactDOMStyle.default)({
         flexBasis: "25%"
       })).toEqual({
         flexBasis: "25%"
-      }), expect((0, import_createReactDOMStyle.default)({
+      });
+      expect((0, import_createReactDOMStyle.default)({
         flex: 1,
         flexBasis: "25%"
       })).toEqual({
         flex: 1,
         flexBasis: "25%"
       });
-    }), test("flexShrink overrides", () => {
+    });
+    test("flexShrink overrides", () => {
       expect((0, import_createReactDOMStyle.default)({
         flexShrink: 1
       })).toEqual({
         flexShrink: 1
-      }), expect((0, import_createReactDOMStyle.default)({
+      });
+      expect((0, import_createReactDOMStyle.default)({
         flex: 1,
         flexShrink: 2
       })).toEqual({
@@ -141,7 +153,8 @@ describe("compiler/createReactDOMStyle", () => {
         flexShrink: 2
       });
     });
-  }), describe("fontFamily", () => {
+  });
+  describe("fontFamily", () => {
     test("general case", () => {
       expect((0, import_createReactDOMStyle.default)({
         fontFamily: "Georgia, Times, serif"
@@ -150,7 +163,8 @@ describe("compiler/createReactDOMStyle", () => {
           "fontFamily": "Georgia, Times, serif",
         }
       `);
-    }), test('"monospace"', () => {
+    });
+    test('"monospace"', () => {
       expect((0, import_createReactDOMStyle.default)({
         fontFamily: "monospace"
       })).toMatchInlineSnapshot(`
@@ -158,35 +172,40 @@ describe("compiler/createReactDOMStyle", () => {
           "fontFamily": "monospace,monospace",
         }
       `);
-    }), test('"System"', () => {
+    });
+    test('"System"', () => {
       expect((0, import_createReactDOMStyle.default)({
         fontFamily: "System"
       })).toMatchInlineSnapshot(`
         {
           "fontFamily": "-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
         }
-      `), expect((0, import_createReactDOMStyle.default)({
+      `);
+      expect((0, import_createReactDOMStyle.default)({
         font: "14px System"
       })).toMatchInlineSnapshot(`
         {
           "font": "14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
         }
       `);
-    }), test('"Noto, System"', () => {
+    });
+    test('"Noto, System"', () => {
       expect((0, import_createReactDOMStyle.default)({
         fontFamily: "Noto, System"
       })).toMatchInlineSnapshot(`
         {
           "fontFamily": "Noto,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
         }
-      `), expect((0, import_createReactDOMStyle.default)({
+      `);
+      expect((0, import_createReactDOMStyle.default)({
         font: "14px Noto, System"
       })).toMatchInlineSnapshot(`
         {
           "font": "14px Noto, -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
         }
       `);
-    }), test('"Noto, BlinkMacSystemFont"', () => {
+    });
+    test('"Noto, BlinkMacSystemFont"', () => {
       expect((0, import_createReactDOMStyle.default)({
         fontFamily: "Noto, BlinkMacSystemFont"
       })).toMatchInlineSnapshot(`
@@ -195,29 +214,34 @@ describe("compiler/createReactDOMStyle", () => {
         }
       `);
     });
-  }), test("fontVariant", () => {
+  });
+  test("fontVariant", () => {
     expect((0, import_createReactDOMStyle.default)({
       fontVariant: ["common-ligatures", "small-caps"]
     })).toEqual({
       fontVariant: "common-ligatures small-caps"
     });
-  }), test("textAlignVertical", () => {
+  });
+  test("textAlignVertical", () => {
     expect((0, import_createReactDOMStyle.default)({
       textAlignVertical: "center"
     })).toEqual({
       verticalAlign: "middle"
     });
-  }), describe("transform", () => {
+  });
+  describe("transform", () => {
     test("string", () => {
-      const transform = "perspective(50px) scaleX(20) translateX(20px) rotate(20deg)",
-        resolved = (0, import_createReactDOMStyle.default)({
-          transform
-        });
+      const transform = "perspective(50px) scaleX(20) translateX(20px) rotate(20deg)";
+      const style = {
+        transform
+      };
+      const resolved = (0, import_createReactDOMStyle.default)(style);
       expect(resolved).toEqual({
         transform
       });
-    }), test("array", () => {
-      const resolved = (0, import_createReactDOMStyle.default)({
+    });
+    test("array", () => {
+      const style = {
         transform: [{
           perspective: 50
         }, {
@@ -231,7 +255,8 @@ describe("compiler/createReactDOMStyle", () => {
         }, {
           matrix3d: [1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4]
         }]
-      });
+      };
+      const resolved = (0, import_createReactDOMStyle.default)(style);
       expect(resolved).toEqual({
         transform: "perspective(50px) scaleX(20) translateX(20px) rotate(20deg) matrix(1,2,3,4,5,6) matrix3d(1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4)"
       });

package/dist/cjs/StyleSheet/__tests__/compiler-test.cjs

@@ -176,7 +176,8 @@ describe("StyleSheet/compile", () => {
         ]
       `);
     });
-  }), describe("classic", () => {
+  });
+  describe("classic", () => {
     test("converts style to classic CSS", () => {
       const result = (0, import_compiler.classic)({
         animationDirection: ["alternate", "alternate-reverse"],
@@ -226,7 +227,8 @@ describe("StyleSheet/compile", () => {
         ]
       `);
     });
-  }), describe("inline", () => {
+  });
+  describe("inline", () => {
     test("converts style to inline styles", () => {
       const result = (0, import_compiler.inline)({
         marginHorizontal: 10,
@@ -241,8 +243,10 @@ describe("StyleSheet/compile", () => {
           "marginRight": "10px",
         }
       `);
-    }), describe("logical style polyfill", () => {
-      [!1, !0].forEach(isRTL => {
+    });
+    describe("logical style polyfill", () => {
+      ;
+      [false, true].forEach(isRTL => {
         const dir = isRTL ? "rtl" : "ltr";
         test(`ignores "left" properties for ${dir}`, () => {
           const initial = {
@@ -254,7 +258,8 @@ describe("StyleSheet/compile", () => {
             paddingLeft: "10px"
           };
           expect((0, import_compiler.inline)(initial, isRTL)).toEqual(initial);
-        }), test(`ignores "right" properties for ${dir}`, () => {
+        });
+        test(`ignores "right" properties for ${dir}`, () => {
           const initial = {
             borderRightColor: "rgba(255,0,0,1.00)",
             borderRightStyle: "solid",
@@ -264,7 +269,8 @@ describe("StyleSheet/compile", () => {
             paddingRight: "10px"
           };
           expect((0, import_compiler.inline)(initial, isRTL)).toEqual(initial);
-        }), test(`ignores "left" values for ${dir}`, () => {
+        });
+        test(`ignores "left" values for ${dir}`, () => {
           const initial = {
             clear: "left",
             float: "left",
@@ -272,7 +278,8 @@ describe("StyleSheet/compile", () => {
             transitionProperty: "left"
           };
           expect((0, import_compiler.inline)(initial, isRTL)).toEqual(initial);
-        }), test(`ignores "right" values for ${dir}`, () => {
+        });
+        test(`ignores "right" values for ${dir}`, () => {
           const initial = {
             clear: "right",
             float: "right",
@@ -280,125 +287,130 @@ describe("StyleSheet/compile", () => {
             transitionProperty: "right"
           };
           expect((0, import_compiler.inline)(initial, isRTL)).toEqual(initial);
-        }), test(`converts "start" properties for ${dir}`, () => {
+        });
+        test(`converts "start" properties for ${dir}`, () => {
           const initial = {
-              borderStartColor: "red",
-              borderStartStyle: "solid",
-              borderStartWidth: 1,
-              start: 1,
-              marginStart: 5,
-              paddingStart: 10
-            },
-            expectedLTR = {
-              borderLeftColor: "rgba(255,0,0,1.00)",
-              borderLeftStyle: "solid",
-              borderLeftWidth: "1px",
-              left: "1px",
-              marginLeft: "5px",
-              paddingLeft: "10px"
-            },
-            expectedRTL = {
-              borderRightColor: "rgba(255,0,0,1.00)",
-              borderRightStyle: "solid",
-              borderRightWidth: "1px",
-              right: "1px",
-              marginRight: "5px",
-              paddingRight: "10px"
-            };
+            borderStartColor: "red",
+            borderStartStyle: "solid",
+            borderStartWidth: 1,
+            start: 1,
+            marginStart: 5,
+            paddingStart: 10
+          };
+          const expectedLTR = {
+            borderLeftColor: "rgba(255,0,0,1.00)",
+            borderLeftStyle: "solid",
+            borderLeftWidth: "1px",
+            left: "1px",
+            marginLeft: "5px",
+            paddingLeft: "10px"
+          };
+          const expectedRTL = {
+            borderRightColor: "rgba(255,0,0,1.00)",
+            borderRightStyle: "solid",
+            borderRightWidth: "1px",
+            right: "1px",
+            marginRight: "5px",
+            paddingRight: "10px"
+          };
           expect((0, import_compiler.inline)(initial, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR);
-        }), test(`converts "end" properties for ${dir}`, () => {
+        });
+        test(`converts "end" properties for ${dir}`, () => {
           const initial = {
-              borderEndColor: "red",
-              borderEndStyle: "solid",
-              borderEndWidth: 1,
-              end: 1,
-              marginEnd: 5,
-              paddingEnd: 10
-            },
-            expectedLTR = {
-              borderRightColor: "rgba(255,0,0,1.00)",
-              borderRightStyle: "solid",
-              borderRightWidth: "1px",
-              right: "1px",
-              marginRight: "5px",
-              paddingRight: "10px"
-            },
-            expectedRTL = {
-              borderLeftColor: "rgba(255,0,0,1.00)",
-              borderLeftStyle: "solid",
-              borderLeftWidth: "1px",
-              left: "1px",
-              marginLeft: "5px",
-              paddingLeft: "10px"
-            };
+            borderEndColor: "red",
+            borderEndStyle: "solid",
+            borderEndWidth: 1,
+            end: 1,
+            marginEnd: 5,
+            paddingEnd: 10
+          };
+          const expectedLTR = {
+            borderRightColor: "rgba(255,0,0,1.00)",
+            borderRightStyle: "solid",
+            borderRightWidth: "1px",
+            right: "1px",
+            marginRight: "5px",
+            paddingRight: "10px"
+          };
+          const expectedRTL = {
+            borderLeftColor: "rgba(255,0,0,1.00)",
+            borderLeftStyle: "solid",
+            borderLeftWidth: "1px",
+            left: "1px",
+            marginLeft: "5px",
+            paddingLeft: "10px"
+          };
           expect((0, import_compiler.inline)(initial, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR);
-        }), test(`converts "start" values for ${dir}`, () => {
+        });
+        test(`converts "start" values for ${dir}`, () => {
           const initial = {
-              clear: "start",
-              float: "start",
-              textAlign: "start",
-              transitionProperty: "start"
-            },
-            expectedLTR = {
-              clear: "left",
-              float: "left",
-              textAlign: "left",
-              transitionProperty: "left"
-            },
-            expectedRTL = {
-              clear: "right",
-              float: "right",
-              textAlign: "right",
-              transitionProperty: "right"
-            };
+            clear: "start",
+            float: "start",
+            textAlign: "start",
+            transitionProperty: "start"
+          };
+          const expectedLTR = {
+            clear: "left",
+            float: "left",
+            textAlign: "left",
+            transitionProperty: "left"
+          };
+          const expectedRTL = {
+            clear: "right",
+            float: "right",
+            textAlign: "right",
+            transitionProperty: "right"
+          };
           expect((0, import_compiler.inline)(initial, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR);
-        }), test(`converts "end" values for ${dir}`, () => {
+        });
+        test(`converts "end" values for ${dir}`, () => {
           const initial = {
-              clear: "end",
-              float: "end",
-              textAlign: "end",
-              transitionProperty: "end"
-            },
-            expectedLTR = {
-              clear: "right",
-              float: "right",
-              textAlign: "right",
-              transitionProperty: "right"
-            },
-            expectedRTL = {
-              clear: "left",
-              float: "left",
-              textAlign: "left",
-              transitionProperty: "left"
-            };
+            clear: "end",
+            float: "end",
+            textAlign: "end",
+            transitionProperty: "end"
+          };
+          const expectedLTR = {
+            clear: "right",
+            float: "right",
+            textAlign: "right",
+            transitionProperty: "right"
+          };
+          const expectedRTL = {
+            clear: "left",
+            float: "left",
+            textAlign: "left",
+            transitionProperty: "left"
+          };
           expect((0, import_compiler.inline)(initial, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR);
-        }), test("end/start properties take precedence over left/right", () => {
+        });
+        test("end/start properties take precedence over left/right", () => {
           const initialLTR = {
-              borderStartWidth: 10,
-              borderLeftWidth: 0,
-              end: 10,
-              right: 0,
-              marginStart: 10,
-              marginLeft: 0
-            },
-            expectedLTR = {
-              borderLeftWidth: "10px",
-              marginLeft: "10px",
-              right: "10px"
-            },
-            initialRTL = {
-              borderStartWidth: 10,
-              borderRightWidth: 0,
-              end: 10,
-              left: 0,
-              marginStart: 10,
-              marginRight: 0
-            },
-            expectedRTL = {
-              borderRightWidth: "10px",
-              marginRight: "10px",
-              left: "10px"
-            };
+            borderStartWidth: 10,
+            borderLeftWidth: 0,
+            end: 10,
+            right: 0,
+            marginStart: 10,
+            marginLeft: 0
+          };
+          const expectedLTR = {
+            borderLeftWidth: "10px",
+            marginLeft: "10px",
+            right: "10px"
+          };
+          const initialRTL = {
+            borderStartWidth: 10,
+            borderRightWidth: 0,
+            end: 10,
+            left: 0,
+            marginStart: 10,
+            marginRight: 0
+          };
+          const expectedRTL = {
+            borderRightWidth: "10px",
+            marginRight: "10px",
+            left: "10px"
+          };
           expect((0, import_compiler.inline)(isRTL ? initialRTL : initialLTR, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR);
         });
       });