@withl5e/l5e 0.3.3-alpha.0 → 0.3.3-alpha.1

package/src/core/global-style.ts

@@ -0,0 +1,35 @@
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+
+export const GLOBAL_STYLE_SOURCE = '/src/global.css';
+export const GLOBAL_STYLE_MANIFEST_KEY = 'src/global.css';
+
+export function findGlobalStyleInput(root: string): string | null {
+  const absolutePath = join(root, GLOBAL_STYLE_MANIFEST_KEY);
+  return existsSync(absolutePath) ? absolutePath : null;
+}
+
+export function withAssetBase(base: string, assetPath: string): string {
+  const cleanPath = assetPath.replace(/^\/+/, '');
+  const normalizedBase = base.endsWith('/') ? base : `${base}/`;
+  return `${normalizedBase}${cleanPath}`;
+}
+
+export function resolveGlobalStyleHref({
+  root,
+  manifest,
+  isProduction,
+  base,
+}: {
+  root: string;
+  manifest?: Record<string, any>;
+  isProduction: boolean;
+  base: string;
+}): string | null {
+  if (!isProduction) {
+    return findGlobalStyleInput(root) ? withAssetBase(base, GLOBAL_STYLE_SOURCE) : null;
+  }
+
+  const file = manifest?.[GLOBAL_STYLE_MANIFEST_KEY]?.file;
+  return typeof file === 'string' ? withAssetBase(base, file) : null;
+}

package/src/core/server.ts

@@ -11,6 +11,7 @@ import { bundleCss, bundleScripts, getBundledFile } from './bundler';
 import type { RenderResult, RequestInfo } from './entry-server';
 import { escapeProp } from './render';
 import { createHeadersFromExpressRequest, parseCookies } from './request';
+import { resolveGlobalStyleHref } from './global-style';
 
 export interface ServerOptions {
   root?: string;
@@ -213,6 +214,7 @@ async function createPageResponse({
   root,
   distClientDir,
   isProduction,
+  assetBase,
 }: {
   rendered: RenderResult;
   template: string;
@@ -220,6 +222,7 @@ async function createPageResponse({
   root: string;
   distClientDir: string;
   isProduction: boolean;
+  assetBase: string;
 }): Promise<globalThis.Response> {
   const rawResponse = createRawResponse(rendered);
   if (rawResponse) {
@@ -244,9 +247,23 @@ async function createPageResponse({
   const swr: number | undefined = rendered.swr;
 
   let extraHead = '';
+  const emittedStyles = new Set<string>();
+  const appendStylesheet = (href: string, crossorigin = false) => {
+    if (emittedStyles.has(href)) return;
+    emittedStyles.add(href);
+    extraHead += `<link rel="stylesheet"${crossorigin ? ' crossorigin' : ''} href="${escapeProp(href)}">`;
+  };
   let globalScripts: string[] = [];
   let islandRegistryScript = '';
 
+  const globalStyleHref = resolveGlobalStyleHref({
+    root,
+    manifest,
+    isProduction,
+    base: assetBase,
+  });
+  if (globalStyleHref) appendStylesheet(globalStyleHref, isProduction);
+
   // Externalized island props → a single JSON script at the end of the document.
   // serialize-javascript with isJSON escapes `<`, `>`, `&` (and U+2028/2029) so the
   // props can't break out of the <script> block or inject markup (XSS). The runtime
@@ -324,7 +341,7 @@ async function createPageResponse({
     if (globalEntry) {
       if (globalEntry.css && globalEntry.css.length > 0) {
         globalEntry.css.forEach((cssFile: string) => {
-          extraHead += `<link rel="stylesheet" crossorigin href="/${cssFile}">`;
+          appendStylesheet(`/${cssFile}`, true);
         });
       }
       if (globalEntry.file) {
@@ -346,18 +363,13 @@ async function createPageResponse({
     }
 
     if (cssSrcList.length > 0) {
-      extraHead += cssSrcList
-        .map((file) => `<link rel="stylesheet" crossorigin href="${file}">`)
-        .join('');
+      cssSrcList.forEach((file) => appendStylesheet(file, true));
     }
   }
 
-  let cssHtml = '';
   if (!isProduction) {
     // Registry đã dedupe, nhưng vẫn lọc lại ở đây để dev không bao giờ ra thẻ trùng
-    cssHtml = [...new Set(cssSrcList)]
-      .map((src) => `<link rel="stylesheet" href="${src}">`)
-      .join('');
+    [...new Set(cssSrcList)].forEach((src) => appendStylesheet(src));
   }
 
   let allScripts = [...globalScripts, ...scriptSrcList];
@@ -394,7 +406,7 @@ async function createPageResponse({
   const html = rendered.rawHtml
     ? rendered.html || ''
     : templateWithLang
-        .replace(`<!--app-head-->`, () => (rendered.head ?? '') + extraHead + cssHtml)
+        .replace(`<!--app-head-->`, () => (rendered.head ?? '') + extraHead)
         .replace(`<!--app-html-->`, () => rendered.html ?? '')
         .replace(`<!--app-scripts-->`, () => scriptsHtml);
 
@@ -747,6 +759,7 @@ export async function createServer(options: ServerOptions = {}): Promise<ServerC
           root,
           distClientDir,
           isProduction,
+          assetBase: isProduction ? base : vite!.config.base,
         });
       };
 

package/src/core/vite-plugin.ts

@@ -10,6 +10,7 @@ import {
 } from 'fs';
 import { dirname, join, relative, resolve } from 'path';
 import type { Plugin, UserConfig } from 'vite';
+import { findGlobalStyleInput } from './global-style';
 
 const VIRTUAL_L5E_VIEWS = 'virtual:l5e-views';
 const VIRTUAL_L5E_ROUTE = 'virtual:l5e-route';
@@ -246,6 +247,12 @@ function discoverRollupInput(rootDir: string): {
       console.log('[l5e] Detected src/client.global.ts and added as entry');
     }
 
+    const globalStyleInput = findGlobalStyleInput(rootDir);
+    if (globalStyleInput) {
+      input['global-style'] = globalStyleInput;
+      console.log('[l5e] Detected src/global.css and added as global stylesheet');
+    }
+
     // Scan all .tsx and .ts files
     const tsFiles = scanTsFiles(srcDir);
 
@@ -297,6 +304,12 @@ function discoverRollupInput(rootDir: string): {
 
       const absolutePath = resolve(rootDir, relativePath);
 
+      // src/global.css is already a dedicated convention entry. Keeping one
+      // Rollup input avoids collisions if a shared layout also calls useCss().
+      if (globalStyleInput && resolve(absolutePath) === resolve(globalStyleInput)) {
+        continue;
+      }
+
       // Only add if file exists
       if (!existsSync(absolutePath)) {
         console.warn(`[l5e] CSS file not found: ${absolutePath} (from ${cssPath})`);