@tamagui/react-native-web-internals 2.7.7 → 3.0.0-beta.1093.1

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

@@ -1,160 +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_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

@@ -1,436 +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__ = __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",
-          },
-        ]
-      `);
-    });
-  });
-});