Allow use of Markdown in description and notes

package.json

@@ -63,6 +63,7 @@
     "husky": "^8.0.1",
     "json-schema-to-typescript": "~13.1.0",
     "lint-staged": "^15.0.1",
+    "marked": "^11.0.0",
     "mocha": "~10.2.0",
     "open-cli": "~7.2.0",
     "ora": "~7.0.1",

scripts/release/build.ts

@@ -5,6 +5,7 @@ import fs from 'node:fs/promises';
 
 import esMain from 'es-main';
 import stringify from 'fast-json-stable-stringify';
+import { marked } from 'marked';
 
 import { InternalSupportStatement } from '../../types/index.js';
 import { BrowserName, CompatData } from '../../types/types.js';
@@ -34,6 +35,18 @@ export const generateMeta = (): any => ({
   timestamp: new Date(),
 });
 
+/**
+ * Converts Markdown to HTML and sanitizes output
+ * @param {string | string[]} markdown The Markdown to convert
+ * @returns {string | string[]} The HTML output
+ */
+const mdToHtml = (markdown: string): string => {
+  // "as string" cast because TS thinks response could be a promise
+  return (marked.parseInline(markdown) as string)
+    .replace(/'/g, "'")
+    .replace(/"/g, '"');
+};
+
 /**
  * Apply mirroring to a feature
  * @param {WalkOutput} feature The BCD to perform mirroring on
@@ -52,6 +65,44 @@ export const applyMirroring = (feature: WalkOutput): void => {
   }
 };
 
+/**
+ * Convert descriptions and notes from Markdown to HTML
+ * @param {WalkOutput} feature The BCD to perform mirroring on
+ * @returns {void}
+ */
+export const transformMD = (feature: WalkOutput): void => {
+  if ('description' in feature.data.__compat) {
+    feature.data.__compat.description = mdToHtml(
+      feature.data.__compat.description,
+    );
+  }
+
+  for (const [browser, supportData] of Object.entries(
+    feature.compat.support as InternalSupportStatement,
+  )) {
+    if (!supportData) continue;
+
+    if (Array.isArray(supportData)) {
+      for (let i = 0; i < supportData.length; i++) {
+        if ('notes' in supportData[i]) {
+          (feature.data as any).__compat.support[browser][i].notes =
+            Array.isArray(supportData[i].notes)
+              ? supportData[i].notes.map((md) => mdToHtml(md))
+              : mdToHtml(supportData[i].notes);
+        }
+      }
+    } else if (typeof supportData === 'object') {
+      if ('notes' in supportData) {
+        (feature.data as any).__compat.support[browser].notes = Array.isArray(
+          (supportData as any).notes,
+        )
+          ? (supportData as any).notes.map((md) => mdToHtml(md))
+          : mdToHtml((supportData as any).notes);
+      }
+    }
+  }
+};
+
 /**
  * Generate a BCD data bundle
  * @returns {CompatData} An object containing the prepared BCD data
@@ -64,6 +115,7 @@ export const createDataBundle = async (): Promise<CompatData> => {
 
   for (const feature of walker) {
     applyMirroring(feature);
+    transformMD(feature);
   }
 
   return {

test/linter/test-notes.ts

@@ -3,6 +3,7 @@
 
 import chalk from 'chalk-template';
 import HTMLParser from '@desertnet/html-parser';
+import { marked } from 'marked';
 
 import { Linter, Logger, LinterData, VALID_ELEMENTS } from '../utils.js';
 import {
@@ -74,7 +75,8 @@ const validateHTML = (
   feature: string,
   logger: Logger,
 ): void => {
-  const htmlErrors = HTMLParser.validate(string);
+  const html = marked.parseInline(string);
+  const htmlErrors = HTMLParser.validate(html);
 
   if (htmlErrors.length === 0) {
     // If HTML is valid, ensure we're only using valid elements