@ape-egg/codie 0.1.3 → 0.1.4

package/highlight.js

@@ -198,53 +198,102 @@ export const highlightJSRaw = (code) => {
   return tokens.join('');
 };
 
-// CSS highlighter
+// CSS highlighter - walks brace depth so nested rules (@supports, @media, and
+// & selectors) tokenize at every level, not just the innermost block
 export const highlightCSS = (code, options = {}) => {
-  let result = '';
-  const ruleRegex = /(\/\*[\s\S]*?\*\/)|((?:[^{}\/]|\/(?!\*))+)(\{)([^}]*)(\})/g;
-  let match,
-    lastIndex = 0;
+  const declarations = (text) => {
+    const propRegex = /([\w-]+)(\s*:\s*)([^;]+)(;?)/g;
+    let match,
+      last = 0,
+      result = '';
+
+    while ((match = propRegex.exec(text)) !== null) {
+      if (match.index > last) result += text.slice(last, match.index);
+      const [, prop, colon, value, semi] = match;
+      result += span(CLASS.CSS_PROPERTY, prop) + span(CLASS.PUNCTUATION, colon);
+      const highlighted = value.replace(/@\[([^\]]+)\]/g, (_, expr) => {
+        const h = expr.replace(/\b[a-zA-Z_][a-zA-Z0-9_]*\b/g, (v) =>
+          span(CLASS.VIBE_VARIABLE, v),
+        );
+        return `${span(CLASS.VIBE_COLOR, '@[')}${h}${span(CLASS.VIBE_COLOR, ']')}`;
+      });
+      result += span(CLASS.CSS_VALUE, highlighted);
+      if (semi) result += span(CLASS.PUNCTUATION, semi);
+      last = propRegex.lastIndex;
+    }
+    if (last < text.length) result += text.slice(last);
+    return result;
+  };
+
+  // Index of the } closing the block opened at `open`, or -1 when unterminated
+  const closingBrace = (text, open) => {
+    let depth = 1,
+      i = open + 1;
+
+    while (i < text.length && depth) {
+      if (text.startsWith('/*', i)) {
+        const end = text.indexOf('*/', i + 2);
+        i = end === -1 ? text.length : end + 2;
+        continue;
+      }
+      if (text[i] === '{') depth++;
+      else if (text[i] === '}') depth--;
+      i++;
+    }
 
-  while ((match = ruleRegex.exec(code)) !== null) {
-    if (match.index > lastIndex) result += code.slice(lastIndex, match.index);
+    return depth ? -1 : i - 1;
+  };
+
+  const block = (text, inRule) => {
+    const flush = (chunk) => (inRule ? declarations(chunk) : chunk);
+    let result = '',
+      i = 0,
+      pending = 0;
+
+    while (i < text.length) {
+      if (text.startsWith('/*', i)) {
+        const end = text.indexOf('*/', i + 2);
+        const stop = end === -1 ? text.length : end + 2;
+        result += flush(text.slice(pending, i)) + span(CLASS.COMMENT, text.slice(i, stop));
+        i = pending = stop;
+        continue;
+      }
 
-    const [, comment, selector, open, props, close] = match;
+      // Statement at-rules (@import, @layer a, b;) close on ; with no block
+      if (text[i] === ';' && text.slice(pending, i).trim().startsWith('@')) {
+        const statement = text.slice(pending, i);
+        result +=
+          statement.match(/^(\s*)/)[1] +
+          span(CLASS.CSS_SELECTOR, statement.trim()) +
+          span(CLASS.PUNCTUATION, ';');
+        i = pending = i + 1;
+        continue;
+      }
 
-    if (comment) {
-      result += span(CLASS.COMMENT, comment);
-    } else {
-      const ws = selector.match(/^(\s*)/)[1];
-      result +=
-        ws + span(CLASS.CSS_SELECTOR, selector.trim()) + ' ' + span(CLASS.PUNCTUATION, open);
-
-      const propRegex = /([\w-]+)(\s*:\s*)([^;]+)(;?)/g;
-      let propMatch,
-        propLast = 0,
-        propsResult = '';
-
-      while ((propMatch = propRegex.exec(props)) !== null) {
-        if (propMatch.index > propLast) propsResult += props.slice(propLast, propMatch.index);
-        const [, prop, colon, value, semi] = propMatch;
-        propsResult += span(CLASS.CSS_PROPERTY, prop) + span(CLASS.PUNCTUATION, colon);
-        const highlighted = value.replace(/@\[([^\]]+)\]/g, (_, expr) => {
-          const h = expr.replace(/\b[a-zA-Z_][a-zA-Z0-9_]*\b/g, (v) =>
-            span(CLASS.VIBE_VARIABLE, v),
-          );
-          return `${span(CLASS.VIBE_COLOR, '@[')}${h}${span(CLASS.VIBE_COLOR, ']')}`;
-        });
-        propsResult += span(CLASS.CSS_VALUE, highlighted);
-        if (semi) propsResult += span(CLASS.PUNCTUATION, semi);
-        propLast = propRegex.lastIndex;
+      if (text[i] === '{') {
+        const close = closingBrace(text, i);
+        const prelude = text.slice(pending, i);
+        const ws = prelude.match(/^(\s*)/)[1];
+        const name = prelude.trim();
+
+        result +=
+          ws +
+          (name ? span(CLASS.CSS_SELECTOR, name) + ' ' : '') +
+          span(CLASS.PUNCTUATION, '{') +
+          block(text.slice(i + 1, close === -1 ? text.length : close), true) +
+          (close === -1 ? '' : span(CLASS.PUNCTUATION, '}'));
+
+        i = pending = close === -1 ? text.length : close + 1;
+        continue;
       }
-      if (propLast < props.length) propsResult += props.slice(propLast);
 
-      result += propsResult + span(CLASS.PUNCTUATION, close);
+      i++;
     }
-    lastIndex = ruleRegex.lastIndex;
-  }
 
-  if (lastIndex < code.length) result += code.slice(lastIndex);
-  return result;
+    return result + flush(text.slice(pending));
+  };
+
+  return block(code, false);
 };
 
 // JSON highlighter (receives HTML-escaped code)
@@ -310,6 +359,54 @@ export const highlightJSOnly = (html, options = {}) => {
   );
 };
 
+// Bare CSS rules sitting outside any markup, handed to highlightCSS one whole
+// brace-balanced block at a time. Markup inside a candidate disqualifies it —
+// that is HTML, already highlighted.
+const bareCSS = (text) => {
+  let result = '',
+    i = 0,
+    done = 0;
+
+  while (i < text.length) {
+    if (text[i] !== '{') {
+      i++;
+      continue;
+    }
+
+    let start = i;
+    while (start > done && !'<>{}'.includes(text[start - 1])) start--;
+
+    let depth = 0,
+      j = i,
+      close = -1;
+
+    while (j < text.length) {
+      const c = text[j];
+      if (c === '<' || c === '>') break;
+      if (c === '{') depth++;
+      else if (c === '}' && !--depth) {
+        close = j;
+        break;
+      }
+      j++;
+    }
+
+    if (start === i || close === -1) {
+      i++;
+      continue;
+    }
+
+    const candidate = text.slice(start, close + 1);
+    if (/[\w-]+\s*:\s*/.test(candidate)) {
+      result += text.slice(done, start) + highlightCSS(candidate);
+      done = close + 1;
+    }
+    i = close + 1;
+  }
+
+  return result + text.slice(done);
+};
+
 // HTML highlighter - main entry point
 export const highlightHTML = (
   html,
@@ -416,10 +513,7 @@ export const highlightHTML = (
     );
 
     // CSS rules outside <style> tags (bare CSS blocks in mixed HTML+CSS snippets)
-    highlighted = highlighted.replace(
-      /([^<>{}]+\{[^<>{}]*\})/g,
-      (match) => /[\w-]+\s*:\s*/.test(match) ? highlightCSS(match) : match,
-    );
+    highlighted = bareCSS(highlighted);
   }
 
   // Remaining @[...] patterns

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/codie",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Modular code display and editing package",
   "type": "module",
   "main": "codie.js",