load Root module before loading the widget module

Author: infiton

spec/fixtures/test-project-with-root/web/chatgpt/WidgetA.tsx

@@ -1,3 +1,5 @@
+import "./widget.css";
+
 export default function WidgetA() {
   return (
     <div className="widget-a">

spec/fixtures/test-project-with-root/web/chatgpt/root.css

@@ -0,0 +1,23 @@
+/* Root layout styles - should be loaded first */
+.root-layout {
+  font-family: system-ui, sans-serif;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.root-header {
+  background-color: #f0f0f0;
+  padding: 1rem;
+}
+
+.root-content {
+  flex: 1;
+  padding: 1rem;
+}
+
+.root-footer {
+  background-color: #f0f0f0;
+  padding: 1rem;
+}
+

spec/fixtures/test-project-with-root/web/chatgpt/root.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import "./root.css";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (

spec/fixtures/test-project-with-root/web/chatgpt/widget.css

@@ -0,0 +1,16 @@
+/* Widget styles - should be loaded after root styles */
+.widget-a {
+  background-color: #e0e0ff;
+  padding: 1rem;
+  border-radius: 8px;
+}
+
+.widget-a h2 {
+  color: #333;
+  margin-bottom: 0.5rem;
+}
+
+.widget-a p {
+  color: #666;
+}
+

spec/integration/root-layout.spec.ts

@@ -114,4 +114,104 @@ describe("Root Layout Component", () => {
       expect(jsContent.length).toBeGreaterThan(100);
     });
   });
+
+  describe("Browser CSS Order Tests", () => {
+    let devServer: ViteDevServer;
+
+    beforeAll(async () => {
+      devServer = await createServer({
+        root: FIXTURE_WITH_ROOT_DIR,
+        configFile: path.join(FIXTURE_WITH_ROOT_DIR, "vite.config.ts"),
+        server: {
+          port: 5177,
+        },
+        logLevel: "warn",
+      });
+      await devServer.listen();
+    });
+
+    afterAll(async () => {
+      await devServer?.close();
+    });
+
+    it("should inject root layout styles before widget styles in the browser", async () => {
+      const { content: html } = await getWidgetHTML("WidgetA", { devServer });
+
+      // Write the HTML to a temp file for serving
+      const tempHtmlPath = path.join(BUILD_WITH_ROOT_DIR, "test-css-order.html");
+      // Replace absolute URLs to point to our dev server
+      const localHtml = html.replace(/https:\/\/example\.com\//g, "http://localhost:5177/");
+      await fs.writeFile(tempHtmlPath, localHtml);
+
+      // Create a simple HTTP server to serve the HTML file
+      const { createServer: createHttpServer } = await import("http");
+      const { readFile: fsReadFile } = await import("fs/promises");
+
+      const server = createHttpServer((req, res) => {
+        void (async () => {
+          try {
+            const content = await fsReadFile(tempHtmlPath);
+            res.writeHead(200, {
+              "Content-Type": "text/html",
+              "Access-Control-Allow-Origin": "*",
+            });
+            res.end(content);
+          } catch {
+            res.writeHead(404);
+            res.end("Not found");
+          }
+        })();
+      });
+
+      const port = 5178;
+      await new Promise<void>((resolve) => {
+        server.listen(port, resolve);
+      });
+
+      try {
+        const { chromium } = await import("playwright");
+        const browser = await chromium.launch();
+        const page = await browser.newPage();
+
+        await page.goto(`http://localhost:${port}/`, { waitUntil: "networkidle" });
+        // Wait for styles to be injected
+        await page.waitForTimeout(2000);
+
+        const html = await page.content();
+        console.log(html);
+        // Get all style tags from the document head, extracting their content
+        const styleContents = await page.evaluate(() => {
+          const styles = document.querySelectorAll("head style");
+          return Array.from(styles).map((style) => style.textContent || "");
+        });
+
+        await browser.close();
+
+        // Find which style tag contains root styles vs widget styles
+        let rootStyleIndex = -1;
+        let widgetStyleIndex = -1;
+
+        for (let i = 0; i < styleContents.length; i++) {
+          const content = styleContents[i];
+          if (content.includes(".root-layout") && rootStyleIndex === -1) {
+            rootStyleIndex = i;
+          }
+          if (content.includes(".widget-a") && widgetStyleIndex === -1) {
+            widgetStyleIndex = i;
+          }
+        }
+
+        // Verify both styles were found
+        expect(rootStyleIndex).toBeGreaterThan(-1);
+        expect(widgetStyleIndex).toBeGreaterThan(-1);
+
+        // Root layout styles should be injected BEFORE widget styles
+        // This ensures proper CSS cascade - widget styles can override root styles
+        expect(rootStyleIndex).toBeLessThan(widgetStyleIndex);
+      } finally {
+        server.close();
+        await fs.unlink(tempHtmlPath).catch(() => {});
+      }
+    });
+  });
 });

src/index.ts

@@ -437,8 +437,8 @@ export function chatGPTWidgetPlugin(options: ChatGPTWidgetPluginOptions = {}): C
           return `
 ${hmrRuntimeSetup}import React from 'react';
 import { createRoot } from 'react-dom/client';
-import Widget from '${widgetFile}';
 import RootLayout from '${rootFile}';
+import Widget from '${widgetFile}';
 
 const container = document.getElementById('root');
 if (!container) {