cssgrep 1.5.0 → 1.7.0

package/CHANGELOG.md

@@ -7,6 +7,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.7.0] - 2026-07-12
+
+### Added
+- `-p` output is syntax-highlighted when color is on: tag names, attribute
+  names, attribute values and comments each get a color, and with
+  `--parent -p` the matched node's region stays wrapped in unbroken match
+  red on top of it. `--color=never` (or piping) keeps the plain output.
+
+## [1.6.0] - 2026-07-12
+
+### Added
+- Embedded HTML in JS/TS: files with `.js`/`.mjs`/`.cjs`/`.jsx`/`.ts`/`.mts`/
+  `.cts`/`.tsx` extensions are searched for HTML inside template literals
+  (tagged or not), with locators pointing into the host file — quickfix jumps
+  straight to the match inside `` html`…` ``. `${…}` holes match as
+  whitespace but display as the original source; each literal parses
+  independently, so an unclosed tag in one can't leak into the next. Under
+  `-r`, opt in with `--ext js,ts`. JSX is not extracted (it isn't HTML).
+
 ## [1.5.0] - 2026-07-12
 
 ### Added
@@ -133,7 +152,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `-0`/`--null`, `--color`, `-w`/`--max-width`, `-V`/`--version`.
 - Standalone binaries (Bun, Node SEA), shell completions, and a man page.
 
-[Unreleased]: https://github.com/msbatarce/cssgrep/compare/v1.5.0...HEAD
+[Unreleased]: https://github.com/msbatarce/cssgrep/compare/v1.7.0...HEAD
+[1.7.0]: https://github.com/msbatarce/cssgrep/compare/v1.6.0...v1.7.0
+[1.6.0]: https://github.com/msbatarce/cssgrep/compare/v1.5.0...v1.6.0
 [1.5.0]: https://github.com/msbatarce/cssgrep/compare/v1.4.0...v1.5.0
 [1.4.0]: https://github.com/msbatarce/cssgrep/compare/v1.3.0...v1.4.0
 [1.3.0]: https://github.com/msbatarce/cssgrep/compare/v1.2.0...v1.3.0

package/README.md

@@ -87,7 +87,7 @@ own `line:col` locator (that per-match precision is the point of the tool). A
 | `--ignore-file <path>` | Load ignore globs from a file, one per line (`#` comments and blank lines ignored) — like a `.gitignore`. |
 | `-S`, `--follow` | Follow symbolic links while recursing with `-r` (they are skipped by default). Each physical directory is visited once, so symlink cycles are safe. |
 | `-n`, `--line-number` | Prefix each match with its `line:col` locator. Mutually exclusive with `-c` and `-p`. |
-| `-p`, `--print` | Pretty-print the matched node's HTML, re-indented from scratch (works on minified input). No `line:col` locator is shown. |
+| `-p`, `--print` | Pretty-print the matched node's HTML, re-indented from scratch (works on minified input) and syntax-highlighted when color is on. No `line:col` locator is shown. |
 | `--attr <name>` | Print the value of attribute `<name>` for each match (nodes without it are skipped; if every match is skipped the exit status is 1). The name is matched case-insensitively. Honors `-n` and `-w`. |
 | `--text` | Print the matched node's text content, whitespace collapsed. Honors `-n` and `-w`. |
 | `--json` | Print one JSON object per match (NDJSON), with `file`, `line`, `col`, `attribs` (the element's attributes, names lowercased), `html`, `text` — plus `label` when `-e` is used. |
@@ -132,9 +132,11 @@ useful. Suppress the note with `-s` (or `-q`).
 
 When coloring is on, the matched node is highlighted within its line (grep's
 bold-red); the `file:` prefix and `line:col` locator get their own colors
-(magenta and green, like grep). Plain `-p` prints no color (the whole block is
-the match), but `-p --parent <n>` highlights the original matched node inside
-the printed container, so you can see what matched within its surroundings.
+(magenta and green, like grep). `-p` blocks are syntax-highlighted — tag
+names, attribute names, attribute values and comments each get a color — and
+with `--parent <n>` the original matched node is additionally wrapped in the
+match color inside the printed container (match red wins over syntax within
+its region), so you can see what matched within its surroundings.
 
 Exit status: `0` if any match was found, `1` if none, `2` on error — same
 convention as `grep`.
@@ -204,6 +206,38 @@ globally to every selector. With `-e`, positional arguments are always file
 paths — like `grep -e`, a mistyped path is reported as unreadable rather than
 re-guessed as a selector.
 
+### Embedded HTML in JS/TS
+
+Modern HTML often lives inside JavaScript. Files with JS/TS extensions
+(`.js`, `.mjs`, `.cjs`, `.jsx`, `.ts`, `.mts`, `.cts`, `.tsx`) are
+automatically searched for HTML inside **template literals** — lit-html's
+`` html`…` ``, vanilla `` el.innerHTML = `…` ``, nested templates — and
+matches report **host-file locators** that vim's quickfix jumps straight to:
+
+```sh
+$ cssgrep '.price' -n components/card.js
+41:23     <span class="price">${item.price}</span>
+
+$ cssgrep 'img:not([alt])' -rn --ext js,ts,html src/   # audit across both worlds
+```
+
+How it works: every backtick literal whose content looks like markup (`<` +
+letter) is parsed as its own document, with each `${…}` interpolation masked
+to same-length whitespace — so offsets in the fragment *are* offsets in the
+host file, and no position math can drift. Because fragments parse
+independently, an unclosed tag in one literal can never swallow the next.
+Printed lines and `--json`'s `html` field show the *original* source
+(interpolations visible); selector matching, `attribs` and `--text` see holes
+as whitespace, so `class="${cls} card"` matches `.card`, and a tag name
+that's a hole (`<${Tag}>`) never matches. JSX is not extracted — it isn't
+HTML.
+
+With `-r`, JS/TS files are reached by adding their extensions (`--ext
+js,ts`); the default stays `html,htm`. Server-side template files (PHP, ERB,
+Handlebars…) usually need none of this — they're HTML with interruptions, and
+forgiving parsing handles them: `cssgrep '.card' -r --ext php,erb .`. The
+rewrite ops don't apply inside JS/TS files.
+
 ### Watch mode (`--watch`)
 
 `--watch` keeps the search running and re-runs it whenever a watched file

package/cli.js

@@ -4,9 +4,15 @@
 const fs = require('fs');
 const path = require('path');
 const {
-  parse, offsetToPosition, lineTextAt, textOf, collapseWs, ancestor,
+  parse, extractHtmlFragments, lexOpenTag, lineIndex, offsetToPosition,
+  lineTextAt, textOf, collapseWs, ancestor,
 } = require('./lib.js');
 
+// Files with these extensions are scanned for HTML inside JS/TS template
+// literals instead of being parsed as one HTML document (ROADMAP Phase 12).
+const EMBEDDED_EXTS = new Set(['js', 'mjs', 'cjs', 'jsx', 'ts', 'mts', 'cts', 'tsx']);
+const isEmbeddedPath = p => EMBEDDED_EXTS.has(path.extname(p).slice(1).toLowerCase());
+
 // dom-serializer + js-beautify are only needed by -p, and cost ~13 ms of a
 // ~43 ms startup (measured, ROADMAP Phase 11) — loaded on first use so the
 // grepprg-style hot path never pays for them.
@@ -23,7 +29,7 @@ function loadPrettyPrinter() {
 // package.json, so it survives compilation into a standalone binary (Bun
 // --compile / Node SEA), where package.json won't sit next to the executable.
 // Keep in sync with package.json on release.
-const VERSION = '1.5.0';
+const VERSION = '1.7.0';
 
 const USAGE = `cssgrep - search HTML by CSS selector, grep-style.
 
@@ -54,7 +60,8 @@ Options:
   -S, --follow           Follow symbolic links when recursing with -r
                          (default: skip them; loops are detected).
   -n, --line-number      Prefix each match with its line:col (excludes -c, -p).
-  -p, --print            Pretty-print the matched node's HTML above its location.
+  -p, --print            Pretty-print the matched node's HTML, syntax-
+                         highlighted when color is on.
       --attr <name>      Print the value of attribute <name> (skips nodes without it).
       --text             Print the matched node's text content (whitespace collapsed).
       --json             Print one JSON record per match (NDJSON: file,line,col,
@@ -109,6 +116,11 @@ value with = or as the next word (--max-width=100, --ext htm).
 Globs (--include/--ignore/--exclude) support *, ** (crosses /), ?, and brace
 alternation like *.{html,htm}.
 
+JS/TS files (.js .mjs .cjs .jsx .ts .mts .cts .tsx) are searched for HTML
+inside template literals: each markup-looking \`...\` is parsed on its own,
+\${...} holes match as whitespace, and locators point into the host file
+(with -r, add the extensions via --ext js,ts). Rewrite ops don't apply there.
+
 Exit status: 0 if any match was found, 1 if none, 2 on error.`;
 
 function fail(msg) {
@@ -126,12 +138,19 @@ function failInvert(flag) {
 // ANSI SGR codes matching grep's default scheme: bold-red match, magenta
 // filename, green line/col numbers, cyan separators. The [label] tag from -e
 // has no grep counterpart; yellow keeps it distinct from all of the above.
+// The last four paint -p's syntax highlighting (tag names, attribute names,
+// attribute values, comments/doctypes) — distinct from match red, which
+// always wins inside a --parent -p match region.
 const COLORS = {
   match: '1;31',
   file: '35',
   line: '32',
   sep: '36',
   label: '33',
+  tag: '1;34',
+  attr: '36',
+  value: '32',
+  comment: '90',
 };
 
 function paint(code, str) {
@@ -375,9 +394,8 @@ function parseArgs(argv) {
     fail(`invalid --color value: ${opts.color} (expected auto, always or never)`);
   }
   // Resolve the tri-state into a single boolean: color only when forced on, or
-  // 'auto' and stdout is an interactive terminal. Plain -p still prints no
-  // color (it has nothing to highlight) — that's gated where it prints, not
-  // here, so --parent -p can highlight the matched node inside the container.
+  // 'auto' and stdout is an interactive terminal. -p uses it for syntax
+  // highlighting (and --parent -p for the match region on top of it).
   opts.colorOn = opts.color === 'always' || (opts.color === 'auto' && Boolean(process.stdout.isTTY));
   return opts;
 }
@@ -456,14 +474,63 @@ function renderText(pos, off, nodeEnd, opts) {
 const HL_START = '';
 const HL_END = '';
 
+// Syntax-highlight a pretty-printed HTML block: tag names, attribute names,
+// attribute values (quotes included) and comments/doctypes get their own
+// colors; text content and punctuation stay unpainted. Spans come from the
+// same opening-tag lexer the rewrite mode uses, so a quoted '>' never
+// confuses the scan.
+function highlightHtml(s) {
+  let out = '';
+  let i = 0;
+  while (i < s.length) {
+    const ch = s[i];
+    if (ch === '<' && (s.startsWith('<!--', i) || s[i + 1] === '!')) {
+      const close = s.startsWith('<!--', i) ? '-->' : '>';
+      let end = s.indexOf(close, i + 2);
+      end = end === -1 ? s.length : end + close.length;
+      out += paint(COLORS.comment, s.slice(i, end));
+      i = end;
+      continue;
+    }
+    if (ch === '<' && s[i + 1] === '/') {
+      const m = /^<\/([^\s>]*)([^>]*>?)/.exec(s.slice(i));
+      out += '</' + paint(COLORS.tag, m[1]) + m[2];
+      i += m[0].length;
+      continue;
+    }
+    if (ch === '<' && /[a-zA-Z]/.test(s[i + 1] || '')) {
+      const lx = lexOpenTag(s, i);
+      out += '<' + paint(COLORS.tag, s.slice(lx.nameStart, lx.nameEnd));
+      let j = lx.nameEnd;
+      for (const a of lx.attrs) {
+        out += s.slice(j, a.start) + paint(COLORS.attr, s.slice(a.start, a.nameEnd));
+        if (a.vStart >= 0) {
+          const quote = s[a.vStart - 1];
+          const valFrom = quote === '"' || quote === "'" ? a.vStart - 1 : a.vStart;
+          out += s.slice(a.nameEnd, valFrom) + paint(COLORS.value, s.slice(valFrom, a.end));
+        }
+        j = a.end;
+      }
+      out += s.slice(j, lx.end);
+      i = lx.end;
+      continue;
+    }
+    out += ch;
+    i++;
+  }
+  return out;
+}
+
 // Re-indent a matched node's HTML from scratch (so minified input still comes
 // out readable). dom-serializer turns the parsed node back into a string;
-// js-beautify does the formatting. When `origins` (descendant nodes to
-// highlight) is given and coloring is on, those nodes are wrapped in the match
-// color within the printed block.
+// js-beautify does the formatting. With color on the block is syntax-
+// highlighted; when `origins` (descendant nodes to highlight) is also given,
+// those nodes are wrapped in the match color instead — match red wins over
+// syntax inside its region.
 function prettyPrint(el, origins, opts) {
   loadPrettyPrinter();
-  const highlight = origins && origins.length && opts && opts.colorOn;
+  const colorOn = Boolean(opts && opts.colorOn);
+  const highlight = origins && origins.length && colorOn;
   const inserted = [];
   if (highlight) {
     // Bracket each origin with sentinel comment nodes among its siblings.
@@ -493,13 +560,23 @@ function prettyPrint(el, origins, opts) {
       k = kids.indexOf(end); if (k >= 0) kids.splice(k, 1);
     }
   }
-  if (!highlight) return html;
+  if (!colorOn) return html;
+  if (!highlight) return highlightHtml(html);
+  // Split on the sentinel comments: regions outside the match get syntax
+  // highlighting, the match region itself gets the match color, unbroken —
+  // syntax codes inside would end the red at every token.
   const startCode = `\x1b[${COLORS.match}m`;
   const resetCode = '\x1b[0m';
-  html = html
-    .replace(new RegExp(`<!--\\s*${HL_START}\\s*-->`, 'g'), startCode)
-    .replace(new RegExp(`<!--\\s*${HL_END}\\s*-->`, 'g'), resetCode);
-  return foldStandaloneCodes(html, startCode, resetCode);
+  const isStart = new RegExp(`^<!--\\s*${HL_START}\\s*-->$`);
+  const isEnd = new RegExp(`^<!--\\s*${HL_END}\\s*-->$`);
+  let out = '';
+  let inside = false;
+  for (const part of html.split(new RegExp(`(<!--\\s*[${HL_START}${HL_END}]\\s*-->)`, 'g'))) {
+    if (isStart.test(part)) { out += startCode; inside = true; continue; }
+    if (isEnd.test(part)) { out += resetCode; inside = false; continue; }
+    out += inside ? part : highlightHtml(part);
+  }
+  return foldStandaloneCodes(out, startCode, resetCode);
 }
 
 // beautify sometimes parks a marker comment on its own line (e.g. when the
@@ -541,11 +618,11 @@ function emitContext(src, starts, name, showLabel, targets, opts, out) {
   // which drives the in-line highlight — and the [label] tag — when emitting.
   const info = new Map();
   const posState = {};
-  for (const { el, label: selLabel } of targets) {
-    const off = el.startIndex == null ? 0 : el.startIndex;
+  for (const { el, base, label: selLabel } of targets) {
+    const off = base + (el.startIndex == null ? 0 : el.startIndex);
     const pos = offsetToPosition(starts, src, off, posState);
     if (info.has(pos.line)) continue;
-    const nodeEnd = (el.endIndex == null ? off : el.endIndex) + 1;
+    const nodeEnd = base + (el.endIndex == null ? off - base : el.endIndex) + 1;
     info.set(pos.line, { off, nodeEnd, pos, selLabel });
   }
 
@@ -585,13 +662,20 @@ function emitContext(src, starts, name, showLabel, targets, opts, out) {
 // `name` is the source's display name (file path, or "(standard input)"); it is
 // used by the aggregate modes (-l/-L/-c). `showLabel` decides whether per-match
 // lines carry a `file:` prefix (only when more than one file is searched).
-function searchSource(src, name, showLabel, opts, out, limit = Infinity) {
+function searchSource(src, name, showLabel, opts, out, limit = Infinity, embedded = false) {
   // The lib owns parsing and selection: one parse per source, then one
   // doc.search() per selector against the same tree. The CLI works on the
   // raw nodes (the match objects' documented escape hatch) because its
   // output modes need node-level access the match shape doesn't model
   // (pretty-printing, ancestor re-targeting, in-line highlight spans).
-  const doc = parse(src);
+  //
+  // A plain HTML file is one fragment covering the whole source (base 0).
+  // An embedded (JS/TS) file contributes one fragment per markup-sniffing
+  // template literal — holes masked to same-length whitespace, so fragment
+  // offsets + base ARE host-file offsets — each parsed as its own document,
+  // so an unclosed tag in one literal can never swallow the next.
+  const docs = (embedded ? extractHtmlFragments(src) : [{ start: 0, masked: src }])
+    .map(f => ({ doc: parse(f.masked), base: f.start }));
   // One record per (selector, matched node): with -e a node matched by two
   // selectors is reported once per selector, tagged with each label, and the
   // merged stream is in document order (same node = same offset, so the
@@ -603,10 +687,12 @@ function searchSource(src, name, showLabel, opts, out, limit = Infinity) {
     : [{ label: null, selector: opts.selector }];
   const records = [];
   for (const s of selList) {
-    for (const m of doc.search(s.selector)) records.push({ el: m.node, label: s.label });
+    for (const { doc, base } of docs) {
+      for (const m of doc.search(s.selector)) records.push({ el: m.node, base, label: s.label });
+    }
   }
-  if (selList.length > 1) {
-    records.sort((a, b) => (a.el.startIndex || 0) - (b.el.startIndex || 0));
+  if (selList.length > 1 || docs.length > 1) {
+    records.sort((a, b) => (a.base + (a.el.startIndex || 0)) - (b.base + (b.el.startIndex || 0)));
   }
   const found = records.length;
   // Aggregate modes suppress per-match output entirely.
@@ -630,11 +716,15 @@ function searchSource(src, name, showLabel, opts, out, limit = Infinity) {
   // Nothing to emit: return before building the line index — a zero-match
   // pass over a large file shouldn't pay a full line scan for nothing.
   if (limited.length === 0) return 0;
-  const starts = opts.print ? null : doc.lineStarts();
-  // --parent re-targets matches to ancestors (no-op without it). Dedup is per
-  // (ancestor, label), so two -e selectors sharing a container still report it
-  // once each. Aggregate modes above operate on the raw matches; targeting
-  // only affects what prints.
+  // Positions are host-file positions: fragments preserve line structure, so
+  // the host source's own line index serves embedded matches directly.
+  const starts = opts.print ? null
+    : embedded ? lineIndex(src)
+    : docs[0].doc.lineStarts();
+  // --parent re-targets matches to ancestors (no-op without it; never leaves
+  // the match's own fragment). Dedup is per (ancestor, label), so two -e
+  // selectors sharing a container still report it once each. Aggregate modes
+  // above operate on the raw matches; targeting only affects what prints.
   let targets = limited;
   if (opts.parent) {
     targets = [];
@@ -645,7 +735,7 @@ function searchSource(src, name, showLabel, opts, out, limit = Infinity) {
       if (!labels) { labels = new Set(); seen.set(a, labels); }
       if (!labels.has(r.label)) {
         labels.add(r.label);
-        targets.push({ el: a, label: r.label });
+        targets.push({ el: a, base: r.base, label: r.label });
       }
     }
   }
@@ -674,10 +764,10 @@ function searchSource(src, name, showLabel, opts, out, limit = Infinity) {
     // by JSON.stringify, so each record stays on one line. Ignores --color
     // and -n (line/col are always present). `label` appears only with -e.
     const posState = {};
-    for (const { el, label: selLabel } of targets) {
-      const off = el.startIndex == null ? 0 : el.startIndex;
+    for (const { el, base, label: selLabel } of targets) {
+      const off = base + (el.startIndex == null ? 0 : el.startIndex);
       const pos = offsetToPosition(starts, src, off, posState);
-      const nodeEnd = (el.endIndex == null ? off : el.endIndex) + 1;
+      const nodeEnd = base + (el.endIndex == null ? off - base : el.endIndex) + 1;
       out.push(JSON.stringify({
         file: name,
         line: pos.line,
@@ -697,7 +787,7 @@ function searchSource(src, name, showLabel, opts, out, limit = Infinity) {
   // Extraction modes print per-match values, so they never dedup.
   const seenLines = (opts.lineNumber || opts.attr != null || opts.text) ? null : new Set();
   const posState = {};
-  for (const { el, label: selLabel } of targets) {
+  for (const { el, base, label: selLabel } of targets) {
     const c = opts.colorOn ? paint : (_, s) => s;
     // The [label] tag from -e; a null label (positional selector) prints none.
     const tag = selLabel === null ? '' : c(COLORS.label, `[${selLabel}]`) + ' ';
@@ -710,7 +800,7 @@ function searchSource(src, name, showLabel, opts, out, limit = Infinity) {
       emitted++;
       continue;
     }
-    const off = el.startIndex == null ? 0 : el.startIndex;
+    const off = base + (el.startIndex == null ? 0 : el.startIndex);
     const pos = offsetToPosition(starts, src, off, posState);
 
     // Choose the content printed for this match. --attr/--text replace the
@@ -727,7 +817,7 @@ function searchSource(src, name, showLabel, opts, out, limit = Infinity) {
         if (seenLines.has(pos.line)) continue;    // this line already printed
         seenLines.add(pos.line);
       }
-      const nodeEnd = (el.endIndex == null ? off : el.endIndex) + 1; // exclusive
+      const nodeEnd = base + (el.endIndex == null ? off - base : el.endIndex) + 1; // exclusive
       text = renderText(pos, off, nodeEnd, opts);
     }
     // grep-style: a `file:` prefix appears with multiple files; the line:col
@@ -1196,7 +1286,7 @@ function searchFiles(opts, files, out) {
       }
       continue;
     }
-    total += searchSource(buf.toString('utf8'), f, showLabel, opts, out, room());
+    total += searchSource(buf.toString('utf8'), f, showLabel, opts, out, room(), isEmbeddedPath(f));
     if (opts.quiet && total > 0) break;   // -q: first match decides the status
   }
   return total;

package/lib.js

@@ -115,6 +115,120 @@ function retarget(nodes, opts) {
   return result;
 }
 
+// --- embedded HTML (JS/TS template literals) -----------------------------------
+
+// Replace every char except line breaks with a space: masked text has the
+// same length AND the same line structure as the original, so offsets and
+// the host file's line index stay valid.
+const maskWs = s => s.replace(/[^\n\r]/g, ' ');
+
+// Skip a '...' or "..." string; `i` is at the opening quote. Returns the
+// index just past the closing quote (or line end / EOF for unterminated).
+function skipJsString(src, i) {
+  const quote = src[i++];
+  while (i < src.length) {
+    const c = src[i];
+    if (c === '\\') { i += 2; continue; }
+    if (c === quote) return i + 1;
+    if (c === '\n') return i;              // unterminated: resync at newline
+    i++;
+  }
+  return i;
+}
+
+// Skip code until the '}' that closes a template hole (depth-balanced),
+// recursing into strings, comments and nested template literals — a nested
+// literal contributes its own fragments. `i` is just past '${'.
+function skipJsCode(src, i, fragments) {
+  let depth = 0;
+  while (i < src.length) {
+    const c = src[i];
+    if (c === "'" || c === '"') { i = skipJsString(src, i); continue; }
+    if (c === '`') { i = readTemplate(src, i, fragments); continue; }
+    if (c === '/' && src[i + 1] === '/') {
+      const nl = src.indexOf('\n', i);
+      if (nl === -1) return src.length;
+      i = nl + 1;
+      continue;
+    }
+    if (c === '/' && src[i + 1] === '*') {
+      const end = src.indexOf('*/', i + 2);
+      if (end === -1) return src.length;
+      i = end + 2;
+      continue;
+    }
+    if (c === '{') depth++;
+    else if (c === '}') {
+      if (depth === 0) return i + 1;
+      depth--;
+    }
+    i++;
+  }
+  return i;
+}
+
+// Read one template literal; `i` is at the opening backtick. Masks every
+// `${…}` hole to same-length whitespace and, when the masked content sniffs
+// as markup (`<` + letter, or `<!`), records it as a fragment. Returns the
+// index just past the closing backtick. Nested literals inside holes are
+// processed first, so their fragments are collected too.
+function readTemplate(src, i, fragments) {
+  const contentStart = ++i;
+  const holes = [];
+  while (i < src.length) {
+    const c = src[i];
+    if (c === '\\') { i += 2; continue; }
+    if (c === '`') break;
+    if (c === '$' && src[i + 1] === '{') {
+      const holeStart = i;
+      i = skipJsCode(src, i + 2, fragments);
+      holes.push([holeStart, i]);
+      continue;
+    }
+    i++;
+  }
+  const contentEnd = Math.min(i, src.length);
+  let masked = src.slice(contentStart, contentEnd);
+  for (const [hs, he] of holes) {
+    const a = hs - contentStart;
+    const b = Math.min(he, contentEnd) - contentStart;
+    masked = masked.slice(0, a) + maskWs(masked.slice(a, b)) + masked.slice(b);
+  }
+  if (/<[a-zA-Z!]/.test(masked)) fragments.push({ start: contentStart, masked });
+  return contentEnd + 1;
+}
+
+// Scan JS/TS source for template literals whose content looks like markup.
+// Returns fragments of { start, masked }: `start` is the host-file offset of
+// the literal's content, `masked` its text with `${…}` holes blanked to
+// same-length whitespace — so every fragment offset IS a host offset.
+// String, template and comment contexts are tracked; regex literals are not
+// (a backtick inside a regex could mislead the scan — rare, and a mislead
+// degrades to "no fragment", never to wrong positions of what is found).
+function extractHtmlFragments(src) {
+  const fragments = [];
+  let i = 0;
+  while (i < src.length) {
+    const c = src[i];
+    if (c === "'" || c === '"') { i = skipJsString(src, i); continue; }
+    if (c === '`') { i = readTemplate(src, i, fragments); continue; }
+    if (c === '/' && src[i + 1] === '/') {
+      const nl = src.indexOf('\n', i);
+      if (nl === -1) break;
+      i = nl + 1;
+      continue;
+    }
+    if (c === '/' && src[i + 1] === '*') {
+      const end = src.indexOf('*/', i + 2);
+      if (end === -1) break;
+      i = end + 2;
+      continue;
+    }
+    i++;
+  }
+  return fragments;
+}
+
 // --- rewrite machinery --------------------------------------------------------
 
 // Lex one opening tag starting at `start` (which must point at its `<`).
@@ -408,6 +522,8 @@ function parse(html) {
 module.exports = {
   parse,
   // Internal helpers, shared with cli.js; not part of the stable API.
+  extractHtmlFragments,
+  lexOpenTag,
   lineIndex,
   offsetToPosition,
   lineTextAt,

package/man/cssgrep.1

@@ -1,6 +1,6 @@
 .\" Man page for cssgrep. Keep the OPTIONS section in sync with the USAGE
 .\" string in cli.js.
-.TH CSSGREP 1 "2026-07-12" "cssgrep 1.5.0" "User Commands"
+.TH CSSGREP 1 "2026-07-12" "cssgrep 1.7.0" "User Commands"
 .SH NAME
 cssgrep \- search HTML by CSS selector, grep-style
 .SH SYNOPSIS
@@ -144,7 +144,9 @@ and
 .BR \-p .
 .TP
 .BR \-p ", " \-\-print
-Pretty-print the matched node's HTML, re-indented from scratch. No
+Pretty-print the matched node's HTML, re-indented from scratch and
+syntax-highlighted when color is on (tag names, attribute names and values,
+comments). No
 .IR line : col
 locator is shown.
 .TP
@@ -271,6 +273,28 @@ Globs for
 support
 .BR * " (within a path segment), " ** " (across " / ),
 .BR ? " (one non-slash char), and brace alternation like " *.{html,htm} .
+.SH EMBEDDED HTML
+Files with JS/TS extensions
+.RB ( .js ", " .mjs ", " .cjs ", " .jsx ", " .ts ", " .mts ", " .cts ", " .tsx )
+are searched for HTML inside template literals: every backtick literal whose
+content looks like markup is parsed as its own document, and each
+.RI \(dq${ expr }\(dq
+interpolation is masked to same-length whitespace, so match locators point
+directly into the host file. Printed lines and
+.BR \-\-json 's
+.I html
+field show the original source with interpolations visible; selector
+matching sees holes as whitespace (so
+.I class=\(dq${cls} card\(dq
+matches
+.IR .card ).
+Fragments parse independently \(em an unclosed tag in one literal never
+swallows the next. With
+.BR \-r ,
+add the extensions via
+.BR "\-\-ext js,ts" .
+JSX is not extracted (it is not HTML), and the rewrite operations treat these
+files as plain HTML.
 .SH WATCH MODE
 .TP
 .B \-\-watch

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cssgrep",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "Search HTML by CSS selector and print matches grep-style (file:line:col with -n).",
   "main": "lib.js",
   "types": "index.d.ts",