chocola 1.3.9 → 1.3.11

package/compiler/component-processor.js

@@ -5,18 +5,63 @@ import chalk from "chalk";
 import beautify from "js-beautify";
 
 function scopeCss(cssString, cssId) {
-  return cssString.replace(/(^|\})([^{}]+)\{/g, (match, before, selector) => {
-    if (selector.trim().startsWith("@")) {
-      return match;
+  function findMatchingBrace(s, openIndex) {
+    let depth = 0;
+    for (let i = openIndex; i < s.length; i++) {
+      const ch = s[i];
+      if (ch === '{') depth++;
+      else if (ch === '}') {
+        depth--;
+        if (depth === 0) return i;
+      }
     }
-    const scoped = selector
-      .split(",")
-      .map(sel => `.${cssId} ${sel.trim()}`)
-      .join(", ");
-    return `${before}${scoped}{`;
-  });
+    return s.length - 1;
+  }
+
+  function processBlock(str) {
+    str = str.replaceAll(":root", `.${cssId}`);
+
+    let out = "";
+    let i = 0;
+    while (i < str.length) {
+      const braceIndex = str.indexOf('{', i);
+      if (braceIndex === -1) {
+        out += str.slice(i);
+        break;
+      }
+      const header = str.substring(i, braceIndex);
+      const endBrace = findMatchingBrace(str, braceIndex);
+      const inner = str.substring(braceIndex + 1, endBrace);
+      const innerScoped = processBlock(inner);
+
+      if (header.trim().startsWith("@")) {
+        out += header + "{" + innerScoped + "}";
+      } else {
+        const selectors = header
+          .split(",")
+          .map(s => s.trim())
+          .filter(Boolean);
+        const scopedHeader = selectors.length > 0
+          ? selectors.map(sel => {
+              const s = sel.trim();
+              if (s.startsWith("." + cssId)) {
+                return s;
+              }
+              return `.${cssId} ${s}`;
+            }).join(", ")
+          : header;
+        out += scopedHeader + "{" + innerScoped + "}";
+      }
+
+      i = endBrace + 1;
+    }
+    return out;
+  }
+
+  return processBlock(cssString);
 }
 
+
 function interpolateNode(node, ctxProxy) {
   if (node.nodeType === 3) {
     node.textContent = node.textContent.replace(/\{([^}]+)\}/g, (_, expr) => {
@@ -150,6 +195,8 @@ export function processComponentElement(
       if (!cssId) {
         cssId = genRandomId(cssScopes, 8, true);
         cssScopesMap.set(compName, cssId);
+      }
+      if (fragment.firstChild && fragment.firstChild.nodeType === 1) {
         fragment.firstChild.classList.add(cssId);
       }
       style = scopeCss(style, cssId);

package/compiler/index.js

@@ -141,7 +141,6 @@ export default async function runtime(rootDir, buildConfig) {
     const { runtimeScript, scopesCss } = processAllComponents(appElements, loadedComponents);
     const runtimeFilename = await generateRuntimeScript(runtimeScript, paths.outDir);
     const globalCss = (await processAssets(doc, rootDir, config.srcDir, paths.outDir)).join("\n");
-    console.log(globalCss)
 
     if (scopesCss) {
         const fileName = "sc-" + genRandomId(null, 6) + ".css";

package/compiler/pipeline.js

@@ -230,9 +230,7 @@ export async function copyResources(rootDir, scopesCss, globalCss, srcDir, outDi
       }
     }
 
-    console.log(globalCss)
     const cssAssets = [...getCssAssets(scopesCss), ...getCssAssets(globalCss)];
-    console.log(cssAssets)
     for (const assetPath of cssAssets) {
       try {
         const srcPath = path.join(rootDir, srcDir, assetPath);

package/package.json

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