From 6f9a75a93b4e306c0a92fa038b692b97a7cda1e1 Mon Sep 17 00:00:00 2001
From: Sunil Pai <threepointone@gmail.com>
Date: Thu, 14 Dec 2023 11:49:15 +0000
Subject: [PATCH 1/2] how to use css modules

---
 partykit.json          |  3 +++
 public/cursors.css     |  5 +++++
 public/cursors.css.map |  7 +++++++
 src/cursors.tsx        | 13 +++++++++++++
 src/styles.module.css  |  3 +++
 5 files changed, 31 insertions(+)
 create mode 100644 public/cursors.css
 create mode 100644 public/cursors.css.map
 create mode 100644 src/styles.module.css

diff --git a/partykit.json b/partykit.json
index 0781888..8a0a177 100644
--- a/partykit.json
+++ b/partykit.json
@@ -10,6 +10,9 @@
         "react": "@preact/compat",
         "react-dom": "@preact/compat"
       },
+      "loaders": {
+        ".module.css": "local-css"
+      },
       "outdir": "public",
       "format": "iife",
       "splitting": false
diff --git a/public/cursors.css b/public/cursors.css
new file mode 100644
index 0000000..5c39168
--- /dev/null
+++ b/public/cursors.css
@@ -0,0 +1,5 @@
+/* src/styles.module.css */
+.styles_x {
+  border: 1px solid red;
+}
+/*# sourceMappingURL=cursors.css.map */
diff --git a/public/cursors.css.map b/public/cursors.css.map
new file mode 100644
index 0000000..a937387
--- /dev/null
+++ b/public/cursors.css.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/styles.module.css"],
+  "sourcesContent": [".x {\n  border: 1px solid red;\n}\n"],
+  "mappings": ";AAAA,CAACA;AACC,UAAQ,IAAI,MAAM;AACpB;",
+  "names": ["x"]
+}
diff --git a/src/cursors.tsx b/src/cursors.tsx
index 18bcfa4..a8e99ac 100644
--- a/src/cursors.tsx
+++ b/src/cursors.tsx
@@ -3,6 +3,19 @@ import { render } from "react-dom";
 import PresenceProvider from "./presence/presence-context";
 import Cursors from "./presence/Cursors";
 
+// @ts-ignore
+import classes from "./styles.module.css";
+
+// declare everything imported from *.module.css to be strings
+
+// // This doesn't appear to work right now, hence the @ts-ignore up there
+// declare module "*.module.css" {
+//   const classes: { [key: string]: string };
+//   export default classes;
+// }
+
+console.log(classes);
+
 declare const PARTYKIT_HOST: string;
 
 const pageId = window?.location.href
diff --git a/src/styles.module.css b/src/styles.module.css
new file mode 100644
index 0000000..16186a0
--- /dev/null
+++ b/src/styles.module.css
@@ -0,0 +1,3 @@
+.x {
+  border: 1px solid red;
+}

From ff3ee73933c8800bba317408e7e23be387912531 Mon Sep 17 00:00:00 2001
From: Matt Webb <matt@interconnected.org>
Date: Thu, 14 Dec 2023 12:36:58 +0000
Subject: [PATCH 2/2] Test CSS modules

---
 src/cursors.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/cursors.tsx b/src/cursors.tsx
index a8e99ac..bf616dd 100644
--- a/src/cursors.tsx
+++ b/src/cursors.tsx
@@ -32,6 +32,7 @@ function App() {
         color: "#0000f0",
       }}
     >
+      <div className={classes.x}>Test CSS modules (should have red border)</div>
       <Cursors />
     </PresenceProvider>
   );