extract styles

Author: nstfkc

bun.lockb

@@ -1,8 +1,9 @@
+import { Serve } from "bun";
 import { join } from "path";
+
 import type { App } from "../app/App";
-import { createStyles } from "./styles";
+import { createDevStyles } from "./styles";
 import { renderErrorPage } from "./renderErrorPage";
-import { Serve } from "bun";
 
 const rootDir = process.cwd();
 const appDir = join(rootDir, "app");
@@ -126,18 +127,10 @@ export async function startDevServer() {
             }
 
             const loaders = `{${templates.join(",")}}`;
-            const { default: css } = await vite.ssrLoadModule(
-              `${appDir}/app.css`,
-            );
-
-            const styles = [];
-            styles.push({
-              isDev: true,
-              id: `${appDir}/app.css`,
-              content: css,
-            });
+
             return await result({
-              getStyles: () => createStyles(styles),
+              getStyles: async (currentViews: string[]) =>
+                await createDevStyles(appDir, vite, currentViews),
               bootstrapModules: [
                 "/refresh.js",
                 "/app/client.tsx",

packages/gemi/server/dev.ts

@@ -1,17 +1,90 @@
-export function createStyles(styles) {
-  return styles.map((style, i) => {
-    if (style.isDev) {
-      return (
-        <style key={style.id} type="text/css" data-vite-dev-id={style.id}>
-          {style.content}
-        </style>
-      );
-    } else {
-      return (
-        <style key={i} id={style?.id} type="text/css">
-          {style.content}
-        </style>
+import { ModuleNode, type ViteDevServer } from "vite";
+
+function replaceStrings(text: string, record: Record<string, string>): string {
+  const escapedKeys = Object.keys(record)
+    .sort((a, b) => b.length - a.length)
+    .map((key) => key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+
+  // Create a single regex with all keys
+  const regex = new RegExp(escapedKeys.join("|"), "g");
+
+  return text.replace(regex, (match) => record[match]);
+}
+
+export async function createDevStyles(
+  appDir: string,
+  vite: ViteDevServer,
+  currentViews: string[],
+) {
+  const views = [
+    ...currentViews.map((view) => `${appDir}/views/${view}.tsx`),
+    `${appDir}/views/RootLayout.tsx`,
+  ];
+
+  let modules = new Set<ModuleNode>();
+  for (const view of views) {
+    const mod = vite.moduleGraph.getModulesByFile(view);
+    if (mod) {
+      modules = modules.union(mod);
+    }
+  }
+
+  const styles = [];
+  const cssModules = [];
+  const cssModuleContent: Record<string, string> = {};
+  for (const mod of modules as any) {
+    if (mod) {
+      for (const imported of mod.importedModules) {
+        if (imported.file.includes("module.css")) {
+          cssModuleContent[imported.file] =
+            imported.ssrTransformResult.map.sourcesContent.join("");
+        }
+        if (imported.file.includes(".css")) {
+          console.log(imported.file);
+          cssModules.push(imported.file);
+        }
+      }
+    }
+  }
+
+  for (const cssModulePath of cssModules) {
+    const transform = await vite.ssrLoadModule(cssModulePath, {
+      fixStacktrace: true,
+    });
+
+    const isCssModule = cssModulePath.includes("module.css");
+
+    let transformedCssModule = "";
+
+    if (isCssModule) {
+      transformedCssModule = replaceStrings(
+        cssModuleContent[cssModulePath],
+        transform.default,
       );
     }
+
+    styles.push({
+      isDev: true,
+      id: cssModulePath,
+      content: isCssModule ? transformedCssModule : transform.default,
+    });
+  }
+
+  return styles.map((style, i) => {
+    return (
+      <style key={i} type="text/css" data-vite-dev-id={style.id}>
+        {style.content}
+      </style>
+    );
+  });
+}
+
+export async function createStyles(styles = []) {
+  return styles.map((style, i) => {
+    return (
+      <style key={i} id={style?.id} type="text/css">
+        {style.content}
+      </style>
+    );
   });
 }

packages/gemi/server/styles.tsx

@@ -255,10 +255,11 @@ export class ViewRouterServiceContainer extends ServiceContainer {
           const stream = await renderToReadableStream(
             createElement(Fragment, {
               children: [
-                await getStyles(currentViews),
+                ...(await getStyles(currentViews)),
                 createElement(Root, {
                   data: result.data,
                   viewImportMap,
+                  key: "root",
                 }),
               ],
             }),

packages/gemi/services/router/ViewRouterServiceContainer.ts

@@ -15,10 +15,7 @@ export default class extends ViewRouter {
   middlewares = ["cache:public,12840,must-revalidate"];
 
   override routes = {
-    "/": this.layout("PublicLayout", {
-      "/": this.view("Home", [HomeController, "index"]),
-      "/:testId": this.view("Test"),
-    }),
+    "/": this.view("Home", [HomeController, "index"]),
     "/auth": AuthViewRouter,
   };
 }

templates/saas-starter/app/http/routes/view.ts

@@ -1,6 +1,3 @@
 import { QueueServiceProvider } from "gemi/services";
-import { TestJob } from "../jobs/TestJob";
 
-export default class extends QueueServiceProvider {
-  jobs = [TestJob];
-}
+export default class extends QueueServiceProvider {}

templates/saas-starter/app/kernel/providers/QueueServiceProvider.ts

@@ -2,7 +2,6 @@ export default function Dashboard() {
   return (
     <div className="p-4">
       <h1>Dashboard</h1>
-      <div>Hello</div>
     </div>
   );
 }

templates/saas-starter/app/views/Dashboard.tsx

@@ -1,3 +1,18 @@
+import { Link } from "gemi/client";
+import styles from "./test.module.css";
+
 export default function Home() {
-  return <div>Home</div>;
+  return (
+    <div>
+      <div>
+        <h1>Home</h1>
+      </div>
+      <div className={styles.awesome}>Hidden</div>
+      <div>
+        <Link className={styles.bgRed} href="/auth/sign-in">
+          Sign In
+        </Link>
+      </div>
+    </div>
+  );
 }

templates/saas-starter/app/views/Home.tsx

@@ -4,7 +4,7 @@ interface Props {
   children: React.ReactNode;
 }
 
-const RootLayout = (props: Props) => {
+export default function RootLayout(props: Props) {
   return (
     <html>
       <head>
@@ -15,6 +15,4 @@ const RootLayout = (props: Props) => {
       <body>{props.children}</body>
     </html>
   );
-};
-
-export default RootLayout;
+}

templates/saas-starter/app/views/RootLayout.tsx

@@ -0,0 +1,8 @@
+
+.bgRed {
+    background: red;
+}
+
+.awesome {
+    visibility: visible;
+}