feat: ignore <style> tag content in markdown (#3)

## Summary

- Ignore `<style>` nodes during Markdown serialization so CSS content is
omitted from SSG-MD output.
- Add a regression test for `<style>` handling.
- Document `<style>` behavior in the supported elements table.

## Testing

- `pnpm test`
- `pnpm exec biome check .`
- `pnpm build`

Author: SoonIter

README.md

@@ -112,6 +112,7 @@ For languages that may contain triple backticks (like `markdown`, `mdx`, `md`),
 | `<blockquote>` | `> blockquote` |
 | `<br>` | Line break |
 | `<hr>` | `---` horizontal rule |
+| `<style>` | Ignored |
 | `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>` | GFM table |
 
 Any unrecognized elements (e.g. `<div>`, `<span>`, `<section>`) render their children as-is, acting as transparent wrappers.

src/react/render.test.tsx

@@ -260,6 +260,28 @@ console.log('Hello, world!');
 });
 
 describe('renderToMarkdownString - styles', () => {
+  it('ignores style tag content', async () => {
+    expect(
+      await renderToMarkdownString(
+        <div>
+          <h1>Title</h1>
+          <style>{`
+            .rspress-doc {
+              color: red;
+            }
+          `}</style>
+          <p>Content</p>
+        </div>,
+      ),
+    ).toMatchInlineSnapshot(`
+      "# Title
+
+      Content
+
+      "
+    `);
+  });
+
   it('renders two row correctly', async () => {
     const Comp1 = () => {
       return (

src/react/render.ts

@@ -99,46 +99,47 @@ function toMarkdown(root: MarkdownNode): string {
   const { type, props, children } = root;
 
   // Get children's Markdown
-  const childrenMd = children
-    .map((child) => {
-      if (child instanceof TextNode) {
-        return child.text;
-      }
-      return toMarkdown(child);
-    })
-    .join('');
+  const childrenMd = () =>
+    children
+      .map((child) => {
+        if (child instanceof TextNode) {
+          return child.text;
+        }
+        return toMarkdown(child);
+      })
+      .join('');
 
   // Generate corresponding Markdown based on element type
   switch (type) {
     case 'root':
-      return childrenMd;
+      return childrenMd();
     case 'h1':
-      return `# ${childrenMd}\n\n`;
+      return `# ${childrenMd()}\n\n`;
     case 'h2':
-      return `## ${childrenMd}\n\n`;
+      return `## ${childrenMd()}\n\n`;
     case 'h3':
-      return `### ${childrenMd}\n\n`;
+      return `### ${childrenMd()}\n\n`;
     case 'h4':
-      return `#### ${childrenMd}\n\n`;
+      return `#### ${childrenMd()}\n\n`;
     case 'h5':
-      return `##### ${childrenMd}\n\n`;
+      return `##### ${childrenMd()}\n\n`;
     case 'h6':
-      return `###### ${childrenMd}\n\n`;
+      return `###### ${childrenMd()}\n\n`;
     case 'p':
-      return `${childrenMd}\n\n`;
+      return `${childrenMd()}\n\n`;
     case 'strong':
     case 'b':
-      return `**${childrenMd}**`;
+      return `**${childrenMd()}**`;
     case 'em':
     case 'i':
-      return `*${childrenMd}*`;
+      return `*${childrenMd()}*`;
     case 'code':
       // When <code> is nested inside <pre>, it represents the code block body,
       // so we must not wrap it with inline backticks (would create nested fences).
       if (root.parent?.type === 'pre') {
-        return childrenMd;
+        return childrenMd();
       }
-      return `\`${childrenMd}\``;
+      return `\`${childrenMd()}\``;
     case 'pre': {
       const _language =
         props['data-lang'] || props.language || props.lang || '';
@@ -149,33 +150,35 @@ function toMarkdown(root: MarkdownNode): string {
         ? '````'
         : '```';
 
-      return `\n${block}${language}${title ? ` title=${title}` : ''}\n${childrenMd}\n${block}\n`;
+      return `\n${block}${language}${title ? ` title=${title}` : ''}\n${childrenMd()}\n${block}\n`;
     }
     case 'a':
-      return `[${childrenMd}](${props.href || '#'})`;
+      return `[${childrenMd()}](${props.href || '#'})`;
     case 'img':
       return `![${props.alt || ''}](${props.src || ''})`;
     case 'ul':
-      return `${childrenMd}\n`;
+      return `${childrenMd()}\n`;
     case 'ol':
-      return `${childrenMd}\n`;
+      return `${childrenMd()}\n`;
     case 'li': {
       const isOrdered = root.parent && root.parent.type === 'ol';
       const prefix = isOrdered ? '1. ' : '- ';
-      return `${prefix}${childrenMd}\n`;
+      return `${prefix}${childrenMd()}\n`;
     }
     case 'blockquote':
-      return `> ${childrenMd.split('\n').join('\n> ')}\n\n`;
+      return `> ${childrenMd().split('\n').join('\n> ')}\n\n`;
     case 'br':
       return '\n';
     case 'hr':
       return '---\n\n';
+    case 'style':
+      return '';
     case 'table':
-      return `${childrenMd}\n`;
+      return `${childrenMd()}\n`;
     case 'thead':
-      return childrenMd;
+      return childrenMd();
     case 'tbody':
-      return childrenMd;
+      return childrenMd();
     case 'tr': {
       const cells = children
         .filter((child): child is MarkdownNode => child instanceof MarkdownNode)
@@ -191,9 +194,9 @@ function toMarkdown(root: MarkdownNode): string {
     }
     case 'th':
     case 'td':
-      return childrenMd;
+      return childrenMd();
     default:
-      return childrenMd;
+      return childrenMd();
   }
 }