@tamagui/react-native-web-internals 1.116.1 → 1.116.2

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

@@ -0,0 +1,192 @@
+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 __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 });
+  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: !0 }) : target,
+  mod
+));
+var import_createReactDOMStyle = __toESM(require("../compiler/createReactDOMStyle"));
+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), 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, !0)).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)", resolved = (0, import_createReactDOMStyle.default)({ transform });
+      expect(resolved).toEqual({ transform });
+    }), test("array", () => {
+      const resolved = (0, import_createReactDOMStyle.default)({
+        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] }
+        ]
+      });
+      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)"
+      });
+    });
+  });
+});
+//# sourceMappingURL=compiler-createReactDOMStyle-test.js.map

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

@@ -0,0 +1,378 @@
+var import_compiler = require("../compiler");
+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", () => {
+      [!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((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
+          }, 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((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
+          }, 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((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"
+          }, expectedLTR = {
+            clear: "left",
+            float: "left",
+            textAlign: "left",
+            transitionProperty: "left"
+          }, 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"
+          }, expectedLTR = {
+            clear: "right",
+            float: "right",
+            textAlign: "right",
+            transitionProperty: "right"
+          }, 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
+          }, 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((0, import_compiler.inline)(isRTL ? initialRTL : initialLTR, isRTL)).toEqual(
+            isRTL ? expectedRTL : expectedLTR
+          );
+        });
+      });
+    });
+  });
+});
+//# sourceMappingURL=compiler-test.js.map

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

@@ -0,0 +1,117 @@
+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 __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 });
+  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: !0 }) : target,
+  mod
+));
+var import_createOrderedCSSStyleSheet = __toESM(require("../dom/createOrderedCSSStyleSheet"));
+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 = (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(() => {
+      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;}"
+      `);
+    });
+  });
+});
+//# sourceMappingURL=dom-createOrderedCSSStyleSheet-test.js.map