Update CSS, add vite ignore flags to dynamic imports

.changeset/nervous-cups-switch.md

@@ -0,0 +1,5 @@
+---
+"@studiocms/markdown-remark": patch
+---
+
+Update CSS and add flags to prevent vite dynamic import warnings

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 .",

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;
-	}
-}

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;
 }

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;
 }

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>`);
 		});
 	});
 });

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"
   },

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>

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>
+<Layout title="Basic Render">
+    {html}
+</Layout>

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>
+<Layout title="Basic">
+    <Markdown content={content} />
+</Layout>

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.

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>
+<Layout title="Direct">
+    {content.html}
+</Layout>

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>

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>
+<Layout title="Syntax Test">
+    <Markdown content={content} />
+</Layout>