more experiment

aeharding · Nov 15, 2024 · e4b323c · e4b323c
1 parent 700f935
commit e4b323c
Show file tree

Hide file tree

Showing 8 changed files with 526 additions and 91 deletions.
diff --git a/package.json b/package.json
@@ -154,6 +154,7 @@
     "release-it": "^17.10.0",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.13.0",
+    "typescript-plugin-css-modules": "^5.1.0",
     "vite": "^5.4.10",
     "vite-css-modules": "^1.5.2",
     "vite-plugin-pwa": "^0.20.5",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/features/post/new/PhotoPreview.tsx b/src/features/post/new/PhotoPreview.tsx
@@ -1,18 +1,14 @@
 import { IonSpinner } from "@ionic/react";
+import { cx } from "@linaria/core";
 import { styled } from "@linaria/react";
 
+import styles from "./photoPreview.module.css";
+
 const Container = styled.div`
   position: relative;
 `;
 
-const Img = styled.img<{ loadingImage: boolean }>`
-  max-width: 100px;
-  max-height: 100px;
-  padding: 1rem;
-
-  filter: ${({ loadingImage }) =>
-    loadingImage ? "blur(5px) brightness(0.5)" : "none"};
-`;
+const Img = styled.img<{ loadingImage: boolean }>``;
 
 const OverlaySpinner = styled(IonSpinner)`
   position: absolute;
@@ -34,7 +30,12 @@ export default function PhotoPreview({
 }: PhotoPreviewProps) {
   return (
     <Container>
-      <Img src={src} onClick={onClick} loadingImage={loading} />
+      <Img
+        src={src}
+        onClick={onClick}
+        loadingImage={loading}
+        className={cx(styles.img, loading && styles.loadingImage)}
+      />
       {loading && <OverlaySpinner />}
     </Container>
   );

diff --git a/src/features/post/new/PostEditorRoot.tsx b/src/features/post/new/PostEditorRoot.tsx
@@ -47,47 +47,7 @@ import { receivedPosts } from "../postSlice";
 import NewPostText from "./NewPostText";
 import PhotoPreview from "./PhotoPreview";
 import { PostEditorProps } from "./PostEditor";
-
-const Container = styled.div`
-  position: absolute;
-  inset: 0;
-
-  display: flex;
-  flex-direction: column;
-`;
-
-const IonInputTitle = styled(IonInput)`
-  .input-bottom {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 0;
-    border: 0;
-    padding-top: 0;
-  }
-
-  .native-wrapper {
-    margin-right: 2rem;
-  }
-`;
-
-const PostingIn = styled.div`
-  font-size: 0.875em;
-  margin: 0.5rem 0;
-  text-align: center;
-  color: var(--ion-color-medium);
-`;
-
-const CameraIcon = styled(IonIcon)`
-  margin: -0.2em 0; // TODO negative margin, bad alex
-  font-size: 1.5em;
-
-  margin-right: 0.5rem;
-`;
-
-const HiddenInput = styled.input`
-  display: none;
-`;
+import styles from "./postEditorRoot.module.css";
 
 type PostType = "photo" | "link" | "text";
 
@@ -441,10 +401,11 @@ export default function PostEditorRoot({
         </IonToolbar>
       </AppHeader>
       <IonContent>
-        <Container>
+        <div className={styles.container}>
           <IonList>
             <IonItem>
-              <IonInputTitle
+              <IonInput
+                className={styles.ionInputTitle}
                 value={title}
                 clearInput
                 onIonInput={(e) => setTitle(e.detail.value ?? "")}
@@ -476,13 +437,18 @@ export default function PostEditorRoot({
                 <label htmlFor="photo-upload-post">
                   <IonItem>
                     <IonLabel color="primary">
-                      <CameraIcon icon={cameraOutline} /> Choose Photo
+                      <IonIcon
+                        className={styles.cameraIcon}
+                        icon={cameraOutline}
+                      />{" "}
+                      Choose Photo
                     </IonLabel>
 
-                    <HiddenInput
+                    <input
                       type="file"
                       accept="image/*"
                       id="photo-upload-post"
+                      className={styles.hiddenInput}
                       onInput={(e) => {
                         const image = (e.target as HTMLInputElement).files?.[0];
                         if (!image) return;
@@ -555,8 +521,10 @@ export default function PostEditorRoot({
             </IonNavLink>
           </IonList>
 
-          <PostingIn>Posting in {getRemoteHandle(community)}</PostingIn>
-        </Container>
+          <div className={styles.postingIn}>
+            Posting in {getRemoteHandle(community)}
+          </div>
+        </div>
       </IonContent>
     </>
   );

diff --git a/src/features/post/new/photoPreview.module.css b/src/features/post/new/photoPreview.module.css
@@ -0,0 +1,13 @@
+.container {
+  position: relative;
+}
+
+.img {
+  max-width: 100px;
+  max-height: 100px;
+  padding: 1rem;
+
+  &.loadingImage {
+    filter: blur(5px) brightness(0.5);
+  }
+}
diff --git a/src/features/post/new/postEditorRoot.module.css b/src/features/post/new/postEditorRoot.module.css
@@ -0,0 +1,40 @@
+.container {
+  position: absolute;
+  inset: 0;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.ionInputTitle {
+  :global(.input-bottom) {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 0;
+    border: 0;
+    padding-top: 0;
+  }
+
+  :global(.native-wrapper) {
+    margin-right: 2rem;
+  }
+}
+
+.postingIn {
+  font-size: 0.875em;
+  margin: 0.5rem 0;
+  text-align: center;
+  color: var(--ion-color-medium);
+}
+
+.cameraIcon {
+  margin: -0.2em 0; /* TODO negative margin, bad alex */
+  font-size: 1.5em;
+
+  margin-right: 0.5rem;
+}
+
+.hiddenInput {
+  display: none;
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -17,6 +17,8 @@
 
     "jsx": "react-jsx",
 
+    "plugins": [{ "name": "typescript-plugin-css-modules" }],
+
     "paths": {
       // duplicate of package.json[imports]
       // typescript doesn't support this same syntax in package.json with

diff --git a/vite.config.ts b/vite.config.ts
@@ -73,6 +73,7 @@ export default defineConfig({
   // break. This breaks iOS transitions.
   // Put everything into one chunk for now.
   build: {
+    cssMinify: "lightningcss",
     chunkSizeWarningLimit: 5_000,
     rollupOptions: {
       onwarn: (log, handler) => {