From a4916284fb846dd1eb1cf93264d119e3f37f52a9 Mon Sep 17 00:00:00 2001
From: Adam Matthiesen <amatthiesen@outlook.com>
Date: Sun, 5 Jan 2025 01:31:44 -0800
Subject: [PATCH 1/2] Update CSS, add vite ignore flags to imports and make the
 test fixture usable for dev instead of including a playground

---
 .changeset/nervous-cups-switch.md               |  5 +++++
 package.json                                    |  3 ++-
 packages/markdown-remark/assets/headings.css    |  4 ++--
 .../src/processor/import-plugin-browser.ts      |  2 +-
 .../src/processor/import-plugin-default.ts      |  4 ++--
 .../tests/astro-integration.test.ts             |  5 +++--
 .../tests/fixture/astro/package.json            |  1 +
 .../fixture/astro/src/layouts/layout.astro      | 17 +++++++++++++++++
 .../astro/src/pages/basic-render/index.astro    | 14 ++++----------
 .../fixture/astro/src/pages/basic/index.astro   | 14 ++++----------
 .../fixture/astro/src/pages/direct/_md/md.txt   |  3 +++
 .../fixture/astro/src/pages/direct/index.astro  | 17 ++++++-----------
 .../tests/fixture/astro/src/pages/index.astro   | 11 +++++++++++
 .../fixture/astro/src/pages/syntax/index.astro  | 14 ++++----------
 14 files changed, 65 insertions(+), 49 deletions(-)
 create mode 100644 .changeset/nervous-cups-switch.md
 create mode 100644 packages/markdown-remark/tests/fixture/astro/src/layouts/layout.astro
 create mode 100644 packages/markdown-remark/tests/fixture/astro/src/pages/direct/_md/md.txt
 create mode 100644 packages/markdown-remark/tests/fixture/astro/src/pages/index.astro

diff --git a/.changeset/nervous-cups-switch.md b/.changeset/nervous-cups-switch.md
new file mode 100644
index 0000000..81116be
--- /dev/null
+++ b/.changeset/nervous-cups-switch.md
@@ -0,0 +1,5 @@
+---
+"@studiocms/markdown-remark": patch
+---
+
+Update CSS and add flags to prevent vite dynamic import warnings
diff --git a/package.json b/package.json
index 5bf68f7..add6da3 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     },
     "scripts": {
       "build": "pnpm --filter @studiocms/markdown-remark build",
-      "dev": "pnpm --filter @studiocms/markdown-remark dev",
+      "package:dev": "pnpm --filter @studiocms/markdown-remark dev",
+      "dev": "pnpm --stream --filter @studiocms/markdown-remark --filter @markdown-remark/tests -r -parallel dev",
       "test": "pnpm --filter @studiocms/markdown-remark test",
       "lint": "biome check .",
       "lint:fix": "biome check --write .",
diff --git a/packages/markdown-remark/assets/headings.css b/packages/markdown-remark/assets/headings.css
index 3fa8c21..2acbce8 100644
--- a/packages/markdown-remark/assets/headings.css
+++ b/packages/markdown-remark/assets/headings.css
@@ -54,7 +54,7 @@
 .anchor-link:focus {
 	opacity: 1;
 }
-
+/* 
 @media (min-width: 95em) {
 	.heading-wrapper {
 		display: flex;
@@ -68,4 +68,4 @@
 	.anchor-link {
 		margin: 0;
 	}
-}
+} */
diff --git a/packages/markdown-remark/src/processor/import-plugin-browser.ts b/packages/markdown-remark/src/processor/import-plugin-browser.ts
index 5fb90ad..2a72cea 100644
--- a/packages/markdown-remark/src/processor/import-plugin-browser.ts
+++ b/packages/markdown-remark/src/processor/import-plugin-browser.ts
@@ -3,6 +3,6 @@ import type * as unified from 'unified';
 
 // In the browser, we can try to do a plain import
 export async function importPlugin(p: string): Promise<unified.Plugin> {
-	const importResult = await import(p);
+	const importResult = await import(/* @vite-ignore */ p);
 	return importResult.default;
 }
diff --git a/packages/markdown-remark/src/processor/import-plugin-default.ts b/packages/markdown-remark/src/processor/import-plugin-default.ts
index 1b6778f..2b898aa 100644
--- a/packages/markdown-remark/src/processor/import-plugin-default.ts
+++ b/packages/markdown-remark/src/processor/import-plugin-default.ts
@@ -10,13 +10,13 @@ let cwdUrlStr: string | undefined;
 export async function importPlugin(p: string): Promise<unified.Plugin> {
 	// Try import from this package first
 	try {
-		const importResult = await import(p);
+		const importResult = await import(/* @vite-ignore */ p);
 		return importResult.default;
 	} catch {}
 
 	// Try import from user project
 	cwdUrlStr ??= pathToFileURL(path.join(process.cwd(), 'package.json')).toString();
 	const resolved = importMetaResolve(p, cwdUrlStr);
-	const importResult = await import(resolved);
+	const importResult = await import(/* @vite-ignore */ resolved);
 	return importResult.default;
 }
diff --git a/packages/markdown-remark/tests/astro-integration.test.ts b/packages/markdown-remark/tests/astro-integration.test.ts
index a3df459..4da5598 100644
--- a/packages/markdown-remark/tests/astro-integration.test.ts
+++ b/packages/markdown-remark/tests/astro-integration.test.ts
@@ -36,7 +36,8 @@ describe('Markdown-Remark Astro Integration Tests', () => {
 		const content = await fixture.readFile('direct/index.html');
 
 		expect(content).toContain(
-			`<div tabindex="-1" class="heading-wrapper level-h1"><h1 id="hello-world">Hello World!</h1><a class="anchor-link" href="#hello-world"><span aria-hidden="true" class="anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path></svg></span><span is:raw="" class="sr-only">'Read the “', Hello World!, '” section'</span></a></div>`
+			`<div tabindex="-1" class="heading-wrapper level-h1"><h1 id="hello-world">Hello World!</h1><a class="anchor-link" href="#hello-world"><span aria-hidden="true" class="anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path></svg></span><span is:raw="" class="sr-only">'Read the “', Hello World!, '” section'</span></a></div>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>`
 		);
 	});
 
@@ -152,7 +153,7 @@ describe('Markdown-Remark Astro Integration Tests', () => {
 			expect(
 				content
 			).toContain(`<div tabindex="-1" class="heading-wrapper level-h2"><h2 id="inline-code">Inline code</h2><a class="anchor-link" href="#inline-code"><span aria-hidden="true" class="anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path></svg></span><span is:raw="" class="sr-only">'Read the “', Inline code, '” section'</span></a></div>
-<p>This web site is using <code>@studiocms/markdown-remark</code>.</p> </body></html>`);
+<p>This web site is using <code>@studiocms/markdown-remark</code>.</p>`);
 		});
 	});
 });
diff --git a/packages/markdown-remark/tests/fixture/astro/package.json b/packages/markdown-remark/tests/fixture/astro/package.json
index 8137915..d84e87f 100644
--- a/packages/markdown-remark/tests/fixture/astro/package.json
+++ b/packages/markdown-remark/tests/fixture/astro/package.json
@@ -7,6 +7,7 @@
     "astro": "astro",
     "build": "astro build",
     "preview": "astro preview",
+    "dev": "astro dev",
     "test:dev": "astro dev",
     "test:build": "pnpm build && pnpm preview"
   },
diff --git a/packages/markdown-remark/tests/fixture/astro/src/layouts/layout.astro b/packages/markdown-remark/tests/fixture/astro/src/layouts/layout.astro
new file mode 100644
index 0000000..933a521
--- /dev/null
+++ b/packages/markdown-remark/tests/fixture/astro/src/layouts/layout.astro
@@ -0,0 +1,17 @@
+---
+interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width" />
+        <title>Test - {title}</title>
+    </head>
+    <body>
+        <slot />
+    </body>
+</html>
\ No newline at end of file
diff --git a/packages/markdown-remark/tests/fixture/astro/src/pages/basic-render/index.astro b/packages/markdown-remark/tests/fixture/astro/src/pages/basic-render/index.astro
index 3cb4484..a205291 100644
--- a/packages/markdown-remark/tests/fixture/astro/src/pages/basic-render/index.astro
+++ b/packages/markdown-remark/tests/fixture/astro/src/pages/basic-render/index.astro
@@ -1,16 +1,10 @@
 ---
 import { render } from 'studiocms:markdown-remark';
+import Layout from '../../layouts/layout.astro';
 import content from './_md/md.txt?raw';
 
 const { html } = await render(content);
 ---
-<html>
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width" />
-        <title>Test - Basic</title>
-    </head>
-    <body>
-        {html}
-    </body>
-</html>
\ No newline at end of file
+<Layout title="Basic Render">
+    {html}
+</Layout>
\ No newline at end of file
diff --git a/packages/markdown-remark/tests/fixture/astro/src/pages/basic/index.astro b/packages/markdown-remark/tests/fixture/astro/src/pages/basic/index.astro
index 1fb5633..04eaebc 100644
--- a/packages/markdown-remark/tests/fixture/astro/src/pages/basic/index.astro
+++ b/packages/markdown-remark/tests/fixture/astro/src/pages/basic/index.astro
@@ -1,14 +1,8 @@
 ---
 import { Markdown } from 'studiocms:markdown-remark';
+import Layout from '../../layouts/layout.astro';
 import content from './_md/md.txt?raw';
 ---
-<html>
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width" />
-        <title>Test - Basic</title>
-    </head>
-    <body>
-        <Markdown content={content} />
-    </body>
-</html>
\ No newline at end of file
+<Layout title="Basic">
+    <Markdown content={content} />
+</Layout>
\ No newline at end of file
diff --git a/packages/markdown-remark/tests/fixture/astro/src/pages/direct/_md/md.txt b/packages/markdown-remark/tests/fixture/astro/src/pages/direct/_md/md.txt
new file mode 100644
index 0000000..a8bcef2
--- /dev/null
+++ b/packages/markdown-remark/tests/fixture/astro/src/pages/direct/_md/md.txt
@@ -0,0 +1,3 @@
+# Hello World!
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\ No newline at end of file
diff --git a/packages/markdown-remark/tests/fixture/astro/src/pages/direct/index.astro b/packages/markdown-remark/tests/fixture/astro/src/pages/direct/index.astro
index 1c0eb9a..dbc7ce9 100644
--- a/packages/markdown-remark/tests/fixture/astro/src/pages/direct/index.astro
+++ b/packages/markdown-remark/tests/fixture/astro/src/pages/direct/index.astro
@@ -3,6 +3,8 @@ import {
 	type MarkdownProcessorRenderOptions,
 	createMarkdownProcessor,
 } from '@studiocms/markdown-remark';
+import Layout from '../../layouts/layout.astro';
+import contentRaw from './_md/md.txt?raw';
 
 const processor = await createMarkdownProcessor();
 
@@ -15,15 +17,8 @@ async function render(content: string, options?: MarkdownProcessorRenderOptions)
 	};
 }
 
-const content = await render('# Hello World!');
+const content = await render(contentRaw);
 ---
-<html>
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width" />
-        <title>Test - Basic</title>
-    </head>
-    <body>
-        {content.html}
-    </body>
-</html>
\ No newline at end of file
+<Layout title="Direct">
+    {content.html}
+</Layout>
\ No newline at end of file
diff --git a/packages/markdown-remark/tests/fixture/astro/src/pages/index.astro b/packages/markdown-remark/tests/fixture/astro/src/pages/index.astro
new file mode 100644
index 0000000..8c95593
--- /dev/null
+++ b/packages/markdown-remark/tests/fixture/astro/src/pages/index.astro
@@ -0,0 +1,11 @@
+---
+import Layout from '../layouts/layout.astro';
+---
+<Layout title="List of Current Tests">
+    <ul>
+        <li><a href="/basic">Basic</a></li>
+        <li><a href="/basic-render">Basic Render</a></li>
+        <li><a href="/direct">Direct</a></li>
+        <li><a href="/syntax">Syntax Test</a></li>
+    </ul>
+</Layout>
\ No newline at end of file
diff --git a/packages/markdown-remark/tests/fixture/astro/src/pages/syntax/index.astro b/packages/markdown-remark/tests/fixture/astro/src/pages/syntax/index.astro
index 3284d2f..b8052a2 100644
--- a/packages/markdown-remark/tests/fixture/astro/src/pages/syntax/index.astro
+++ b/packages/markdown-remark/tests/fixture/astro/src/pages/syntax/index.astro
@@ -1,14 +1,8 @@
 ---
 import { Markdown } from 'studiocms:markdown-remark';
+import Layout from '../../layouts/layout.astro';
 import content from './_md/md.txt?raw';
 ---
-<html>
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width" />
-        <title>Test - Syntax Test</title>
-    </head>
-    <body>
-        <Markdown content={content} />
-    </body>
-</html>
\ No newline at end of file
+<Layout title="Syntax Test">
+    <Markdown content={content} />
+</Layout>
\ No newline at end of file

From 1ce31d8209f607eef19d1969cdc8e3f9442b8969 Mon Sep 17 00:00:00 2001
From: Adam Matthiesen <amatthiesen@outlook.com>
Date: Sun, 5 Jan 2025 01:36:25 -0800
Subject: [PATCH 2/2] remove unused css

---
 packages/markdown-remark/assets/headings.css | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/packages/markdown-remark/assets/headings.css b/packages/markdown-remark/assets/headings.css
index 2acbce8..15fcdf5 100644
--- a/packages/markdown-remark/assets/headings.css
+++ b/packages/markdown-remark/assets/headings.css
@@ -54,18 +54,3 @@
 .anchor-link:focus {
 	opacity: 1;
 }
-/* 
-@media (min-width: 95em) {
-	.heading-wrapper {
-		display: flex;
-		flex-direction: row-reverse;
-		justify-content: flex-end;
-		gap: var(--icon-spacing);
-		margin-inline-start: calc(-1 * var(--icon-size) + var(--icon-spacing));
-	}
-
-	.heading-wrapper > :first-child,
-	.anchor-link {
-		margin: 0;
-	}
-} */