DO NOT MERGE how to use css modules

partykit.json

@@ -10,6 +10,9 @@
         "react": "@preact/compat",
         "react-dom": "@preact/compat"
       },
+      "loaders": {
+        ".module.css": "local-css"
+      },
       "outdir": "public",
       "format": "iife",
       "splitting": false

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
@@ -19,6 +32,7 @@ function App() {
         color: "#0000f0",
       }}
     >
+      <div className={classes.x}>Test CSS modules (should have red border)</div>
       <Cursors />
     </PresenceProvider>
   );

src/styles.module.css

@@ -0,0 +1,3 @@
+.x {
+  border: 1px solid red;
+}