ninjass/index.html at main · davidnormo/ninjass · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<html>
  <head>
    <script>
      (() => {
        var f = !1;
        globalThis.__styles = {};
        var m = (e) => e?.startsWith("@media"),
          r = (e, i, n, t = !1) => {
            for (let s in i[n]) e.style[s] = t ? i[s] : i[n][s];
          },
          o = "addEventListener",
          a = "getAttribute",
          d = "setAttribute",
          y = function (e, i, n) {
            if (e.styled !== n) {
              for (let t in i)
                if (t === ":hover")
                  e[o]("mouseover", () => {
                    r(e, i, t);
                  }),
                    e[o]("mouseout", () => {
                      r(e, i, t, !0);
                    });
                else if (m(t)) {
                  let s = t.slice(t.indexOf("(")),
                    c = window.matchMedia(s);
                  c[o]("change", (l) => {
                    l.matches ? r(e, i, t) : r(e, i, t, !0);
                  }),
                    c.matches && r(e, i, t);
                } else e.style[t] = i[t];
              e.styled = n;
            }
          };
        if (!f) {
          let e = Element.prototype[d];
          (Element.prototype[d] = function (n, t) {
            if (n === "css") {
              let s = globalThis.__styles[t];
              delete globalThis.__styles[t], y(this, s, s);
              return;
            }
            e(n, t);
          }),
            new MutationObserver((n) => {
              n.forEach((t) => {
                t.type === "childList" &&
                  t.addedNodes.length &&
                  t.addedNodes.forEach((s) => {
                    if (s?.hasAttribute?.("css") && !s.styled) {
                      let c = s[a]("css"),
                        l = JSON.parse(s[a]("css").replaceAll("`", '"'));
                      y(s, l, c), s.removeAttribute("css");
                    }
                  });
              });
            }).observe(document.documentElement, {
              subtree: !0,
              childList: !0,
            });
        }
      })();
    </script>
  </head>
  <body>
    <div
      css="{`width`:`100px`,`height`:`100px`,`background`:`red`, `@media(max-width:500px)`:{`background`:`green`}}"
    ></div>
  </body>
</html>