@hanzogui/react-native-web-internals 8.3.1 → 8.3.2

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

@@ -1,265 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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)) 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(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
-}) : target, mod));
-var import_createReactDOMStyle = __toESM(require("../compiler/createReactDOMStyle.cjs"), 1);
-const reactNativeStyle = {
-  boxShadow: "1px 1px 1px 1px #000",
-  borderWidthLeft: 2,
-  borderWidth: 1,
-  borderWidthRight: 3,
-  display: "flex",
-  marginVertical: 0,
-  opacity: 0,
-  shadowColor: "red",
-  shadowOffset: {
-    width: 1,
-    height: 2
-  },
-  resizeMode: "contain"
-};
-describe("compiler/createReactDOMStyle", () => {
-  test("noop on DOM styles", () => {
-    const firstStyle = (0, import_createReactDOMStyle.default)(reactNativeStyle);
-    const secondStyle = (0, import_createReactDOMStyle.default)(firstStyle);
-    expect(firstStyle).toEqual(secondStyle);
-  });
-  test("shortform -> longform for inline styles", () => {
-    const style = {
-      borderStyle: "solid",
-      boxSizing: "border-box",
-      borderBottomColor: "white",
-      borderBottomWidth: 1,
-      borderWidth: 0,
-      marginTop: 50,
-      marginVertical: 25,
-      margin: 10,
-      overflow: "hidden",
-      overscrollBehavior: "contain",
-      paddingLeft: 50,
-      paddingHorizontal: 25,
-      padding: 10
-    };
-    expect((0, import_createReactDOMStyle.default)(style, true)).toMatchInlineSnapshot(`
-      {
-        "borderBottomColor": "rgba(255,255,255,1.00)",
-        "borderBottomStyle": "solid",
-        "borderBottomWidth": "1px",
-        "borderLeftStyle": "solid",
-        "borderLeftWidth": "0px",
-        "borderRightStyle": "solid",
-        "borderRightWidth": "0px",
-        "borderTopStyle": "solid",
-        "borderTopWidth": "0px",
-        "boxSizing": "border-box",
-        "marginBottom": "25px",
-        "marginLeft": "10px",
-        "marginRight": "10px",
-        "marginTop": "50px",
-        "overflowX": "hidden",
-        "overflowY": "hidden",
-        "overscrollBehaviorX": "contain",
-        "overscrollBehaviorY": "contain",
-        "paddingBottom": "10px",
-        "paddingLeft": "50px",
-        "paddingRight": "25px",
-        "paddingTop": "10px",
-      }
-    `);
-  });
-  test("aspectRatio", () => {
-    expect((0, import_createReactDOMStyle.default)({
-      aspectRatio: 9 / 16
-    })).toEqual({
-      aspectRatio: "0.5625"
-    });
-  });
-  describe("flexbox styles", () => {
-    test("flex: -1", () => {
-      expect((0, import_createReactDOMStyle.default)({
-        flex: -1
-      })).toEqual({
-        flexGrow: 0,
-        flexShrink: 1,
-        flexBasis: "auto"
-      });
-    });
-    test("flex: 0", () => {
-      expect((0, import_createReactDOMStyle.default)({
-        flex: 0
-      })).toEqual({
-        flex: 0
-      });
-    });
-    test("flex: 1", () => {
-      expect((0, import_createReactDOMStyle.default)({
-        flex: 1
-      })).toEqual({
-        flex: 1
-      });
-    });
-    test("flex: 10", () => {
-      expect((0, import_createReactDOMStyle.default)({
-        flex: 10
-      })).toEqual({
-        flex: 10
-      });
-    });
-    test("flexBasis overrides", () => {
-      expect((0, import_createReactDOMStyle.default)({
-        flexBasis: "25%"
-      })).toEqual({
-        flexBasis: "25%"
-      });
-      expect((0, import_createReactDOMStyle.default)({
-        flex: 1,
-        flexBasis: "25%"
-      })).toEqual({
-        flex: 1,
-        flexBasis: "25%"
-      });
-    });
-    test("flexShrink overrides", () => {
-      expect((0, import_createReactDOMStyle.default)({
-        flexShrink: 1
-      })).toEqual({
-        flexShrink: 1
-      });
-      expect((0, import_createReactDOMStyle.default)({
-        flex: 1,
-        flexShrink: 2
-      })).toEqual({
-        flex: 1,
-        flexShrink: 2
-      });
-    });
-  });
-  describe("fontFamily", () => {
-    test("general case", () => {
-      expect((0, import_createReactDOMStyle.default)({
-        fontFamily: "Georgia, Times, serif"
-      })).toMatchInlineSnapshot(`
-        {
-          "fontFamily": "Georgia, Times, serif",
-        }
-      `);
-    });
-    test('"monospace"', () => {
-      expect((0, import_createReactDOMStyle.default)({
-        fontFamily: "monospace"
-      })).toMatchInlineSnapshot(`
-        {
-          "fontFamily": "monospace,monospace",
-        }
-      `);
-    });
-    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)({
-        font: "14px System"
-      })).toMatchInlineSnapshot(`
-        {
-          "font": "14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
-        }
-      `);
-    });
-    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)({
-        font: "14px Noto, System"
-      })).toMatchInlineSnapshot(`
-        {
-          "font": "14px Noto, -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
-        }
-      `);
-    });
-    test('"Noto, BlinkMacSystemFont"', () => {
-      expect((0, import_createReactDOMStyle.default)({
-        fontFamily: "Noto, BlinkMacSystemFont"
-      })).toMatchInlineSnapshot(`
-        {
-          "fontFamily": "Noto,BlinkMacSystemFont",
-        }
-      `);
-    });
-  });
-  test("fontVariant", () => {
-    expect((0, import_createReactDOMStyle.default)({
-      fontVariant: ["common-ligatures", "small-caps"]
-    })).toEqual({
-      fontVariant: "common-ligatures small-caps"
-    });
-  });
-  test("textAlignVertical", () => {
-    expect((0, import_createReactDOMStyle.default)({
-      textAlignVertical: "center"
-    })).toEqual({
-      verticalAlign: "middle"
-    });
-  });
-  describe("transform", () => {
-    test("string", () => {
-      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 style = {
-        transform: [{
-          perspective: 50
-        }, {
-          scaleX: 20
-        }, {
-          translateX: 20
-        }, {
-          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]
-        }]
-      };
-      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

@@ -1,419 +0,0 @@
-var import_compiler = require("../compiler/index.cjs");
-describe("StyleSheet/compile", () => {
-  describe("atomic", () => {
-    test("converts style to atomic CSS", () => {
-      const result = (0, import_compiler.atomic)({
-        animationDirection: ["alternate", "alternate-reverse"],
-        animationKeyframes: [{
-          "0%": {
-            top: 0
-          },
-          "50%": {
-            top: 5
-          },
-          "100%": {
-            top: 10
-          }
-        }, {
-          from: {
-            left: 0
-          },
-          to: {
-            left: 10
-          }
-        }],
-        fontFamily: "System",
-        marginHorizontal: 10,
-        marginStart: 1,
-        marginEnd: 2,
-        placeholderTextColor: "gray",
-        scrollbarWidth: "none",
-        pointerEvents: "box-only",
-        start: "12.34%",
-        textAlign: "start",
-        transform: [{
-          translateX: 50,
-          scale: -1
-        }]
-      });
-      expect(result).toMatchInlineSnapshot(`
-        [
-          {
-            "$$css": true,
-            "$$css$localize": true,
-            "animationDirection": "r-animationDirection-1kmv48j",
-            "animationKeyframes": "r-animationKeyframes-zacbmr",
-            "fontFamily": "r-fontFamily-1qd0xha",
-            "marginEnd": [
-              "r-marginRight-a5pmau",
-              "r-marginLeft-9cviqr",
-            ],
-            "marginHorizontal": "r-marginHorizontal-vlx1xi",
-            "marginStart": [
-              "r-marginLeft-13kc5u0",
-              "r-marginRight-1knfw1x",
-            ],
-            "placeholderTextColor": "r-placeholderTextColor-1418aci",
-            "pointerEvents": "r-pointerEvents-ah5dr5",
-            "scrollbarWidth": "r-scrollbarWidth-2eszeu",
-            "start": [
-              "r-left-2s0hu9",
-              "r-right-1bnbe1j",
-            ],
-            "textAlign": [
-              "r-textAlign-fdjqy7",
-              "r-textAlign-1ff274t",
-            ],
-            "transform": "r-transform-1ehiua4",
-          },
-          [
-            [
-              [
-                ".r-animationDirection-1kmv48j{animation-direction:alternate,alternate-reverse;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-animationKeyframes-zacbmr{animation-name:r-animation-8jhqzh,r-animation-5azpl5;}",
-                "@-webkit-keyframes r-animation-8jhqzh{0%{top:0px;}50%{top:5px;}100%{top:10px;}}",
-                "@keyframes r-animation-8jhqzh{0%{top:0px;}50%{top:5px;}100%{top:10px;}}",
-                "@-webkit-keyframes r-animation-5azpl5{from{left:0px;}to{left:10px;}}",
-                "@keyframes r-animation-5azpl5{from{left:0px;}to{left:10px;}}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-fontFamily-1qd0xha{font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-marginRight-a5pmau{margin-right:2px;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-marginLeft-9cviqr{margin-left:2px;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-marginHorizontal-vlx1xi{margin-left:10px;margin-right:10px;}",
-              ],
-              2.1,
-            ],
-            [
-              [
-                ".r-marginLeft-13kc5u0{margin-left:1px;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-marginRight-1knfw1x{margin-right:1px;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-placeholderTextColor-1418aci::-webkit-input-placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
-                ".r-placeholderTextColor-1418aci::-moz-placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
-                ".r-placeholderTextColor-1418aci:-ms-input-placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
-                ".r-placeholderTextColor-1418aci::placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-pointerEvents-ah5dr5>*{pointer-events:none;}",
-                ".r-pointerEvents-ah5dr5{pointer-events:auto!important;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-scrollbarWidth-2eszeu::-webkit-scrollbar{display:none}",
-                ".r-scrollbarWidth-2eszeu{scrollbar-width:none;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-left-2s0hu9{left:12.34%;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-right-1bnbe1j{right:12.34%;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-textAlign-fdjqy7{text-align:left;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-textAlign-1ff274t{text-align:right;}",
-              ],
-              2.2,
-            ],
-            [
-              [
-                ".r-transform-1ehiua4{transform:translateX(50px);}",
-              ],
-              2.2,
-            ],
-          ],
-        ]
-      `);
-    });
-  });
-  describe("classic", () => {
-    test("converts style to classic CSS", () => {
-      const result = (0, import_compiler.classic)({
-        animationDirection: ["alternate", "alternate-reverse"],
-        animationKeyframes: [{
-          "0%": {
-            top: 0
-          },
-          "50%": {
-            top: 5
-          },
-          "100%": {
-            top: 10
-          }
-        }, {
-          from: {
-            left: 0
-          },
-          to: {
-            left: 10
-          }
-        }],
-        marginHorizontal: 10,
-        font: "14px System",
-        transform: [{
-          translateX: 50,
-          scale: -1
-        }]
-      }, "text");
-      expect(result).toMatchInlineSnapshot(`
-        [
-          {
-            "$$css": true,
-            "css-text-1jr0ypv": "css-text-1jr0ypv",
-          },
-          [
-            [
-              [
-                "@-webkit-keyframes r-animation-8jhqzh{0%{top:0px;}50%{top:5px;}100%{top:10px;}}",
-                "@keyframes r-animation-8jhqzh{0%{top:0px;}50%{top:5px;}100%{top:10px;}}",
-                "@-webkit-keyframes r-animation-5azpl5{from{left:0px;}to{left:10px;}}",
-                "@keyframes r-animation-5azpl5{from{left:0px;}to{left:10px;}}",
-                ".css-text-1jr0ypv{animation-direction:alternate,alternate-reverse;animation-name:r-animation-8jhqzh,r-animation-5azpl5;font:14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;margin-left:10px;margin-right:10px;transform:translateX(50px);}",
-              ],
-              1,
-            ],
-          ],
-        ]
-      `);
-    });
-  });
-  describe("inline", () => {
-    test("converts style to inline styles", () => {
-      const result = (0, import_compiler.inline)({
-        marginHorizontal: 10,
-        display: "flex",
-        flexShrink: 1
-      });
-      expect(result).toMatchInlineSnapshot(`
-        {
-          "display": "flex",
-          "flexShrink": 1,
-          "marginLeft": "10px",
-          "marginRight": "10px",
-        }
-      `);
-    });
-    describe("logical style polyfill", () => {
-      ;
-      [false, true].forEach(isRTL => {
-        const dir = isRTL ? "rtl" : "ltr";
-        test(`ignores "left" properties for ${dir}`, () => {
-          const initial = {
-            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(initial);
-        });
-        test(`ignores "right" properties for ${dir}`, () => {
-          const initial = {
-            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(initial);
-        });
-        test(`ignores "left" values for ${dir}`, () => {
-          const initial = {
-            clear: "left",
-            float: "left",
-            textAlign: "left",
-            transitionProperty: "left"
-          };
-          expect((0, import_compiler.inline)(initial, isRTL)).toEqual(initial);
-        });
-        test(`ignores "right" values for ${dir}`, () => {
-          const initial = {
-            clear: "right",
-            float: "right",
-            textAlign: "right",
-            transitionProperty: "right"
-          };
-          expect((0, import_compiler.inline)(initial, isRTL)).toEqual(initial);
-        });
-        test(`converts "start" properties for ${dir}`, () => {
-          const initial = {
-            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}`, () => {
-          const initial = {
-            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}`, () => {
-          const initial = {
-            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}`, () => {
-          const initial = {
-            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", () => {
-          const initialLTR = {
-            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);
-        });
-      });
-    });
-  });
-});