@hanzogui/react-native-web-internals 2.0.0-rc.41-hanzoai.5

package/dist/cjs/StyleSheet/__tests__/dom-createOrderedCSSStyleSheet-test.cjs

@@ -0,0 +1,160 @@
+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_createOrderedCSSStyleSheet = __toESM(require("../dom/createOrderedCSSStyleSheet.cjs"), 1);
+const insertStyleElement = () => {
+  const element = document.createElement("style");
+  const head = document.head;
+  head.insertBefore(element, head.firstChild);
+  return element;
+};
+const removeStyleElement = element => {
+  document.head.removeChild(element);
+};
+describe("createOrderedCSSStyleSheet", () => {
+  describe("#insert", () => {
+    test("insertion order for same group", () => {
+      const sheet = (0, import_createOrderedCSSStyleSheet.default)();
+      expect(sheet.getTextContent()).toMatchInlineSnapshot('""');
+      sheet.insert(".a {}", 0);
+      expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        .a {}"
+      `);
+      sheet.insert(".b {}", 0);
+      expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        .a {}
+        .b {}"
+      `);
+      sheet.insert(".c {}", 0);
+      expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        .a {}
+        .b {}
+        .c {}"
+      `);
+    });
+    test("deduplication for same group", () => {
+      const sheet = (0, import_createOrderedCSSStyleSheet.default)();
+      sheet.insert(".a {}", 0);
+      sheet.insert(".a {}", 0);
+      sheet.insert(".a {}", 0);
+      expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        .a {}"
+      `);
+    });
+    test("order for same group", () => {
+      const sheet = (0, import_createOrderedCSSStyleSheet.default)();
+      sheet.insert(".c {}", 0);
+      sheet.insert(".b {}", 0);
+      sheet.insert(".a {}", 0);
+      expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        .a {}
+        .b {}
+        .c {}"
+      `);
+    });
+    test("insertion order for different groups", () => {
+      const sheet = (0, import_createOrderedCSSStyleSheet.default)();
+      sheet.insert(".nine-1 {}", 9.9);
+      sheet.insert(".nine-2 {}", 9.9);
+      sheet.insert(".three {}", 3);
+      sheet.insert(".one {}", 1);
+      sheet.insert(".two {}", 2.2);
+      sheet.insert(".four-1 {}", 4);
+      sheet.insert(".four-2 {}", 4);
+      sheet.insert(".twenty {}", 20);
+      sheet.insert(".ten {}", 10);
+      sheet.insert(".twenty-point2 {}", 20.2);
+      expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"1\\"]{}
+        .one {}
+        [stylesheet-group=\\"2.2\\"]{}
+        .two {}
+        [stylesheet-group=\\"3\\"]{}
+        .three {}
+        [stylesheet-group=\\"4\\"]{}
+        .four-1 {}
+        .four-2 {}
+        [stylesheet-group=\\"9.9\\"]{}
+        .nine-1 {}
+        .nine-2 {}
+        [stylesheet-group=\\"10\\"]{}
+        .ten {}
+        [stylesheet-group=\\"20\\"]{}
+        .twenty {}
+        [stylesheet-group=\\"20.2\\"]{}
+        .twenty-point2 {}"
+      `);
+    });
+  });
+  describe("client-side hydration", () => {
+    let element;
+    beforeEach(() => {
+      if (element != null) {
+        removeStyleElement(element);
+      }
+      element = insertStyleElement();
+    });
+    test("from SSR CSS", () => {
+      const serverSheet = (0, import_createOrderedCSSStyleSheet.default)();
+      serverSheet.insert(".one { width: 10px; }", 1);
+      serverSheet.insert(".two-1 { height: 20px; }", 2);
+      serverSheet.insert(".two-2 { color: red; }", 2);
+      serverSheet.insert("@keyframes anim { 0% { opacity: 1; } }", 2);
+      const textContent = serverSheet.getTextContent();
+      element.appendChild(document.createTextNode(textContent));
+      const clientSheet = (0, import_createOrderedCSSStyleSheet.default)(element.sheet);
+      expect(clientSheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"1\\"] {}
+        .one {width: 10px;}
+        [stylesheet-group=\\"2\\"] {}
+        .two-1 {height: 20px;}
+        .two-2 {color: red;}
+        @keyframes anim { 
+          0% {opacity: 1;} 
+        }"
+      `);
+    });
+    test("works when the group marker is in single quotes", () => {
+      const serverSheet = (0, import_createOrderedCSSStyleSheet.default)();
+      serverSheet.insert(".a { color: red }", 0);
+      serverSheet.insert(".b { color: red }", 1);
+      const textContent = serverSheet.getTextContent().replace(/"/g, "'");
+      element.appendChild(document.createTextNode(textContent));
+      const clientSheet = (0, import_createOrderedCSSStyleSheet.default)(element.sheet);
+      clientSheet.insert(".c { color: red }", 0);
+      expect(clientSheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group='0'] {}
+        .a {color: red;}
+        .c { color: red }
+        [stylesheet-group='1'] {}
+        .b {color: red;}"
+      `);
+    });
+  });
+});

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

@@ -0,0 +1,436 @@
+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__ = __toESM(require("../index.cjs"), 1);
+describe("StyleSheet", () => {
+  test("getSheet", () => {
+    expect(import__.default.getSheet()).toMatchInlineSnapshot(`
+      {
+        "id": "react-native-stylesheet",
+        "textContent": "[stylesheet-group=\\"0\\"]{}
+      body{margin:0;}
+      button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+      html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+      input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+      [stylesheet-group=\\"2.2\\"]{}
+      .r-bottom-1p0dtai{bottom:0px;}
+      .r-left-1d2f490{left:0px;}
+      .r-position-u8s1d{position:absolute;}
+      .r-right-zchlnj{right:0px;}
+      .r-top-ipm5af{top:0px;}",
+      }
+    `);
+  });
+  test("absoluteFill", () => {
+    expect(import__.default.absoluteFill).toMatchInlineSnapshot(`
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    `);
+  });
+  test("absoluteFillObject", () => {
+    expect(import__.default.absoluteFillObject).toMatchInlineSnapshot(`
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    `);
+  });
+  test("compose", () => {
+    expect(import__.default.compose(1, 2)).toEqual([1, 2]);
+    expect(import__.default.compose(1, null)).toBe(1);
+    expect(import__.default.compose(null, 2)).toBe(2);
+  });
+  describe("create", () => {
+    test("returns original style objects", () => {
+      const style = import__.default.create({
+        root: {
+          position: "absolute"
+        }
+      });
+      expect(style.root).toMatchInlineSnapshot(`
+        {
+          "position": "absolute",
+        }
+      `);
+    });
+    test("e2e resolves to classname", () => {
+      const style = import__.default.create({
+        root: {
+          position: "absolute"
+        }
+      });
+      expect((0, import__.default)(style.root)).toMatchInlineSnapshot(`
+        [
+          "r-position-u8s1d",
+          null,
+        ]
+      `);
+    });
+    test("e2e flattens shadow style properties", () => {
+      const style = import__.default.create({
+        root: {
+          shadowColor: "rgba(50,60,70,0.5)",
+          shadowOffset: {
+            width: 1,
+            height: 2
+          },
+          shadowOpacity: 0.5,
+          shadowRadius: 3,
+          textShadowColor: "rgba(50,60,70,0.50)",
+          textShadowOffset: {
+            width: 5,
+            height: 10
+          },
+          textShadowRadius: 15
+        }
+      });
+      expect((0, import__.default)(style.root)).toMatchInlineSnapshot(`
+        [
+          "r-boxShadow-o3ayyy r-textShadow-1x2q051",
+          null,
+        ]
+      `);
+    });
+  });
+  describe("flatten", () => {
+    test("should merge style objects", () => {
+      const style = import__.default.flatten([{
+        opacity: 1
+      }, {
+        order: 2
+      }]);
+      expect(style).toMatchInlineSnapshot(`
+        {
+          "opacity": 1,
+          "order": 2,
+        }
+      `);
+    });
+    test("should override style properties", () => {
+      const style = import__.default.flatten([{
+        backgroundColor: "#000",
+        order: 1
+      }, {
+        backgroundColor: "#023c69",
+        order: null
+      }]);
+      expect(style).toMatchInlineSnapshot(`
+        {
+          "backgroundColor": "#023c69",
+          "order": null,
+        }
+      `);
+    });
+    test("should overwrite properties with `undefined`", () => {
+      const style = import__.default.flatten([{
+        backgroundColor: "#000"
+      }, {
+        backgroundColor: void 0
+      }]);
+      expect(style).toMatchInlineSnapshot(`
+        {
+          "backgroundColor": undefined,
+        }
+      `);
+    });
+    test("should not fail on falsy values", () => {
+      expect(() => import__.default.flatten([null, false, void 0])).not.toThrow();
+    });
+    test("should recursively flatten arrays", () => {
+      const style = import__.default.flatten([null, [], [{
+        order: 2
+      }, {
+        opacity: 1
+      }], {
+        order: 3
+      }]);
+      expect(style).toMatchInlineSnapshot(`
+        {
+          "opacity": 1,
+          "order": 3,
+        }
+      `);
+    });
+  });
+  test("hairlineWidth", () => {
+    expect(Number.isInteger(import__.default.hairlineWidth) === true).toBeTruthy();
+  });
+  describe("resolve", () => {
+    test("empty", () => {
+      expect((0, import__.default)()).toMatchInlineSnapshot(`
+        [
+          "",
+          null,
+        ]
+      `);
+      expect((0, import__.default)({})).toMatchInlineSnapshot(`
+        [
+          "",
+          null,
+        ]
+      `);
+      expect((0, import__.default)([])).toMatchInlineSnapshot(`
+        [
+          "",
+          null,
+        ]
+      `);
+    });
+    test("transforms compiled object to className", () => {
+      expect((0, import__.default)([{
+        $$css: true,
+        position: "position-absolute",
+        opacity: "opacity-05",
+        width: "width-200"
+      }])).toMatchInlineSnapshot(`
+        [
+          "position-absolute opacity-05 width-200",
+          null,
+        ]
+      `);
+    });
+    test("transforms array of compiled objects to className", () => {
+      expect((0, import__.default)([{
+        $$css: true,
+        borderWidth: "borderWidth-0",
+        borderColor: "borderColor-red",
+        display: "display-flex",
+        width: "width-100"
+      }, {
+        $$css: true,
+        position: "position-absolute",
+        opacity: "opacity-05"
+      }, [{
+        $$css: true,
+        width: "width-200"
+      }]])).toMatchInlineSnapshot(`
+        [
+          "borderWidth-0 borderColor-red display-flex position-absolute opacity-05 width-200",
+          null,
+        ]
+      `);
+    });
+    test("dedupes class names and inline styles", () => {
+      const styleACompiled = {
+        $$css: true,
+        backgroundColor: "backgroundColor-red",
+        display: "display-block"
+      };
+      const styleBCompiled = {
+        $$css: true,
+        backgroundColor: "backgroundColor-green",
+        color: "color-green"
+      };
+      const styleBInline = {
+        backgroundColor: "rgba(0,0,255,1.00)",
+        color: null
+      };
+      const [className1, inlineStyle1] = (0, import__.default)([styleACompiled, styleBCompiled, styleBInline]);
+      expect(className1).toBe("display-block");
+      expect(inlineStyle1).toEqual({
+        backgroundColor: "rgba(0,0,255,1.00)"
+      });
+      const [className2, inlineStyle2] = (0, import__.default)([styleACompiled, styleBInline, styleBCompiled]);
+      expect(className2).toBe("display-block backgroundColor-green color-green");
+      expect(inlineStyle2).toEqual(null);
+    });
+    test("long form inline style properties take precedence over static shorthand properties", () => {
+      const styles1 = import__.default.create({
+        test: {
+          paddingHorizontal: "40px"
+        }
+      });
+      const inlineStyle1 = {
+        padding: "8px",
+        paddingHorizontal: "40px"
+      };
+      expect((0, import__.default)([styles1.test, inlineStyle1])).toMatchInlineSnapshot(`
+        [
+          "",
+          {
+            "paddingBottom": "8px",
+            "paddingLeft": "40px",
+            "paddingRight": "40px",
+            "paddingTop": "8px",
+          },
+        ]
+      `);
+      const styles2 = import__.default.create({
+        test: {
+          marginVertical: "40px"
+        }
+      });
+      const inlineStyle2 = {
+        margin: "8px",
+        marginVertical: "40px"
+      };
+      expect((0, import__.default)([styles2.test, inlineStyle2])).toMatchInlineSnapshot(`
+        [
+          "",
+          {
+            "marginBottom": "40px",
+            "marginLeft": "8px",
+            "marginRight": "8px",
+            "marginTop": "40px",
+          },
+        ]
+      `);
+    });
+    test("polyfills logical styles", () => {
+      const inlineA = {
+        start: "12.34%"
+      };
+      const inlineB = {
+        textAlign: "start"
+      };
+      const inlineC = {
+        marginEnd: 10
+      };
+      const a = import__.default.create({
+        x: {
+          ...inlineA
+        }
+      }).x;
+      const b = import__.default.create({
+        x: {
+          ...inlineB
+        }
+      }).x;
+      const c = import__.default.create({
+        x: {
+          ...inlineC
+        }
+      }).x;
+      const writingDirection = "rtl";
+      const inlineStyle = [inlineA, inlineB, inlineC];
+      expect((0, import__.default)(inlineStyle)).toMatchInlineSnapshot(`
+        [
+          "",
+          {
+            "left": "12.34%",
+            "marginRight": "10px",
+            "textAlign": "left",
+          },
+        ]
+      `);
+      expect((0, import__.default)(inlineStyle, {
+        writingDirection
+      })).toMatchInlineSnapshot(`
+        [
+          "",
+          {
+            "marginLeft": "10px",
+            "right": "12.34%",
+            "textAlign": "right",
+          },
+        ]
+      `);
+      expect((0, import__.default)([inlineStyle, {
+        marginLeft: 1,
+        marginEnd: 0,
+        marginStart: 0,
+        marginRight: 11
+      }], {
+        writingDirection
+      })).toMatchInlineSnapshot(`
+        [
+          "",
+          {
+            "marginLeft": "0px",
+            "marginRight": "0px",
+            "right": "12.34%",
+            "textAlign": "right",
+          },
+        ]
+      `);
+      expect((0, import__.default)([inlineStyle, {
+        marginEnd: null,
+        marginLeft: 11
+      }], {
+        writingDirection
+      })).toMatchInlineSnapshot(`
+        [
+          "",
+          {
+            "marginLeft": "11px",
+            "right": "12.34%",
+            "textAlign": "right",
+          },
+        ]
+      `);
+      const staticStyle = [a, b, c];
+      expect((0, import__.default)(staticStyle)).toMatchInlineSnapshot(`
+        [
+          "r-left-2s0hu9 r-textAlign-fdjqy7 r-marginRight-zso239",
+          null,
+        ]
+      `);
+      expect((0, import__.default)(staticStyle, {
+        writingDirection
+      })).toMatchInlineSnapshot(`
+        [
+          "r-right-1bnbe1j r-textAlign-1ff274t r-marginLeft-1n0xq6e",
+          null,
+        ]
+      `);
+      expect((0, import__.default)([staticStyle, {
+        marginLeft: 1,
+        marginEnd: 0,
+        marginStart: 0,
+        marginRight: 11
+      }], {
+        writingDirection
+      })).toMatchInlineSnapshot(`
+        [
+          "r-right-1bnbe1j r-textAlign-1ff274t",
+          {
+            "marginLeft": "0px",
+            "marginRight": "0px",
+          },
+        ]
+      `);
+      expect((0, import__.default)([staticStyle, {
+        marginEnd: null,
+        marginLeft: 11
+      }], {
+        writingDirection
+      })).toMatchInlineSnapshot(`
+        [
+          "r-right-1bnbe1j r-textAlign-1ff274t",
+          {
+            "marginLeft": "11px",
+          },
+        ]
+      `);
+    });
+  });
+});