fix: vercel api custom function

api/brew.ts

@@ -1,3 +1,4 @@
+#!/usr/bin/env DENO_DIR=/tmp deno run
 // Imports
 import { bundle } from "jsr:@libs/[email protected]/css"
 import { banner as _banner } from "../app/build/css.ts"
@@ -11,9 +12,12 @@ export default async function (request: Request) {
   if (new URL(`https://${request.headers.get("Host")}`).hostname !== new URL(`https://${Deno.env.get("VERCEL_URL") || "localhost"}`).hostname) {
     return new Response(STATUS_TEXT[STATUS_CODE.Forbidden], { status: STATUS_CODE.Forbidden })
   }
-  const body = await request.text()
-  const banner = _banner.replace("matcha.css\n", `matcha.css — Custom build (${new Date().toDateString()})\n`)
-
-  const bundled = await bundle(body, { minify: true, banner, rules: { "no-descending-specificity": false, "no-duplicate-selectors": false } })
-  return new Response(bundled, { headers: { "Content-Type": "text/css" } })
+  try {
+    const body = await request.text()
+    const banner = _banner.replace("matcha.css\n", `matcha.css — Custom build (${new Date().toDateString()})\n`)
+    const bundled = await bundle(body, { minify: true, banner, rules: { "no-descending-specificity": false, "no-duplicate-selectors": false } })
+    return new Response(bundled, { headers: { "Content-Type": "text/css" } })
+  } catch (error) {
+    return new Response(error.message, { status: STATUS_CODE.InternalServerError })
+  }
 }

app/sections/custom-build.html

@@ -261,11 +261,17 @@ <h4 id="custom-build"><a href="#custom-build">🛠️ Get a custom build</a></h4
           const light = teapot.variables.filter(({mode}) => mode === "light").map(({name, value}) => `${name}: ${value};`).join("\n")
           const dark = teapot.variables.filter(({mode}) => mode === "dark").map(({name, value}) => `${name}: ${value};`).join("\n")
           stylesheet += "/* Variables */"
-          stylesheet += `:root,[data-color-scheme="light"] {\n${light}\n}\n`
-          stylesheet += `[data-color-scheme="dark"] {\n${dark}\n}\n`
-          stylesheet += `@media (prefers-color-scheme: dark) {\n  :root:not([data-color-scheme="light"]) {\n${dark.split("\n").map(line => `  ${line}`).join("\n")}\n  }\n}\n`
+          if (light.trim().length) {
+            stylesheet += `:root,[data-color-scheme="light"] {\n${light}\n}\n`
+          }
+          if (dark.trim().length) {
+            stylesheet += `[data-color-scheme="dark"] {\n${dark}\n}\n`
+            stylesheet += `@media (prefers-color-scheme: dark) {\n  :root:not([data-color-scheme="light"]) {\n${dark.split("\n").map(line => `  ${line}`).join("\n")}\n  }\n}\n`
+          }
         }
         try {
+          brewing.toggleAttribute("disabled", true)
+          brewing.style.cursor = "loading"
           const response = await fetch("/api/brew", {method:"POST", body:stylesheet})
           if (response.status !== 200) {
             throw new Error(await response.text())
@@ -278,6 +284,10 @@ <h4 id="custom-build"><a href="#custom-build">🛠️ Get a custom build</a></h4
           document.querySelector(".brewing-error").innerText = error.message
           setTimeout(() => document.querySelector(".brewing-error").classList.add("hidden"), 15*1000)
         }
+        finally {
+          brewing.toggleAttribute("disabled", false)
+          brewing.style.removeProperty("cursor")
+        }
       })
       form.dispatchEvent(new Event("change"))
     }

deno.jsonc

@@ -8,8 +8,8 @@
     "fmt:check": "deno task fmt:ts:check && deno task fmt:css:check",
     "fmt:ts": "deno fmt",
     "fmt:ts:check": "deno fmt --check",
-    "fmt:css": "deno run --allow-read --allow-env --allow-sys --allow-write=styles https://deno.land/x/libs/bundle/css/fmt.ts styles/**/*.css",
-    "fmt:css:check": "deno run --allow-read --allow-env --allow-sys --allow-write=styles https://deno.land/x/libs/bundle/css/fmt.ts --check styles/**/*.css"
+    "fmt:css": "deno run --allow-read --allow-env --allow-sys --allow-write=styles jsr:@libs/bundle/css/fmt styles/**/*.css",
+    "fmt:css:check": "deno run --allow-read --allow-env --allow-sys --allow-write=styles jsr:@libs/bundle/css/fmt --check styles/**/*.css"
   },
   "fmt": {
     "semiColons": false,