Feature/Add proper stylesheet imports

package.json

@@ -15,7 +15,7 @@
     "eslint-config-galex": "^3.6.3",
     "tailwindcss": "^3.0.18",
     "typescript": "^4.5.5",
-    "vite": "^2.7.13"
+    "vite": "^3.0.9"
   },
   "dependencies": {
     "@adobe/lit-mobx": "^2.0.0",

src/@types/vite.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

src/util/TailwindMixin.ts

@@ -1,10 +1,33 @@
+import css from "../styles/main.css?inline";
+
+const supportsAdoptedCSS = Array.isArray(document.adoptedStyleSheets);
+
 export const TW = <T extends LitMixin>(superClass: T): T =>
-  class extends superClass {
-    connectedCallback() {
-      super.connectedCallback();
+  class Mixin extends superClass {
+    static styleElement: HTMLStyleElement;
+
+    static stylesheet: CSSStyleSheet;
+
+    // Disable no-explicit-any because Mixin constructor parameters must have an any[] type
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    constructor(...args: any[]) {
+      super(...args);
+      void this.createStylesheet();
+    }
 
-      document.head.querySelectorAll("link[rel='stylesheet']").forEach((link) => {
-        this.shadowRoot.append(link.cloneNode());
-      });
+    async createStylesheet() {
+      if (supportsAdoptedCSS) {
+        if (!Mixin.stylesheet) {
+          Mixin.stylesheet = new CSSStyleSheet();
+          await Mixin.stylesheet.replace(css);
+        }
+        this.shadowRoot.adoptedStyleSheets.push(Mixin.stylesheet);
+      } else {
+        if (!Mixin.styleElement) {
+          Mixin.styleElement = document.createElement("style");
+          Mixin.styleElement.textContent = css;
+        }
+        this.shadowRoot.append(Mixin.styleElement.cloneNode());
+      }
     }
   };