@hanzogui/react-native-web-internals 2.0.0

package/dist/esm/StyleSheet/__tests__/compiler-test.mjs

@@ -0,0 +1,408 @@
+import { atomic, classic, inline } from "../compiler/index.mjs";
+describe("StyleSheet/compile", () => {
+  describe("atomic", () => {
+    test("converts style to atomic CSS", () => {
+      const result = 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 = 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 = inline({
+        marginHorizontal: 10,
+        display: "flex",
+        flexShrink: 1
+      });
+      expect(result).toMatchInlineSnapshot(`
+        {
+          "display": "flex",
+          "flexShrink": 1,
+          "marginLeft": "10px",
+          "marginRight": "10px",
+        }
+      `);
+    }), describe("logical style polyfill", () => {
+      [!1, !0].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(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(inline(initial, isRTL)).toEqual(initial);
+        }), test(`ignores "left" values for ${dir}`, () => {
+          const initial = {
+            clear: "left",
+            float: "left",
+            textAlign: "left",
+            transitionProperty: "left"
+          };
+          expect(inline(initial, isRTL)).toEqual(initial);
+        }), test(`ignores "right" values for ${dir}`, () => {
+          const initial = {
+            clear: "right",
+            float: "right",
+            textAlign: "right",
+            transitionProperty: "right"
+          };
+          expect(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
+            },
+            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"
+            };
+          expect(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
+            },
+            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"
+            };
+          expect(inline(initial, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR);
+        }), 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"
+            };
+          expect(inline(initial, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR);
+        }), 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"
+            };
+          expect(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
+            },
+            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"
+            };
+          expect(inline(isRTL ? initialRTL : initialLTR, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR);
+        });
+      });
+    });
+  });
+});
+//# sourceMappingURL=compiler-test.mjs.map

package/dist/esm/StyleSheet/__tests__/compiler-test.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["atomic","classic","inline","describe","test","result","animationDirection","animationKeyframes","top","from","left","to","fontFamily","marginHorizontal","marginStart","marginEnd","placeholderTextColor","scrollbarWidth","pointerEvents","start","textAlign","transform","translateX","scale","expect","toMatchInlineSnapshot","font","display","flexShrink","forEach","isRTL","dir","initial","borderLeftColor","borderLeftStyle","borderLeftWidth","marginLeft","paddingLeft","toEqual","borderRightColor","borderRightStyle","borderRightWidth","right","marginRight","paddingRight","clear","float","transitionProperty","borderStartColor","borderStartStyle","borderStartWidth","paddingStart","expectedLTR","expectedRTL","borderEndColor","borderEndStyle","borderEndWidth","end","paddingEnd","initialLTR","initialRTL"],"sources":["../../../../src/StyleSheet/__tests__/compiler-test.tsx"],"sourcesContent":[null],"mappings":"AAOA,SAASA,MAAA,EAAQC,OAAA,EAASC,MAAA,QAAc;AAExCC,QAAA,CAAS,sBAAsB,MAAM;EACnCA,QAAA,CAAS,UAAU,MAAM;IACvBC,IAAA,CAAK,gCAAgC,MAAM;MACzC,MAAMC,MAAA,GAASL,MAAA,CAAO;QACpBM,kBAAA,EAAoB,CAAC,aAAa,mBAAmB;QACrDC,kBAAA,EAAoB,CAClB;UAAE,MAAM;YAAEC,GAAA,EAAK;UAAE;UAAG,OAAO;YAAEA,GAAA,EAAK;UAAE;UAAG,QAAQ;YAAEA,GAAA,EAAK;UAAG;QAAE,GAC3D;UAAEC,IAAA,EAAM;YAAEC,IAAA,EAAM;UAAE;UAAGC,EAAA,EAAI;YAAED,IAAA,EAAM;UAAG;QAAE,EACxC;QACAE,UAAA,EAAY;QACZC,gBAAA,EAAkB;QAClBC,WAAA,EAAa;QACbC,SAAA,EAAW;QACXC,oBAAA,EAAsB;QACtBC,cAAA,EAAgB;QAChBC,aAAA,EAAe;QACfC,KAAA,EAAO;QACPC,SAAA,EAAW;QACXC,SAAA,EAAW,CACT;UACEC,UAAA,EAAY;UACZC,KAAA,EAAO;QACT;MAEJ,CAAC;MAEDC,MAAA,CAAOnB,MAAM,EAAEoB,qBAAA,CAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OA0IpC;IACH,CAAC;EACH,CAAC,GAEDtB,QAAA,CAAS,WAAW,MAAM;IACxBC,IAAA,CAAK,iCAAiC,MAAM;MAC1C,MAAMC,MAAA,GAASJ,OAAA,CACb;QACEK,kBAAA,EAAoB,CAAC,aAAa,mBAAmB;QACrDC,kBAAA,EAAoB,CAClB;UAAE,MAAM;YAAEC,GAAA,EAAK;UAAE;UAAG,OAAO;YAAEA,GAAA,EAAK;UAAE;UAAG,QAAQ;YAAEA,GAAA,EAAK;UAAG;QAAE,GAC3D;UAAEC,IAAA,EAAM;YAAEC,IAAA,EAAM;UAAE;UAAGC,EAAA,EAAI;YAAED,IAAA,EAAM;UAAG;QAAE,EACxC;QACAG,gBAAA,EAAkB;QAClBa,IAAA,EAAM;QACNL,SAAA,EAAW,CACT;UACEC,UAAA,EAAY;UACZC,KAAA,EAAO;QACT;MAEJ,GACA,MACF;MACAC,MAAA,CAAOnB,MAAM,EAAEoB,qBAAA,CAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAmBpC;IACH,CAAC;EACH,CAAC,GAEDtB,QAAA,CAAS,UAAU,MAAM;IACvBC,IAAA,CAAK,mCAAmC,MAAM;MAC5C,MAAMC,MAAA,GAASH,MAAA,CAAO;QACpBW,gBAAA,EAAkB;QAClBc,OAAA,EAAS;QACTC,UAAA,EAAY;MACd,CAAC;MAEDJ,MAAA,CAAOnB,MAAM,EAAEoB,qBAAA,CAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAOpC;IACH,CAAC,GAEDtB,QAAA,CAAS,0BAA0B,MAAM;MACtC,CAAC,IAAO,EAAI,EAAE0B,OAAA,CAASC,KAAA,IAAU;QAChC,MAAMC,GAAA,GAAMD,KAAA,GAAQ,QAAQ;QAE5B1B,IAAA,CAAK,iCAAiC2B,GAAG,IAAI,MAAM;UACjD,MAAMC,OAAA,GAAU;YACdC,eAAA,EAAiB;YACjBC,eAAA,EAAiB;YACjBC,eAAA,EAAiB;YACjBzB,IAAA,EAAM;YACN0B,UAAA,EAAY;YACZC,WAAA,EAAa;UACf;UACAb,MAAA,CAAOtB,MAAA,CAAO8B,OAAA,EAASF,KAAK,CAAC,EAAEQ,OAAA,CAAQN,OAAO;QAChD,CAAC,GAED5B,IAAA,CAAK,kCAAkC2B,GAAG,IAAI,MAAM;UAClD,MAAMC,OAAA,GAAU;YACdO,gBAAA,EAAkB;YAClBC,gBAAA,EAAkB;YAClBC,gBAAA,EAAkB;YAClBC,KAAA,EAAO;YACPC,WAAA,EAAa;YACbC,YAAA,EAAc;UAChB;UACApB,MAAA,CAAOtB,MAAA,CAAO8B,OAAA,EAASF,KAAK,CAAC,EAAEQ,OAAA,CAAQN,OAAO;QAChD,CAAC,GAED5B,IAAA,CAAK,6BAA6B2B,GAAG,IAAI,MAAM;UAC7C,MAAMC,OAAA,GAAU;YACda,KAAA,EAAO;YACPC,KAAA,EAAO;YACP1B,SAAA,EAAW;YACX2B,kBAAA,EAAoB;UACtB;UACAvB,MAAA,CAAOtB,MAAA,CAAO8B,OAAA,EAASF,KAAK,CAAC,EAAEQ,OAAA,CAAQN,OAAO;QAChD,CAAC,GAED5B,IAAA,CAAK,8BAA8B2B,GAAG,IAAI,MAAM;UAC9C,MAAMC,OAAA,GAAU;YACda,KAAA,EAAO;YACPC,KAAA,EAAO;YACP1B,SAAA,EAAW;YACX2B,kBAAA,EAAoB;UACtB;UACAvB,MAAA,CAAOtB,MAAA,CAAO8B,OAAA,EAASF,KAAK,CAAC,EAAEQ,OAAA,CAAQN,OAAO;QAChD,CAAC,GAED5B,IAAA,CAAK,mCAAmC2B,GAAG,IAAI,MAAM;UACnD,MAAMC,OAAA,GAAU;cACdgB,gBAAA,EAAkB;cAClBC,gBAAA,EAAkB;cAClBC,gBAAA,EAAkB;cAClB/B,KAAA,EAAO;cACPL,WAAA,EAAa;cACbqC,YAAA,EAAc;YAChB;YAEMC,WAAA,GAAc;cAClBnB,eAAA,EAAiB;cACjBC,eAAA,EAAiB;cACjBC,eAAA,EAAiB;cACjBzB,IAAA,EAAM;cACN0B,UAAA,EAAY;cACZC,WAAA,EAAa;YACf;YACMgB,WAAA,GAAc;cAClBd,gBAAA,EAAkB;cAClBC,gBAAA,EAAkB;cAClBC,gBAAA,EAAkB;cAClBC,KAAA,EAAO;cACPC,WAAA,EAAa;cACbC,YAAA,EAAc;YAChB;UACApB,MAAA,CAAOtB,MAAA,CAAO8B,OAAA,EAASF,KAAK,CAAC,EAAEQ,OAAA,CAAQR,KAAA,GAAQuB,WAAA,GAAcD,WAAW;QAC1E,CAAC,GAEDhD,IAAA,CAAK,iCAAiC2B,GAAG,IAAI,MAAM;UACjD,MAAMC,OAAA,GAAU;cACdsB,cAAA,EAAgB;cAChBC,cAAA,EAAgB;cAChBC,cAAA,EAAgB;cAChBC,GAAA,EAAK;cACL1C,SAAA,EAAW;cACX2C,UAAA,EAAY;YACd;YAEMN,WAAA,GAAc;cAClBb,gBAAA,EAAkB;cAClBC,gBAAA,EAAkB;cAClBC,gBAAA,EAAkB;cAClBC,KAAA,EAAO;cACPC,WAAA,EAAa;cACbC,YAAA,EAAc;YAChB;YACMS,WAAA,GAAc;cAClBpB,eAAA,EAAiB;cACjBC,eAAA,EAAiB;cACjBC,eAAA,EAAiB;cACjBzB,IAAA,EAAM;cACN0B,UAAA,EAAY;cACZC,WAAA,EAAa;YACf;UACAb,MAAA,CAAOtB,MAAA,CAAO8B,OAAA,EAASF,KAAK,CAAC,EAAEQ,OAAA,CAAQR,KAAA,GAAQuB,WAAA,GAAcD,WAAW;QAC1E,CAAC,GAEDhD,IAAA,CAAK,+BAA+B2B,GAAG,IAAI,MAAM;UAC/C,MAAMC,OAAA,GAAU;cACda,KAAA,EAAO;cACPC,KAAA,EAAO;cACP1B,SAAA,EAAW;cACX2B,kBAAA,EAAoB;YACtB;YAEMK,WAAA,GAAc;cAClBP,KAAA,EAAO;cACPC,KAAA,EAAO;cACP1B,SAAA,EAAW;cACX2B,kBAAA,EAAoB;YACtB;YACMM,WAAA,GAAc;cAClBR,KAAA,EAAO;cACPC,KAAA,EAAO;cACP1B,SAAA,EAAW;cACX2B,kBAAA,EAAoB;YACtB;UACAvB,MAAA,CAAOtB,MAAA,CAAO8B,OAAA,EAASF,KAAK,CAAC,EAAEQ,OAAA,CAAQR,KAAA,GAAQuB,WAAA,GAAcD,WAAW;QAC1E,CAAC,GAEDhD,IAAA,CAAK,6BAA6B2B,GAAG,IAAI,MAAM;UAC7C,MAAMC,OAAA,GAAU;cACda,KAAA,EAAO;cACPC,KAAA,EAAO;cACP1B,SAAA,EAAW;cACX2B,kBAAA,EAAoB;YACtB;YAEMK,WAAA,GAAc;cAClBP,KAAA,EAAO;cACPC,KAAA,EAAO;cACP1B,SAAA,EAAW;cACX2B,kBAAA,EAAoB;YACtB;YACMM,WAAA,GAAc;cAClBR,KAAA,EAAO;cACPC,KAAA,EAAO;cACP1B,SAAA,EAAW;cACX2B,kBAAA,EAAoB;YACtB;UACAvB,MAAA,CAAOtB,MAAA,CAAO8B,OAAA,EAASF,KAAK,CAAC,EAAEQ,OAAA,CAAQR,KAAA,GAAQuB,WAAA,GAAcD,WAAW;QAC1E,CAAC,GAEDhD,IAAA,CAAK,wDAAwD,MAAM;UACjE,MAAMuD,UAAA,GAAa;cACjBT,gBAAA,EAAkB;cAClBf,eAAA,EAAiB;cACjBsB,GAAA,EAAK;cACLf,KAAA,EAAO;cACP5B,WAAA,EAAa;cACbsB,UAAA,EAAY;YACd;YACMgB,WAAA,GAAc;cAClBjB,eAAA,EAAiB;cACjBC,UAAA,EAAY;cACZM,KAAA,EAAO;YACT;YAEMkB,UAAA,GAAa;cACjBV,gBAAA,EAAkB;cAClBT,gBAAA,EAAkB;cAClBgB,GAAA,EAAK;cACL/C,IAAA,EAAM;cACNI,WAAA,EAAa;cACb6B,WAAA,EAAa;YACf;YACMU,WAAA,GAAc;cAClBZ,gBAAA,EAAkB;cAClBE,WAAA,EAAa;cACbjC,IAAA,EAAM;YACR;UACAc,MAAA,CAAOtB,MAAA,CAAO4B,KAAA,GAAQ8B,UAAA,GAAaD,UAAA,EAAY7B,KAAK,CAAC,EAAEQ,OAAA,CACrDR,KAAA,GAAQuB,WAAA,GAAcD,WACxB;QACF,CAAC;MACH,CAAC;IACH,CAAC;EACH,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/esm/StyleSheet/__tests__/dom-createOrderedCSSStyleSheet-test.mjs

@@ -0,0 +1,100 @@
+import createOrderedCSSStyleSheet from "../dom/createOrderedCSSStyleSheet.mjs";
+const insertStyleElement = () => {
+    const element = document.createElement("style"),
+      head = document.head;
+    return head.insertBefore(element, head.firstChild), element;
+  },
+  removeStyleElement = element => {
+    document.head.removeChild(element);
+  };
+describe("createOrderedCSSStyleSheet", () => {
+  describe("#insert", () => {
+    test("insertion order for same group", () => {
+      const sheet = createOrderedCSSStyleSheet();
+      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 = createOrderedCSSStyleSheet();
+      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 = createOrderedCSSStyleSheet();
+      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 = createOrderedCSSStyleSheet();
+      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(() => {
+      element != null && removeStyleElement(element), element = insertStyleElement();
+    }), test("from SSR CSS", () => {
+      const serverSheet = createOrderedCSSStyleSheet();
+      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 = createOrderedCSSStyleSheet(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 = createOrderedCSSStyleSheet();
+      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 = createOrderedCSSStyleSheet(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;}"
+      `);
+    });
+  });
+});
+//# sourceMappingURL=dom-createOrderedCSSStyleSheet-test.mjs.map

package/dist/esm/StyleSheet/__tests__/dom-createOrderedCSSStyleSheet-test.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["createOrderedCSSStyleSheet","insertStyleElement","element","document","createElement","head","insertBefore","firstChild","removeStyleElement","removeChild","describe","test","sheet","expect","getTextContent","toMatchInlineSnapshot","insert","beforeEach","serverSheet","textContent","appendChild","createTextNode","clientSheet","replace"],"sources":["../../../../src/StyleSheet/__tests__/dom-createOrderedCSSStyleSheet-test.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}