cssgrep 1.6.0 → 1.8.0

package/CHANGELOG.md

@@ -7,6 +7,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.8.0] - 2026-07-13
+
+### Changed
+- The `-n` locator is now colon-separated from the text —
+  `file:line:col:text` instead of `file:line:col text` — matching grep's
+  separator and making the output byte-compatible with `rg --vimgrep`. Vim
+  users can use the standard `grepformat=%f:%l:%c:%m` (docs updated); scripts
+  parsing the old space-separated form need the one-character change.
+
+## [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
@@ -144,7 +161,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.6.0...HEAD
+[Unreleased]: https://github.com/msbatarce/cssgrep/compare/v1.8.0...HEAD
+[1.8.0]: https://github.com/msbatarce/cssgrep/compare/v1.7.0...v1.8.0
+[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

package/README.md

@@ -63,14 +63,15 @@ cat page.html | cssgrep <selector> # read from stdin
 
 Like `grep`, each matching line is printed on its own, once — however many
 matches sit on it. With `-n` there is one record *per match*, each with its
-own `line:col` locator (that per-match precision is the point of the tool). A
+own `line:col` locator (that per-match precision is the point of the tool),
+colon-separated from the text — byte-compatible with `rg --vimgrep`. A
 `file:` prefix is added when searching multiple files:
 
 ```
 {line contents}                         # default; stdin or single file
 {file}:{line contents}                  # default; multiple files
-{line}:{col} {line contents}            # -n; stdin or single file
-{file}:{line}:{col} {line contents}     # -n; multiple files
+{line}:{col}:{line contents}            # -n; stdin or single file
+{file}:{line}:{col}:{line contents}     # -n; multiple files
 ```
 
 ### Options
@@ -87,7 +88,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 +133,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`.
@@ -322,12 +325,13 @@ message pointing back to these recipes, rather than a bare "unknown option".
 
 ## Vim / Neovim integration
 
-The `file:line:col text` format produced by `-n` is `:grep`-compatible. Point
+The `file:line:col:text` format produced by `-n` is byte-compatible with
+`rg --vimgrep`, so the standard ripgrep `grepformat` works as-is. Point
 `grepprg` at `cssgrep -n -r` and hits land in the quickfix list:
 
 ```vim
 set grepprg=cssgrep\ -n\ -r
-set grepformat=%f:%l:%c\ %m
+set grepformat=%f:%l:%c:%m
 
 " :grep 'div.card' src/   then  :copen
 ```

package/cli.js

@@ -4,8 +4,8 @@
 const fs = require('fs');
 const path = require('path');
 const {
-  parse, extractHtmlFragments, lineIndex, 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
@@ -29,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.6.0';
+const VERSION = '1.8.0';
 
 const USAGE = `cssgrep - search HTML by CSS selector, grep-style.
 
@@ -39,11 +39,12 @@ Usage:
   cssgrep -e '[label=]<sel>' [-e ...] [file ...]
   cat file.html | cssgrep <selector>
 
-Output (each matching line once, like grep; with -n, one record per match):
+Output (each matching line once, like grep; with -n, one record per match,
+byte-compatible with rg --vimgrep):
   {line contents}                           (default; stdin or single file)
   {file}:{line contents}                    (default; multiple files)
-  {line}:{col} {line contents}              (with -n; stdin or single file)
-  {file}:{line}:{col} {line contents}       (with -n; multiple files)
+  {line}:{col}:{line contents}              (with -n; stdin or single file)
+  {file}:{line}:{col}:{line contents}       (with -n; multiple files)
 
 Options:
   -e, --selector <[label=]sel>   Add a selector (repeatable). Matches from all
@@ -60,7 +61,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,
@@ -137,12 +139,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) {
@@ -386,9 +395,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;
 }
@@ -467,14 +475,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.
@@ -504,13 +561,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
@@ -581,7 +648,7 @@ function emitContext(src, starts, name, showLabel, targets, opts, out) {
       if (label) prefix += c(COLORS.file, label) + (opts.nul ? '\0' : sepColored);
       if (opts.lineNumber) {
         prefix += c(COLORS.line, String(L));
-        prefix += m ? c(COLORS.sep, ':') + c(COLORS.line, String(m.pos.bcol)) + ' '
+        prefix += m ? c(COLORS.sep, ':') + c(COLORS.line, String(m.pos.bcol)) + c(COLORS.sep, ':')
                     : c(COLORS.sep, '-');
       }
       const tag = m && m.selLabel != null ? c(COLORS.label, `[${m.selLabel}]`) + ' ' : '';
@@ -755,8 +822,8 @@ function searchSource(src, name, showLabel, opts, out, limit = Infinity, embedde
       text = renderText(pos, off, nodeEnd, opts);
     }
     // grep-style: a `file:` prefix appears with multiple files; the line:col
-    // locator only with -n. The locator is separated from the text by a space
-    // so the output stays :grep-compatible (grepformat %f:%l:%c %m).
+    // locator only with -n, colon-separated from the text — byte-compatible
+    // with `rg --vimgrep` (grepformat %f:%l:%c:%m).
     const sep = c(COLORS.sep, ':');
     // -0/--null: the char after the file name becomes NUL (grep -Z), for
     // unambiguous machine parsing (e.g. xargs -0).
@@ -764,7 +831,7 @@ function searchSource(src, name, showLabel, opts, out, limit = Infinity, embedde
     let prefix = '';
     if (label) prefix += c(COLORS.file, label) + fileSep;
     if (opts.lineNumber) {
-      prefix += c(COLORS.line, String(pos.line)) + sep + c(COLORS.line, String(pos.bcol)) + ' ';
+      prefix += c(COLORS.line, String(pos.line)) + sep + c(COLORS.line, String(pos.bcol)) + sep;
     }
     out.push(prefix + tag + text);
     emitted++;

package/lib.js

@@ -523,6 +523,7 @@ 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.6.0" "User Commands"
+.TH CSSGREP 1 "2026-07-13" "cssgrep 1.8.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
@@ -441,7 +443,7 @@ locator:
 .RS
 .nf
 set grepprg=cssgrep\e \-n\e \-r
-set grepformat=%f:%l:%c\e %m
+set grepformat=%f:%l:%c:%m
 .fi
 .RE
 .SH SEE ALSO

package/package.json

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