Merge pull request #3 from Mafrans/fix/fix-css-imports

Hotfix: Tailwind is not included in production builds
Mafrans · Apr 6, 2022 · f445e49 · f445e49
2 parents f52ba21 + fd77a6d
commit f445e49
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 10 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
-yarn-error.log
+yarn-error.log
+dist
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./src/styles/main.css" />
     <title>Document</title>
   </head>
   <body>

diff --git a/src/pages/IndexPage.ts b/src/pages/IndexPage.ts
@@ -4,7 +4,6 @@ import { html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
 
 import "../components/HelloWorld";
-import "../styles/main.css";
 import { TW } from "../util/TailwindMixin";
 
 @customElement("x-index-page")

diff --git a/src/util/TailwindMixin.ts b/src/util/TailwindMixin.ts
@@ -3,11 +3,8 @@ export const TW = <T extends LitMixin>(superClass: T): T =>
     connectedCallback() {
       super.connectedCallback();
 
-      const link = document.createElement("link");
-      link.rel = "stylesheet";
-      link.type = "text/css";
-      link.href = new URL("../styles/main.css", import.meta.url).href;
-
-      this.shadowRoot.append(link);
+      document.head.querySelectorAll("link[rel='stylesheet']").forEach((link) => {
+        this.shadowRoot.append(link.cloneNode());
+      });
     }
   };
diff --git a/vite.config.js b/vite.config.js
@@ -1,4 +1,3 @@
 import { defineConfig } from 'vite';
 
-defineConfig({
-});
+export default defineConfig({});