Fix CSS render issue in ChatGPT in external packages take 2

Author: abewheel

packages/sunpeak/bin/commands/dev.mjs

@@ -182,6 +182,10 @@ export async function dev(projectRoot = process.cwd(), args = []) {
     console.log(`\nStarting MCP server with ${simulations.length} simulation(s)...`);
 
     // Virtual entry module plugin for MCP
+    // Import sunpeak styles directly via JS to avoid CSS @import alias issues with Lightning CSS.
+    // Then import app.css for user's @source directives and custom styles (no sunpeak import).
+    const sunpeakStylePath = isTemplate ? `${parentSrc}/style.css` : 'sunpeak/style.css';
+
     const sunpeakEntryPlugin = () => ({
       name: 'sunpeak-entry',
       resolveId(id) {
@@ -202,7 +206,8 @@ export async function dev(projectRoot = process.cwd(), args = []) {
           return `
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
-import '/src/styles/globals.css';
+import '${sunpeakStylePath}';
+import '/src/styles/app.css';
 import * as ResourceModule from '${srcPath}';
 
 const Component = ResourceModule.default || ResourceModule['${componentName}'];

packages/sunpeak/template/src/styles/app.css

@@ -0,0 +1,12 @@
+/* User-specific Tailwind configuration and custom styles */
+
+/* Scan app-specific source files for Tailwind classes */
+@source "../**/*.{ts,tsx}";
+
+/* Required for Tailwind to find class references in Apps SDK UI components. */
+@source "../../node_modules/@openai/apps-sdk-ui";
+
+/* Configure dark mode to use data-theme attribute (OpenAI SDK standard) */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+/* Add your custom styles below */

packages/sunpeak/template/src/styles/globals.css

@@ -1,11 +1,5 @@
-/* sunpeak/style.css handles tailwindcss and @openai/apps-sdk-ui/css imports */
+/* Base styles: Tailwind CSS + OpenAI Apps SDK UI */
 @import "sunpeak/style.css";
 
-/* Scan app-specific source files for Tailwind classes */
-@source "../**/*.{ts,tsx}";
-
-/* Required for Tailwind to find class references in Apps SDK UI components. */
-@source "../../node_modules/@openai/apps-sdk-ui";
-
-/* Configure dark mode to use data-theme attribute (OpenAI SDK standard) */
-@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+/* App-specific configuration and custom styles */
+@import "./app.css";