diff --git a/server/embed/x.ts b/server/embed/x.ts
index ed0b1cbc5..b44fb5273 100644
--- a/server/embed/x.ts
+++ b/server/embed/x.ts
@@ -1,23 +1,22 @@
 /*!
  * ⚡️ esm.sh/x - ts/jsx/vue/svelte just works™️ in browser.
- * Usage: <script src="app.tsx"> → <script src="https://esm.sh/x" href="app.tsx">
+ * Usage: <script type="module" src="app.tsx"> → <script src="https://esm.sh/x" href="app.tsx">
  */
 
 ((document, location) => {
-  const { hostname } = location;
   const currentScript = document.currentScript as HTMLScriptElement | null;
   const $: typeof document.querySelector = (s: string) => document.querySelector(s);
-  if (hostname == "localhost" || hostname == "127.0.0.1" || /^192\.168\.\d+\.\d+$/.test(hostname)) {
+  if (location.protocol == "file:" || ["localhost", "127.0.0.1"].includes(location.hostname)) {
     console.error("[esm.sh/x] Please start your app with `npx esm.sh serve` in development env.");
     return;
   }
   let main = currentScript?.getAttribute("href");
   if (main) {
     const mainUrl = new URL(main, location.href);
-    const { searchParams, pathname } = mainUrl;
     const ctx = btoa(location.pathname).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
     const v = $<HTMLMetaElement>("meta[name=version]")?.content;
-    if (pathname == "/uno.css") {
+    const { searchParams, pathname } = mainUrl;
+    if (pathname.endsWith("/uno.css")) {
       searchParams.set("ctx", ctx);
     } else if ($("script[type=importmap]")) {
       searchParams.set("im", ctx);
@@ -27,7 +26,7 @@
     }
     main = new URL(currentScript!.src).origin + "/" + mainUrl;
     if (pathname.endsWith(".css")) {
-      document.write(`<link rel="stylesheet" href="${main}">`);
+      currentScript!.insertAdjacentHTML("afterend", `<link rel="stylesheet" href="${main}">`);
     } else {
       import(main);
     }