chocola 1.3.8 → 1.3.10

package/compiler/index.js

@@ -93,14 +93,17 @@ async function loadAndDisplayComponents(srcComponentsPath) {
 async function processAssets(doc, rootDir, srcDir, outDirPath) {
     const { stylesheets, icons } = getAssetLinks(doc);
     const fileIds = [];
+    let cssContents = [];
 
     for (const link of stylesheets) {
-        await processStylesheet(link, rootDir, srcDir, outDirPath, fileIds);
+        const css = await processStylesheet(link, rootDir, srcDir, outDirPath, fileIds);
+        cssContents.push(css);
     }
 
     for (const link of icons) {
         await processIcons(link, rootDir, srcDir, outDirPath, fileIds);
     }
+    return cssContents
 }
 
 /**
@@ -137,7 +140,7 @@ export default async function runtime(rootDir, buildConfig) {
 
     const { runtimeScript, scopesCss } = processAllComponents(appElements, loadedComponents);
     const runtimeFilename = await generateRuntimeScript(runtimeScript, paths.outDir);
-    await processAssets(doc, rootDir, config.srcDir, paths.outDir);
+    const globalCss = (await processAssets(doc, rootDir, config.srcDir, paths.outDir)).join("\n");
 
     if (scopesCss) {
         const fileName = "sc-" + genRandomId(null, 6) + ".css";
@@ -149,7 +152,7 @@ export default async function runtime(rootDir, buildConfig) {
     const html = await serializeDOM(dom);
     await writeHTMLOutput(html, paths.outDir);
 
-    await copyResources(rootDir, config.srcDir, paths.outDir);
+    await copyResources(rootDir, scopesCss, globalCss, config.srcDir, paths.outDir);
 
     !isHotReload && logSuccess(paths.outDir);
     isHotReload && console.log("Dev server updated");

package/compiler/pipeline.js

@@ -109,6 +109,8 @@ export async function processStylesheet(link, rootDir, srcDir, outDirPath, fileI
 
     await fs.writeFile(path.join(outDirPath, cssFileName), css);
     link.setAttribute("href", "./" + cssFileName);
+
+    return css;
   } catch (err) {
     throwError(err);
   }
@@ -132,6 +134,51 @@ export async function processIcons(link, rootDir, srcDir, outDirPath) {
   }
 }
 
+export function getCssAssets(css) {
+  const results = new Set();
+
+  const urlRegex = /url\(([^)]+)\)/gi;
+
+  const importStringRegex = /@import\s+["']([^"']+)["']/gi;
+
+  const importUrlRegex = /@import\s+url\(([^)]+)\)/gi;
+
+  const clean = (raw) => {
+    let p = raw.trim();
+
+    if (
+      (p.startsWith('"') && p.endsWith('"')) ||
+      (p.startsWith("'") && p.endsWith("'"))
+    ) {
+      p = p.slice(1, -1);
+    }
+
+    if (p.startsWith("data:")) return null;
+
+    return p;
+  };
+
+  let match;
+
+  while ((match = urlRegex.exec(css))) {
+    const p = clean(match[1]);
+    if (p) results.add(p);
+  }
+
+  while ((match = importStringRegex.exec(css))) {
+    const p = clean(match[1]);
+    if (p) results.add(p);
+  }
+
+  while ((match = importUrlRegex.exec(css))) {
+    const p = clean(match[1]);
+    if (p) results.add(p);
+  }
+
+  return [...results];
+}
+
+
 /**
  * Copies all local resources (images, fonts, etc.) to output directory
  * Excludes web links and script/link tags
@@ -140,11 +187,12 @@ export async function processIcons(link, rootDir, srcDir, outDirPath) {
  * @param {import("fs").PathLike} outDirPath - Output directory path
  * @throws {Error} if resources cannot be copied
  */
-export async function copyResources(rootDir, srcDir, outDirPath) {
+export async function copyResources(rootDir, scopesCss, globalCss, srcDir, outDirPath) {
   try {
     const newIndex = await fs.readFile(path.join(outDirPath, "index.html"), "utf8");
     const newDoc = new JSDOM(newIndex);
     const newElements = Array.from(newDoc.window.document.querySelectorAll("*"));
+    const inlinePathsRegex = /url\((.*?)\)/gi;
 
     for (const el of newElements) {
       if (el.tagName === "LINK" || el.tagName === "SCRIPT") continue;
@@ -158,6 +206,41 @@ export async function copyResources(rootDir, srcDir, outDirPath) {
         await fs.mkdir(path.dirname(destPath), { recursive: true });
         await fs.copyFile(srcPath, destPath);
       }
+
+      const styles = el.getAttribute("style");
+
+      if (styles) {
+        let stylesMatch;
+        while ((stylesMatch = inlinePathsRegex.exec(styles)) !== null) {
+          let filePath = stylesMatch[1].trim();
+
+          if (
+            (filePath.startsWith('"') && filePath.endsWith('"')) ||
+            (filePath.startsWith("'") && filePath.endsWith("'"))
+          ) {
+            filePath = filePath.slice(1, -1);
+          }
+
+          const srcPath = path.join(rootDir, srcDir, filePath);
+          const destPath = path.join(outDirPath, filePath);
+
+          await fs.mkdir(path.dirname(destPath), { recursive: true });
+          await fs.copyFile(srcPath, destPath);
+        }
+      }
+    }
+
+    const cssAssets = [...getCssAssets(scopesCss), ...getCssAssets(globalCss)];
+    for (const assetPath of cssAssets) {
+      try {
+        const srcPath = path.join(rootDir, srcDir, assetPath);
+        const destPath = path.join(outDirPath, assetPath);
+
+        await fs.mkdir(path.dirname(destPath), { recursive: true });
+        await fs.copyFile(srcPath, destPath);
+      } catch (err) {
+        throwError(err)
+      }
     }
   } catch (err) {
     throwError(err);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chocola",
-  "version": "1.3.8",
+  "version": "1.3.10",
   "description": "The sweetest way to build reactive web apps",
   "keywords": [
     "web",