🎨 Update TWMixin

.eslintrc

@@ -1,3 +1,6 @@
 {
-  "extends": "galex"
+  "extends": "galex",
+  "rules": {
+    "@typescript-eslint/explicit-member-accessibility": "off"
+  }
 }

package.json

@@ -7,11 +7,12 @@
     "dev": "vite dev",
     "start": "vite --host",
     "build": "vite build",
-    "lint": "eslint src"
+    "lint": "eslint src --fix"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.2",
     "eslint": "^8.8.0",
+    "eslint-config-galex": "^3.6.3",
     "tailwindcss": "^3.0.18",
     "typescript": "^4.5.5",
     "vite": "^2.7.13"

src/@types/Mixin.d.ts

@@ -1,5 +1,6 @@
-import { LitElement } from "lit";
+import type { LitElement } from "lit";
 
 declare global {
-  export type LitMixin<T = {}> = new (...args: any[]) => T & LitElement;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  export type LitMixin<T = unknown> = new (...args: any[]) => T & LitElement;
 }

src/components/HelloWorld.ts

@@ -1,10 +1,12 @@
+import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
-import { TW } from "../util/TWMixin";
+
+import { TW } from "../util/TailwindMixin";
 
 @customElement("x-hello-world")
 export class HelloWorld extends TW(LitElement) {
-  render() {
+  render(): TemplateResult {
     return html` <h1 class="text-2xl">Hello world!</h1> `;
   }
 }

src/pages/IndexPage.ts

@@ -1,13 +1,15 @@
 // Components
+import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
+
 import "../components/HelloWorld";
 import "../styles/main.css";
-import { TW } from "../util/TWMixin";
+import { TW } from "../util/TailwindMixin";
 
 @customElement("x-index-page")
 export class IndexPage extends TW(LitElement) {
-  render() {
+  render(): TemplateResult {
     return html`
       <div class="container">
         <x-hello-world></x-hello-world>

src/util/TWMixin.ts → src/util/TailwindMixin.ts

@@ -1,4 +1,4 @@
-export const TW = <T extends LitMixin>(superClass: T) =>
+export const TW = <T extends LitMixin>(superClass: T): T =>
   class extends superClass {
     connectedCallback() {
       super.connectedCallback();
@@ -8,6 +8,6 @@ export const TW = <T extends LitMixin>(superClass: T) =>
       link.type = "text/css";
       link.href = new URL("../styles/main.css", import.meta.url).href;
 
-      this.shadowRoot.appendChild(link);
+      this.shadowRoot.append(link);
     }
   };