hazo_blog 0.3.0 → 0.3.3

package/CHANGE_LOG.md

@@ -3,6 +3,26 @@
 All notable changes are documented here. This project follows
 [Semantic Versioning](https://semver.org/).
 
+## 0.3.3 — 2026-07-06
+
+**`sanitizeMdx` hardened against raw WordPress HTML**
+
+Extends the sanitizer beyond HTML comments to cover three more parser-breaking patterns commonly
+found in imported WordPress post bodies. All run on the code-masked string, so fenced/inline code
+spans stay byte-for-byte untouched, and the transform remains idempotent.
+
+- **`<script>` / `<style>` blocks** — dropped entirely. Their bodies (JSON-LD, inline CSS) contain
+  raw `{ }` that MDX parses as a JS expression, throwing "Could not parse expression with acorn".
+  They carry no visible prose, so removing them never changes rendered output.
+- **HTML void elements** (`<img>`, `<br>`, `<hr>`, `<input>`, …) — normalized to self-closing
+  (`<img src="x" />`). Un-self-closed voids throw "Expected a closing tag" in MDX/JSX.
+- **String-valued `style="..."` / `style='...'` attributes** — dropped. Valid HTML but invalid JSX
+  (React requires the object form `style={{...}}`), else "The style prop expects a mapping … not a
+  string" at render. The JSX object form is deliberately left untouched.
+
+No API change — same `sanitizeMdx(mdx: string): string` signature. **Consumer note:** `^0.3.0`
+resolves to `0.3.3` (caret allows patch/minor within the same pre-1.0 minor).
+
 ## 0.3.0 — 2026-06-12
 
 **Build resilience: sanitizer + async try/catch guard against malformed MDX**

package/README.md

@@ -208,9 +208,14 @@ const nextConfig = {
 
 `BlogContent` (≥ 0.3.0) is an async server component that catches MDX compilation errors with
 `try/catch`, so a single malformed post renders a graceful fallback instead of failing the whole
-`next build`. It also pre-sanitizes content with `sanitizeMdx` (converts HTML comments → MDX
-comments, escapes stray `<!`) before passing it to the compiler. The sanitizer is also available
-as a standalone export from `hazo_blog/lib` for custom rendering pipelines.
+`next build`. It also pre-sanitizes content with `sanitizeMdx` before passing it to the compiler.
+The sanitizer fixes the common ways raw WordPress HTML trips the MDX/acorn parser: converts HTML
+comments → MDX comments (and escapes stray `<!`), strips `<script>`/`<style>` blocks whose bodies
+break parsing, self-closes HTML void elements (`<img>`, `<br>`, …), and drops string-valued
+`style="..."` attributes (invalid JSX; the object form `style={{...}}` is left untouched). Fenced
+and inline code spans are left byte-for-byte untouched, and the transform is idempotent. The
+sanitizer is also available as a standalone export from `hazo_blog/lib` for custom rendering
+pipelines.
 
 ## Exports
 

package/dist/lib/text.d.ts

@@ -23,13 +23,33 @@ export interface TocHeading {
 }
 export declare function extractToc(mdx: string): TocHeading[];
 /**
- * Make raw MDX safe to compile. MDX has no HTML comments — a `<!--` in prose
- * makes the parser expect a JSX tag name after `<` and throw "Unexpected
- * character `!` before name", crashing the whole Next build at prerender.
- * Convert HTML comments to MDX comments ({/*…*\/}, equally non-rendering) and
- * escape any stray `<!`, while leaving fenced/inline code untouched (it is
- * literal in MDX, never errors, and may legitimately show an HTML comment in a
- * sample). Idempotent: after one pass no literal `<!` survives in prose.
+ * Make raw MDX safe to compile. Raw WordPress HTML stored as post content
+ * trips the MDX/acorn parser in a handful of unambiguously-fixable ways:
+ *
+ * 1. HTML comments — MDX has none, so a bare `<!--` makes the parser expect
+ *    a JSX tag name after `<` and throw "Unexpected character `!` before
+ *    name". Converted to MDX comments ({/*…*\/}, equally non-rendering).
+ * 2. `<script>`/`<style>` blocks — their bodies (JSON-LD, inline CSS)
+ *    contain raw `{ }` that MDX parses as a JS expression, throwing "Could
+ *    not parse expression with acorn". They carry no visible prose (SEO
+ *    metadata / global CSS handle those concerns elsewhere), so dropping the
+ *    whole block is safe and never changes rendered output.
+ * 3. HTML void elements (`<img>`, `<br>`, …) written un-self-closed — MDX/JSX
+ *    requires them self-closed; `<img src="x">` alone throws "Expected a
+ *    closing tag". Normalized to `<img src="x" />` regardless of whether a
+ *    stray slash was already present.
+ * 4. String-valued `style="..."` / `style='...'` attributes — valid HTML but
+ *    invalid JSX/MDX (React requires `style={{...}}`, an object, never a
+ *    string); left alone, they compile fine but throw "The style prop
+ *    expects a mapping ... not a string" at render time. Always broken, so
+ *    the attribute is dropped outright. Only the quoted-string form is
+ *    matched (`style="`/`style='`) — the legitimate JSX object form
+ *    (`style={{...}}`) never matches and is left untouched.
+ *
+ * All four run on the code-MASKED string, so fenced/inline code spans are
+ * left byte-for-byte untouched (they are literal in MDX, never error, and
+ * may legitimately show a comment, a `<script>` sample, or a bare `<img>` in
+ * a code sample). Idempotent: running this twice yields the same output.
  */
 export declare function sanitizeMdx(mdx: string): string;
 //# sourceMappingURL=text.d.ts.map

package/dist/lib/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/lib/text.ts"],"names":[],"mappings":"AAGA,6CAA6C;AAC7C,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAS7C;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAalD;AAED,0CAA0C;AAC1C,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI/C;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,MAAM,EAAE,cAAc,SAAM,GAAG,MAAM,CAG9E;AAED,qFAAqF;AACrF,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,SAAM,GAAG,MAAM,CAMhE;AAED,qFAAqF;AACrF,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,EAAE,CAYpD;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAkB/C"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/lib/text.ts"],"names":[],"mappings":"AAGA,6CAA6C;AAC7C,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAS7C;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAalD;AAED,0CAA0C;AAC1C,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI/C;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,MAAM,EAAE,cAAc,SAAM,GAAG,MAAM,CAG9E;AAED,qFAAqF;AACrF,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,SAAM,GAAG,MAAM,CAMhE;AAED,qFAAqF;AACrF,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,EAAE,CAYpD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CA+B/C"}

package/dist/lib/text.js

@@ -68,13 +68,33 @@ export function extractToc(mdx) {
     return headings;
 }
 /**
- * Make raw MDX safe to compile. MDX has no HTML comments — a `<!--` in prose
- * makes the parser expect a JSX tag name after `<` and throw "Unexpected
- * character `!` before name", crashing the whole Next build at prerender.
- * Convert HTML comments to MDX comments ({/*…*\/}, equally non-rendering) and
- * escape any stray `<!`, while leaving fenced/inline code untouched (it is
- * literal in MDX, never errors, and may legitimately show an HTML comment in a
- * sample). Idempotent: after one pass no literal `<!` survives in prose.
+ * Make raw MDX safe to compile. Raw WordPress HTML stored as post content
+ * trips the MDX/acorn parser in a handful of unambiguously-fixable ways:
+ *
+ * 1. HTML comments — MDX has none, so a bare `<!--` makes the parser expect
+ *    a JSX tag name after `<` and throw "Unexpected character `!` before
+ *    name". Converted to MDX comments ({/*…*\/}, equally non-rendering).
+ * 2. `<script>`/`<style>` blocks — their bodies (JSON-LD, inline CSS)
+ *    contain raw `{ }` that MDX parses as a JS expression, throwing "Could
+ *    not parse expression with acorn". They carry no visible prose (SEO
+ *    metadata / global CSS handle those concerns elsewhere), so dropping the
+ *    whole block is safe and never changes rendered output.
+ * 3. HTML void elements (`<img>`, `<br>`, …) written un-self-closed — MDX/JSX
+ *    requires them self-closed; `<img src="x">` alone throws "Expected a
+ *    closing tag". Normalized to `<img src="x" />` regardless of whether a
+ *    stray slash was already present.
+ * 4. String-valued `style="..."` / `style='...'` attributes — valid HTML but
+ *    invalid JSX/MDX (React requires `style={{...}}`, an object, never a
+ *    string); left alone, they compile fine but throw "The style prop
+ *    expects a mapping ... not a string" at render time. Always broken, so
+ *    the attribute is dropped outright. Only the quoted-string form is
+ *    matched (`style="`/`style='`) — the legitimate JSX object form
+ *    (`style={{...}}`) never matches and is left untouched.
+ *
+ * All four run on the code-MASKED string, so fenced/inline code spans are
+ * left byte-for-byte untouched (they are literal in MDX, never error, and
+ * may legitimately show a comment, a `<script>` sample, or a bare `<img>` in
+ * a code sample). Idempotent: running this twice yields the same output.
  */
 export function sanitizeMdx(mdx) {
     const stash = [];
@@ -90,8 +110,18 @@ export function sanitizeMdx(mdx) {
         .replace(/~~~[\s\S]*?~~~/g, keep)
         .replace(/`[^`\n]*`/g, keep);
     masked = masked
+        // Strip <script>/<style> blocks entirely — see rationale above.
+        .replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "")
+        .replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, "")
         // Comment body: neutralize any `*/` so it can't close the MDX comment early.
         .replace(/<!--([\s\S]*?)-->/g, (_, body) => `{/*${body.replace(/\*\//g, "* /")}*/}`)
-        .replace(/<!(?!--)/g, "&lt;!");
+        .replace(/<!(?!--)/g, "&lt;!")
+        // Strip string-valued `style="..."` attributes — see rationale above.
+        // Deliberately does NOT match `style={` (the valid JSX object form).
+        .replace(/\sstyle=("[^"]*"|'[^']*')/gi, "")
+        // Self-close HTML void elements — see rationale above. Emits `/>`
+        // whether or not a slash was already present, so a second pass is a
+        // no-op (idempotent).
+        .replace(/<(img|br|hr|input|source|meta|link|col|area|base|embed|param|track|wbr)\b([^>]*?)\s*\/?>/gi, "<$1$2 />");
     return masked.replace(/(\d+)/g, (_, i) => stash[Number(i)]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hazo_blog",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "description": "SEO-optimized blogging package: posts, categories, tags, MDX content, and GA4/GSC/Bing-ready SEO.",
   "type": "module",
   "module": "./dist/index.js",
@@ -44,14 +44,14 @@
     "build:test-app": "npm run build && cd test-app && npm run build"
   },
   "peerDependencies": {
-    "hazo_core": "^1.2.0",
+    "hazo_core": "^1.2.1",
     "hazo_connect": "^3.9.0",
-    "hazo_api": "^2.4.0",
-    "hazo_files": "^3.1.0",
-    "hazo_ui": "^4.6.2",
-    "hazo_images": "^1.2.1",
-    "hazo_jobs": "^0.12.0",
-    "hazo_auth": "^10.0.0",
+    "hazo_api": "^2.5.1",
+    "hazo_files": "^3.1.1",
+    "hazo_ui": "^4.8.0",
+    "hazo_images": "^1.7.0",
+    "hazo_jobs": "^0.14.0",
+    "hazo_auth": "^10.5.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "next": "^14.0.0 || ^16.0.0"
@@ -87,7 +87,7 @@
     "hazo_connect": "^3.9.0",
     "hazo_api": "^2.5.1",
     "hazo_files": "^3.1.1",
-    "hazo_ui": "^4.7.0",
+    "hazo_ui": "^4.8.0",
     "tailwindcss": "^4.2.4",
     "@tailwindcss/postcss": "^4.2.4",
     "postcss": "^8.4.49"