chore: debugging css builds

build/esbuild-build.ts

@@ -1,10 +1,10 @@
 import { execSync } from "child_process";
 import { config } from "dotenv";
 import esbuild from "esbuild";
+import { yamlPlugin } from "esbuild-plugin-yaml";
 import { access, mkdir } from "fs/promises";
 import { join } from "path";
-import { invertColors } from "./plugins/invert-colors.js";
-import { yamlPlugin } from "esbuild-plugin-yaml";
+import { invertColors } from "./plugins/invert-colors";
 
 // Ensure output directory exists
 const outDir = join("static/dist");
@@ -18,21 +18,13 @@ async function ensureOutDir() {
   }
 }
 
-// import { pwaManifest } from "./plugins/pwa-manifest";
+import { pwaManifest } from "./plugins/pwa-manifest";
 const typescriptEntries = ["static/scripts/onboarding/onboarding.ts"];
 const cssEntries = ["static/style/style.css", "static/style/special.css"];
 export const entries = [...typescriptEntries, ...cssEntries];
 
 export const esBuildContext: esbuild.BuildOptions = {
-  // logLevel: "debug",
-  // metafile: true,
-  // write: true,
-  // allowOverwrite: true,
-  plugins: [
-    invertColors,
-    // pwaManifest
-  ],
-
+  plugins: [invertColors, pwaManifest, yamlPlugin({})],
   sourcemap: true,
   entryPoints: entries,
   bundle: true,
@@ -47,17 +39,12 @@ export const esBuildContext: esbuild.BuildOptions = {
   },
   outdir: outDir,
   outbase: "static",
-  // publicPath: "/out/",
   absWorkingDir: process.cwd(),
   define: createEnvDefines(["SUPABASE_URL", "SUPABASE_ANON_KEY", "FRONTEND_URL"], {
     commitHash: execSync(`git rev-parse --short HEAD`).toString().trim(),
   }),
-  plugins: [yamlPlugin({})],
 };
 
-console.log("Building to:", outDir);
-console.log("Entry points:", entries);
-
 async function build() {
   // Create output directory before building
   await ensureOutDir();

build/plugins/pwa-manifest.ts

@@ -3,7 +3,7 @@ import fs from "fs";
 import path from "path";
 import manifest from "../../static/manifest.json";
 
-const DIST = `../../static/out`;
+const DIST = `../../static/dist`;
 
 export const pwaManifest: esbuild.Plugin = {
   name: "pwa-manifest",

package.json

@@ -38,6 +38,7 @@
     "@types/libsodium-wrappers": "^0.7.13",
     "@uniswap/permit2-sdk": "^1.2.0",
     "dotenv": "^16.4.4",
+    "esbuild-plugin-yaml": "^0.0.1",
     "ethers": "^5.7.2",
     "libsodium-wrappers": "^0.7.13",
     "yaml": "^2.3.4"
@@ -56,7 +57,6 @@
     "cspell": "^8.4.0",
     "cypress": "13.6.6",
     "esbuild": "^0.24.2",
-    "esbuild-plugin-yaml": "^0.0.1",
     "esbuild-yaml": "^1.3.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",

static/style/inverted-special.css

@@ -46,7 +46,7 @@
     box-shadow: inset 0 0 24px #ffffff08;
   }
   #background {
-    /* background-color: var(--light-background); */
+    background-color: var(--light-background);
   }
   #grid {
     /* opacity: 0.25; */

static/style/inverted-style.css

@@ -80,7 +80,6 @@
     font-family: "Proxima Nova", "Ubiquity Nova", sans-serif;
     color: #000000;
     font-weight: 500;
-    /* box-sizing: border-box; */
   }
   @font-face {
     font-family: "Ubiquity Nova";
@@ -235,7 +234,6 @@
     text-align: center;
     white-space: nowrap;
     background-color: #7f7f7f20;
-    /* width: 64px; */
     letter-spacing: 0.5px;
     flex-grow: 4;
     justify-content: center;
@@ -357,6 +355,7 @@
     border-bottom: 1px solid #7f7f7f20;
     -webkit-backdrop-filter: blur(8px);
     align-items: center;
+    font-size: 12px;
   }
   #authentication {
     position: absolute;
@@ -943,7 +942,7 @@ input {
   padding: 8px 16px;
 }
 #user-access {
-  width: 100%;
+  width: calc(200% / 3);
   padding: 16px;
 }
 
@@ -954,13 +953,30 @@ input {
 #user-access > div {
   /* display: block; */
 }
+textarea:disabled {
+  background-color: transparent;
+  pointer-events: none;
+}
+
 textarea {
-  vertical-align: middle;
-  width: 100%;
   border: none;
   font-family: monospace;
   font-size: 12px;
+  position: absolute;
+  vertical-align: middle;
+  width: 100%;
+  top: 0;
+  pointer-events: initial !important;
 }
-textarea:disabled {
-  background-color: transparent;
+body,
+html {
+  height: 100vh;
+}
+
+label:not([for="view-toggle"]) {
+  vertical-align: middle;
+  padding: 8px 16px;
+}
+button {
+  padding: 8px 16px;
 }

static/style/special.css

@@ -46,7 +46,7 @@
     box-shadow: inset 0 0 24px #00000008;
   }
   #background {
-    /* background-color: var(--light-background); */
+    background-color: var(--light-background);
   }
   #grid {
     /* opacity: 0.25; */

static/style/style.css

@@ -75,13 +75,11 @@
     padding: 0;
     -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
-    height: 100vh;
   }
   * {
     font-family: "Proxima Nova", "Ubiquity Nova", sans-serif;
     color: #fff;
     font-weight: 500;
-    /* box-sizing: border-box; */
   }
   @font-face {
     font-family: "Ubiquity Nova";
@@ -236,7 +234,6 @@
     text-align: center;
     white-space: nowrap;
     background-color: #80808020;
-    /* width: 64px; */
     letter-spacing: 0.5px;
     flex-grow: 4;
     justify-content: center;
@@ -971,3 +968,15 @@ textarea {
   top: 0;
   pointer-events: initial !important;
 }
+body,
+html {
+  height: 100vh;
+}
+
+label:not([for="view-toggle"]) {
+  vertical-align: middle;
+  padding: 8px 16px;
+}
+button {
+  padding: 8px 16px;
+}

tsconfig.json

@@ -39,7 +39,7 @@
     // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
     // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
     // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
-    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    "resolveJsonModule": true,                        /* Enable importing .json files. */
     // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */