From be1ba5afb33f273c92c3043fbfe431280e098045 Mon Sep 17 00:00:00 2001
From: Zoltan Erdos <zoltan.erdos@me.com>
Date: Sun, 29 Sep 2024 15:48:49 +0100
Subject: [PATCH] push

---
 packages/code/src/@/lib/shared.ts             | 11 ---
 .../code/src/@/workers/ata-worker.worker.ts   |  2 -
 packages/code/src/ws.ts                       | 70 +++++++++++--------
 3 files changed, 39 insertions(+), 44 deletions(-)

diff --git a/packages/code/src/@/lib/shared.ts b/packages/code/src/@/lib/shared.ts
index f71b0d7b3a..9827370723 100644
--- a/packages/code/src/@/lib/shared.ts
+++ b/packages/code/src/@/lib/shared.ts
@@ -141,17 +141,6 @@ export const ata = async ({
   }
 };
 
-export const generateCSS = async (
-  classNames: string[],
-): Promise<string> => {
-  const worker = workerPool.getWorker("generateCSS");
-  try {
-    return await worker.rpc.rpc("generateCSS", classNames);
-  } finally {
-    workerPool.releaseWorker(worker);
-  }
-};
-
 export const prettierCss = async (code: string): Promise<string> => {
   const worker = workerPool.getWorker("prettier");
   try {
diff --git a/packages/code/src/@/workers/ata-worker.worker.ts b/packages/code/src/@/workers/ata-worker.worker.ts
index 3f441366c1..9f70a6ed81 100644
--- a/packages/code/src/@/workers/ata-worker.worker.ts
+++ b/packages/code/src/@/workers/ata-worker.worker.ts
@@ -12,7 +12,6 @@ type WorkerFunctions = {
   tsx: (code: string) => Promise<string[]>;
   updateSearchReplace: (instructions: string, code: string) => Promise<string>;
   setConnections: (signal: string, sess: ICodeSession) => void;
-  generateCSS: (classNames: string[]) => Promise<string>;
 };
 
 const self: SharedWorkerGlobalScope & { onconnect?: (e: MessageEvent) => void } & WorkerFunctions =
@@ -39,7 +38,6 @@ const workerFiles: Record<keyof WorkerFunctions, string[]> = {
   updateSearchReplace: ["chat-utils"],
   build: ["transpile"],
   tsx: ["dts"],
-  generateCSS: ["css"],
   setConnections: ["socket"],
 };
 
diff --git a/packages/code/src/ws.ts b/packages/code/src/ws.ts
index 9f68acb613..063af87ad8 100644
--- a/packages/code/src/ws.ts
+++ b/packages/code/src/ws.ts
@@ -9,7 +9,7 @@ import { Code } from "./services/CodeSession";
 import { md5 } from "@/lib/md5";
 import { processImage } from "@/lib/process-image";
 import { renderApp } from "@/lib/render-app";
-import { generateCSS, prettierCss } from "@/lib/shared";
+import { prettierCss } from "@/lib/shared";
 import { wait } from "@/lib/wait";
 import { throttle } from "es-toolkit";
 import { renderPreviewWindow } from "./renderPreviewWindow";
@@ -248,28 +248,28 @@ const handleDehydratedPage = () => {
   }
 };
 
-// function getClassNamesFromHTML(htmlString: string) {
-//   const classNames = new Set<string>();
-//   const tempDiv = document.createElement("div");
-//   tempDiv.innerHTML = htmlString;
-//   const elements = tempDiv.getElementsByTagName("*");
-//   for (let el of elements) {
-//     let className = "";
-//     if (typeof el.className === "string") {
-//       className = el.className;
-//     } else if (typeof el.className === "object" && "baseVal" in el.className) {
-//       // Handle SVGAnimatedString
-//       className = (el.className as SVGAnimatedString).baseVal;
-//     }
-//     if (className) {
-//       className
-//         .trim()
-//         .split(/\s+/)
-//         .forEach((cls) => classNames.add(cls));
-//     }
-//   }
-//   return Array.from(classNames);
-// }
+function getClassNamesFromHTML(htmlString: string) {
+  const classNames = new Set<string>();
+  const tempDiv = document.createElement("div");
+  tempDiv.innerHTML = htmlString;
+  const elements = tempDiv.getElementsByTagName("*");
+  for (let el of elements) {
+    let className = "";
+    if (typeof el.className === "string") {
+      className = el.className;
+    } else if (typeof el.className === "object" && "baseVal" in el.className) {
+      // Handle SVGAnimatedString
+      className = (el.className as SVGAnimatedString).baseVal;
+    }
+    if (className) {
+      className
+        .trim()
+        .split(/\s+/)
+        .forEach((cls) => classNames.add(cls));
+    }
+  }
+  return Array.from(classNames);
+}
 
 const handleRender = async (
   rootEl: HTMLDivElement,
@@ -284,7 +284,6 @@ const handleRender = async (
 
     const html = rootEl.innerHTML;
     // const classNames = getClassNamesFromHTML(html);
-    // const twCss = await generateCSS(classNames);
 
     if (!html) return false;
     for (let attempts = 5; attempts > 0; attempts--) {
@@ -300,19 +299,28 @@ const handleRender = async (
           .filter(Boolean) as string[],
       );
 
-      // const styleElement = document.querySelector("head > style:last-child");
-      // const tailWindClasses = styleElement
-      //   ? Array.from((styleElement as HTMLStyleElement).sheet!.cssRules).map(
-      //     (x) => x.cssText,
-      //   )
-      //   : [];
+      const styleElement = document.querySelector("head > style:last-child");
+      const tailWindClasses = styleElement
+        ? Array.from((styleElement as HTMLStyleElement).sheet!.cssRules).map(
+          (x) => x.cssText,
+        )
+        : [];
 
       const eCss = css
         .filter((line) => Array.from(criticalClasses).some((rule) => rule ? line.includes(rule) : false))
         .map((x) => x.trim())
         .filter(Boolean);
 
-      let cssStrings = [...eCss, ...twCss].sort().join("\n");
+      const htmlClasses = getClassNamesFromHTML(html);
+      let cssStrings = [...eCss, ...tailWindClasses].sort().filter(x => {
+        // we have all the classnames from the html, filering out those css rules that are not used
+        // in the html
+
+        const rule = x.slice(1, x.indexOf("{")).trim();
+
+        return htmlClasses.includes(rule);
+      }).join("\n");
+
       try {
         cssStrings = cssStrings ? await prettierCss(cssStrings) : "";
       } catch (error) {