diorama-js 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -1524,6 +1524,18 @@ function getCDNProvider(name) {
       return esmShProvider;
   }
 }
+function buildCSSURL(specifier, options = {}) {
+  const { dependencies = {}, cdnProvider = "esm.sh" } = options;
+  const clean = specifier.replace(/[?#].*$/, "");
+  const { packageName, subpath } = parseSpecifier(clean);
+  const version = dependencies[packageName];
+  const ver = version ? `@${version}` : "";
+  const sub = subpath ? `/${subpath}` : "";
+  if (cdnProvider === "unpkg") {
+    return `https://unpkg.com/${packageName}${ver}${sub}`;
+  }
+  return `https://esm.sh/${packageName}${ver}${sub}`;
+}
 function rewriteImports(source, options = {}) {
   const {
     dependencies = {},
@@ -1537,6 +1549,9 @@ function rewriteImports(source, options = {}) {
     if (raw.startsWith(".") || raw.startsWith("/") || /^https?:\/\//.test(raw)) {
       return raw;
     }
+    if (/\.css(?:[?#]|$)/.test(raw)) {
+      return raw;
+    }
     const { packageName, subpath } = parseSpecifier(raw);
     if (NODE_BUILTINS.has(packageName) || NODE_BUILTINS.has(packageName.replace("node:", ""))) {
       throw new NodeBuiltinError(packageName);
@@ -1739,7 +1754,7 @@ var ASSET_IMPORT_EXTENSIONS = {
   ".otf": "font/otf"
 };
 function assembleHTML(options) {
-  const { project, config, transformedFiles } = options;
+  const { project, config, transformedFiles, cdnProvider } = options;
   const files = transformedFiles ?? project.files;
   switch (config.type) {
     case "static":
@@ -1749,7 +1764,7 @@ function assembleHTML(options) {
     case "typescript":
     case "jsx-typescript":
     case "vite":
-      return assembleESM(files, project, config);
+      return assembleESM(files, project, config, cdnProvider);
     default:
       throw new AssemblyError(`Unsupported project type: ${config.type}`);
   }
@@ -1766,10 +1781,13 @@ function assembleStatic(files, project, config) {
   html = inlineAssets(html, project, config.entryPoint);
   return { html, usesESM: false };
 }
-function assembleESM(files, project, config) {
+function assembleESM(files, project, config, cdnProvider) {
   const isGenerated = config.entryPoint === "__generated__/index.html";
   rewriteAssetImports(files, project);
-  const cssFromJS = extractCSSImports(files);
+  const { css: cssFromJS, links: cssLinks } = extractCSSImports(files, {
+    dependencies: config.dependencies,
+    cdnProvider
+  });
   if (config.isVite) {
     injectImportMetaEnv(files);
   }
@@ -1788,6 +1806,9 @@ function assembleESM(files, project, config) {
     html = rewriteScriptSrcsToImportMap(html, config.entryPoint);
     html = inlineAssets(html, project, config.entryPoint);
   }
+  for (const href of cssLinks) {
+    html = injectIntoHead(html, `<link rel="stylesheet" href="${href}">`);
+  }
   if (cssFromJS) {
     html = injectIntoHead(html, `<style>
 ${cssFromJS}
@@ -2037,20 +2058,32 @@ function rewriteAssetImports(files, project) {
     }
   }
 }
-function extractCSSImports(files) {
+function extractCSSImports(files, options = {}) {
   const cssChunks = [];
-  const cssImportRe = /import\s+['"]([^'"]+\.css)['"]\s*;?/g;
+  const links = [];
+  const seenLinks = /* @__PURE__ */ new Set();
+  const cssImportRe = /import\s+['"]([^'"]+\.css(?:[?#][^'"]*)?)['"]\s*;?/g;
   for (const [path, content] of files) {
     if (!/\.(js|ts|jsx|tsx|mjs)$/.test(path)) continue;
     let modified = content;
     let match;
+    cssImportRe.lastIndex = 0;
     while ((match = cssImportRe.exec(content)) !== null) {
-      const cssPath = match[1];
-      const resolved = resolvePath(directoryOf(path), cssPath);
-      const css = files.get(resolved);
-      if (css) {
-        cssChunks.push(`/* ${resolved} */
+      const specifier = match[1];
+      const bare = specifier.replace(/[?#].*$/, "");
+      if (bare.startsWith(".") || bare.startsWith("/")) {
+        const resolved = resolvePath(directoryOf(path), bare);
+        const css = files.get(resolved);
+        if (css) {
+          cssChunks.push(`/* ${resolved} */
 ${css}`);
+        }
+      } else {
+        const href = /^https?:\/\//.test(bare) ? bare : buildCSSURL(bare, options);
+        if (!seenLinks.has(href)) {
+          seenLinks.add(href);
+          links.push(href);
+        }
       }
       modified = modified.replace(match[0], "");
     }
@@ -2058,7 +2091,7 @@ ${css}`);
       files.set(path, modified);
     }
   }
-  return cssChunks.join("\n\n");
+  return { css: cssChunks.join("\n\n"), links };
 }
 function injectImportMetaEnv(files) {
   const shim = `if(!import.meta.env){Object.defineProperty(import.meta,'env',{value:{MODE:'production',BASE_URL:'/',PROD:true,DEV:false,SSR:false}});}`;
@@ -2169,7 +2202,8 @@ var Diorama = class {
       const { html: html2, usesESM: usesESM2 } = assembleHTML({
         project,
         config,
-        transformedFiles: files
+        transformedFiles: files,
+        cdnProvider: this.options.cdnProvider
       });
       return { html: html2, usesESM: usesESM2, repoName: repoName2 };
     };