react-native-web-internals/dist/cjs/StyleSheet/__tests__/dom-createOrderedCSSStyleSheet-test.js

React Native for Web

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