@astrojs/mdx 0.18.4 → 0.19.1

package/.turbo/turbo-build.log

@@ -1,5 +1,4 @@
-@astrojs/mdx:build: cache hit, replaying output dc77e5588cbd224c
-@astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.18.4 build /home/runner/work/astro/astro/packages/integrations/mdx
-@astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
-@astrojs/mdx:build: 
+
+> @astrojs/mdx@0.19.1 build /home/runner/work/astro/astro/packages/integrations/mdx
+> astro-scripts build "src/**/*.ts" && tsc
+

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @astrojs/mdx
 
+## 0.19.1
+
+### Patch Changes
+
+- [#6932](https://github.com/withastro/astro/pull/6932) [`49514e4ce`](https://github.com/withastro/astro/commit/49514e4ce40fedb39bf7decd2c296258efbdafc7) Thanks [@bluwy](https://github.com/bluwy)! - Upgrade shiki to v0.14.1. This updates the shiki theme colors and adds the theme name to the `pre` tag, e.g. `<pre class="astro-code github-dark">`.
+
+- Updated dependencies [[`49514e4ce`](https://github.com/withastro/astro/commit/49514e4ce40fedb39bf7decd2c296258efbdafc7)]:
+  - @astrojs/markdown-remark@2.2.0
+
+## 0.19.0
+
+### Minor Changes
+
+- [#6824](https://github.com/withastro/astro/pull/6824) [`2511d58d5`](https://github.com/withastro/astro/commit/2511d58d586af080a78e5ef8a63020b3e17770db) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Add support for using optimized and relative images in MDX files with `experimental.assets`
+
+### Patch Changes
+
+- Updated dependencies [[`2511d58d5`](https://github.com/withastro/astro/commit/2511d58d586af080a78e5ef8a63020b3e17770db)]:
+  - @astrojs/markdown-remark@2.1.4
+
 ## 0.18.4
 
 ### Patch Changes

package/dist/plugins.js

@@ -1,4 +1,4 @@
-import { rehypeHeadingIds } from "@astrojs/markdown-remark";
+import { rehypeHeadingIds, remarkCollectImages } from "@astrojs/markdown-remark";
 import {
   InvalidAstroDataError,
   safelyGetAstroData
@@ -10,6 +10,7 @@ import remarkGfm from "remark-gfm";
 import remarkSmartypants from "remark-smartypants";
 import { rehypeInjectHeadingsExport } from "./rehype-collect-headings.js";
 import rehypeMetaString from "./rehype-meta-string.js";
+import { remarkImageToComponent } from "./remark-images-to-component.js";
 import remarkPrism from "./remark-prism.js";
 import remarkShiki from "./remark-shiki.js";
 import { jsToTreeNode } from "./utils.js";
@@ -77,7 +78,9 @@ function rehypeApplyFrontmatterExport() {
   };
 }
 async function getRemarkPlugins(mdxOptions, config) {
-  let remarkPlugins = [];
+  let remarkPlugins = [
+    ...config.experimental.assets ? [remarkCollectImages, remarkImageToComponent] : []
+  ];
   if (!isPerformanceBenchmark) {
     if (mdxOptions.gfm) {
       remarkPlugins.push(remarkGfm);

package/dist/remark-images-to-component.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdownVFile } from '@astrojs/markdown-remark';
+export declare function remarkImageToComponent(): (tree: any, file: MarkdownVFile) => void;

package/dist/remark-images-to-component.js

@@ -0,0 +1,84 @@
+import { visit } from "unist-util-visit";
+import { jsToTreeNode } from "./utils.js";
+function remarkImageToComponent() {
+  return function(tree, file) {
+    if (!file.data.imagePaths)
+      return;
+    const importsStatements = [];
+    const importedImages = /* @__PURE__ */ new Map();
+    visit(tree, "image", (node, index, parent) => {
+      var _a;
+      if ((_a = file.data.imagePaths) == null ? void 0 : _a.has(node.url)) {
+        let importName = importedImages.get(node.url);
+        if (!importName) {
+          importName = `__${importedImages.size}_${node.url.replace(/\W/g, "_")}__`;
+          importsStatements.push({
+            type: "mdxjsEsm",
+            value: "",
+            data: {
+              estree: {
+                type: "Program",
+                sourceType: "module",
+                body: [
+                  {
+                    type: "ImportDeclaration",
+                    source: { type: "Literal", value: node.url, raw: JSON.stringify(node.url) },
+                    specifiers: [
+                      {
+                        type: "ImportDefaultSpecifier",
+                        local: { type: "Identifier", name: importName }
+                      }
+                    ]
+                  }
+                ]
+              }
+            }
+          });
+          importedImages.set(node.url, importName);
+        }
+        const componentElement = {
+          name: "__AstroImage__",
+          type: "mdxJsxFlowElement",
+          attributes: [
+            {
+              name: "src",
+              type: "mdxJsxAttribute",
+              value: {
+                type: "mdxJsxAttributeValueExpression",
+                value: importName,
+                data: {
+                  estree: {
+                    type: "Program",
+                    sourceType: "module",
+                    comments: [],
+                    body: [
+                      {
+                        type: "ExpressionStatement",
+                        expression: { type: "Identifier", name: importName }
+                      }
+                    ]
+                  }
+                }
+              }
+            },
+            { name: "alt", type: "mdxJsxAttribute", value: node.alt || "" }
+          ],
+          children: []
+        };
+        if (node.title) {
+          componentElement.attributes.push({
+            type: "mdxJsxAttribute",
+            name: "title",
+            value: node.title
+          });
+        }
+        parent.children.splice(index, 1, componentElement);
+      }
+    });
+    tree.children.unshift(...importsStatements);
+    tree.children.unshift(jsToTreeNode(`import { Image as __AstroImage__ } from "astro:assets";`));
+  };
+}
+export {
+  remarkImageToComponent
+};

package/dist/remark-shiki.js

@@ -1,7 +1,24 @@
 import { getHighlighter } from "shiki";
 import { visit } from "unist-util-visit";
 const highlighterCacheAsync = /* @__PURE__ */ new Map();
+const compatThemes = {
+  "material-darker": "material-theme-darker",
+  "material-default": "material-theme",
+  "material-lighter": "material-theme-lighter",
+  "material-ocean": "material-theme-ocean",
+  "material-palenight": "material-theme-palenight"
+};
+const normalizeTheme = (theme) => {
+  if (typeof theme === "string") {
+    return compatThemes[theme] || theme;
+  } else if (compatThemes[theme.name]) {
+    return { ...theme, name: compatThemes[theme.name] };
+  } else {
+    return theme;
+  }
+};
 const remarkShiki = async ({ langs = [], theme = "github-dark", wrap = false }) => {
+  theme = normalizeTheme(theme);
   const cacheID = typeof theme === "string" ? theme : theme.name;
   let highlighterAsync = highlighterCacheAsync.get(cacheID);
   if (!highlighterAsync) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Add support for MDX pages in your Astro site",
-  "version": "0.18.4",
+  "version": "0.19.1",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -23,7 +23,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@astrojs/markdown-remark": "^2.1.3",
+    "@astrojs/markdown-remark": "^2.2.0",
     "@astrojs/prism": "^2.1.1",
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/rollup": "^2.3.0",
@@ -37,7 +37,7 @@
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
     "remark-smartypants": "^2.0.0",
-    "shiki": "^0.11.1",
+    "shiki": "^0.14.1",
     "source-map": "^0.7.4",
     "unist-util-visit": "^4.1.0",
     "vfile": "^5.3.2"
@@ -49,8 +49,6 @@
     "@types/mdast": "^3.0.10",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "2.2.3",
-    "astro-scripts": "0.0.14",
     "chai": "^4.3.6",
     "cheerio": "^1.0.0-rc.11",
     "linkedom": "^0.14.12",
@@ -64,7 +62,9 @@
     "remark-rehype": "^10.1.0",
     "remark-shiki-twoslash": "^3.1.0",
     "remark-toc": "^8.0.1",
-    "vite": "^4.2.1"
+    "vite": "^4.3.1",
+    "astro": "2.4.0",
+    "astro-scripts": "0.0.14"
   },
   "engines": {
     "node": ">=16.12.0"

package/src/plugins.ts

@@ -1,4 +1,4 @@
-import { rehypeHeadingIds } from '@astrojs/markdown-remark';
+import { rehypeHeadingIds, remarkCollectImages } from '@astrojs/markdown-remark';
 import {
 	InvalidAstroDataError,
 	safelyGetAstroData,
@@ -16,6 +16,7 @@ import type { VFile } from 'vfile';
 import type { MdxOptions } from './index.js';
 import { rehypeInjectHeadingsExport } from './rehype-collect-headings.js';
 import rehypeMetaString from './rehype-meta-string.js';
+import { remarkImageToComponent } from './remark-images-to-component.js';
 import remarkPrism from './remark-prism.js';
 import remarkShiki from './remark-shiki.js';
 import { jsToTreeNode } from './utils.js';
@@ -99,7 +100,9 @@ export async function getRemarkPlugins(
 	mdxOptions: MdxOptions,
 	config: AstroConfig
 ): Promise<MdxRollupPluginOptions['remarkPlugins']> {
-	let remarkPlugins: PluggableList = [];
+	let remarkPlugins: PluggableList = [
+		...(config.experimental.assets ? [remarkCollectImages, remarkImageToComponent] : []),
+	];
 
 	if (!isPerformanceBenchmark) {
 		if (mdxOptions.gfm) {

package/src/remark-images-to-component.ts

@@ -0,0 +1,98 @@
+import type { MarkdownVFile } from '@astrojs/markdown-remark';
+import { type Image, type Parent } from 'mdast';
+import type { MdxjsEsm, MdxJsxFlowElement } from 'mdast-util-mdx';
+import { visit } from 'unist-util-visit';
+import { jsToTreeNode } from './utils.js';
+
+export function remarkImageToComponent() {
+	return function (tree: any, file: MarkdownVFile) {
+		if (!file.data.imagePaths) return;
+
+		const importsStatements: MdxjsEsm[] = [];
+		const importedImages = new Map<string, string>();
+
+		visit(tree, 'image', (node: Image, index: number | null, parent: Parent | null) => {
+			// Use the imagePaths set from the remark-collect-images so we don't have to duplicate the logic for
+			// checking if an image should be imported or not
+			if (file.data.imagePaths?.has(node.url)) {
+				let importName = importedImages.get(node.url);
+
+				// If we haven't already imported this image, add an import statement
+				if (!importName) {
+					importName = `__${importedImages.size}_${node.url.replace(/\W/g, '_')}__`;
+
+					importsStatements.push({
+						type: 'mdxjsEsm',
+						value: '',
+						data: {
+							estree: {
+								type: 'Program',
+								sourceType: 'module',
+								body: [
+									{
+										type: 'ImportDeclaration',
+										source: { type: 'Literal', value: node.url, raw: JSON.stringify(node.url) },
+										specifiers: [
+											{
+												type: 'ImportDefaultSpecifier',
+												local: { type: 'Identifier', name: importName },
+											},
+										],
+									},
+								],
+							},
+						},
+					});
+					importedImages.set(node.url, importName);
+				}
+
+				// Build a component that's equivalent to <Image src={importName} alt={node.alt} title={node.title} />
+				const componentElement: MdxJsxFlowElement = {
+					name: '__AstroImage__',
+					type: 'mdxJsxFlowElement',
+					attributes: [
+						{
+							name: 'src',
+							type: 'mdxJsxAttribute',
+							value: {
+								type: 'mdxJsxAttributeValueExpression',
+								value: importName,
+								data: {
+									estree: {
+										type: 'Program',
+										sourceType: 'module',
+										comments: [],
+										body: [
+											{
+												type: 'ExpressionStatement',
+												expression: { type: 'Identifier', name: importName },
+											},
+										],
+									},
+								},
+							},
+						},
+						{ name: 'alt', type: 'mdxJsxAttribute', value: node.alt || '' },
+					],
+					children: [],
+				};
+
+				if (node.title) {
+					componentElement.attributes.push({
+						type: 'mdxJsxAttribute',
+						name: 'title',
+						value: node.title,
+					});
+				}
+
+				parent!.children.splice(index!, 1, componentElement);
+			}
+		});
+
+		// Add all the import statements to the top of the file for the images
+		tree.children.unshift(...importsStatements);
+
+		// Add an import statement for the Astro Image component, we rename it to avoid conflicts
+		tree.children.unshift(jsToTreeNode(`import { Image as __AstroImage__ } from "astro:assets";`));
+	};
+}

package/src/remark-shiki.ts

@@ -10,7 +10,27 @@ import { visit } from 'unist-util-visit';
  */
 const highlighterCacheAsync = new Map<string, Promise<shiki.Highlighter>>();
 
+// Map of old theme names to new names to preserve compatibility when we upgrade shiki
+const compatThemes: Record<string, string> = {
+	'material-darker': 'material-theme-darker',
+	'material-default': 'material-theme',
+	'material-lighter': 'material-theme-lighter',
+	'material-ocean': 'material-theme-ocean',
+	'material-palenight': 'material-theme-palenight',
+};
+
+const normalizeTheme = (theme: string | shiki.IShikiTheme) => {
+	if (typeof theme === 'string') {
+		return compatThemes[theme] || theme;
+	} else if (compatThemes[theme.name]) {
+		return { ...theme, name: compatThemes[theme.name] };
+	} else {
+		return theme;
+	}
+};
+
 const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }: ShikiConfig) => {
+	theme = normalizeTheme(theme);
 	const cacheID: string = typeof theme === 'string' ? theme : theme.name;
 	let highlighterAsync = highlighterCacheAsync.get(cacheID);
 	if (!highlighterAsync) {

package/test/fixtures/css-head-mdx/node_modules/.bin/astro

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"

package/test/fixtures/mdx-frontmatter-injection/node_modules/.bin/astro

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"

package/test/fixtures/mdx-images/astro.config.ts

@@ -0,0 +1,8 @@
+import mdx from '@astrojs/mdx';
+
+export default {
+	integrations: [mdx()],
+	experimental: {
+		assets: true
+	}
+}

package/test/fixtures/mdx-images/node_modules/.bin/astro

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"
+else
+  exec node  "$basedir/../../../../../../../astro/astro.js" "$@"
+fi

package/test/fixtures/mdx-images/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@test/mdx-images",
+  "private": true,
+  "dependencies": {
+    "@astrojs/mdx": "workspace:*",
+    "astro": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/test/fixtures/mdx-images/src/pages/index.mdx

@@ -0,0 +1,11 @@
+Image using a relative path:
+![Houston](../assets/houston.webp)
+
+Image using an aliased path:
+![Houston](~/assets/houston.webp)
+
+Image with a title:
+![Houston](~/assets/houston.webp "Houston title")
+
+Image with spaces in the path:
+![Houston](<~/assets/houston in space.webp>)

package/test/fixtures/mdx-infinite-loop/node_modules/.bin/astro

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"

package/test/fixtures/mdx-infinite-loop/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@test/mdx-infinite-loop",
   "type": "module",
+  "private": true,
   "dependencies": {
     "@astrojs/mdx": "workspace:*",
     "@astrojs/preact": "workspace:*",

package/test/fixtures/mdx-namespace/node_modules/.bin/astro

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"

package/test/fixtures/mdx-namespace/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@test/mdx-namespace",
+  "private": true,
   "dependencies": {
     "@astrojs/mdx": "workspace:*",
     "@astrojs/react": "workspace:*",

package/test/fixtures/mdx-page/node_modules/.bin/astro

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"

package/test/fixtures/mdx-page/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@test/mdx-page",
+  "private": true,
   "dependencies": {
     "@astrojs/mdx": "workspace:*",
     "astro": "workspace:*",

package/test/fixtures/mdx-plus-react/node_modules/.bin/astro

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"

package/test/fixtures/mdx-plus-react/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@test/mdx-plus-react",
+  "private": true,
   "dependencies": {
     "@astrojs/mdx": "workspace:*",
     "@astrojs/react": "workspace:*",

package/test/fixtures/mdx-vite-env-vars/node_modules/.bin/astro

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"

package/test/fixtures/mdx-vite-env-vars/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@test/mdx-env-variables",
+  "private": true,
   "dependencies": {
     "astro": "workspace:*",
     "@astrojs/mdx": "workspace:*"

package/test/mdx-images.test.js

@@ -0,0 +1,40 @@
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+describe('MDX Page', () => {
+	let devServer;
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: new URL('./fixtures/mdx-images/', import.meta.url),
+		});
+		devServer = await fixture.startDevServer();
+	});
+
+	after(async () => {
+		await devServer.stop();
+	});
+
+	describe('Optimized images in MDX', () => {
+		it('works', async () => {
+			const res = await fixture.fetch('/');
+			expect(res.status).to.equal(200);
+
+			const html = await res.text();
+			const { document } = parseHTML(html);
+
+			const imgs = document.getElementsByTagName('img');
+			expect(imgs.length).to.equal(4);
+			// Image using a relative path
+			expect(imgs.item(0).src.startsWith('/_image')).to.be.true;
+			// Image using an aliased path
+			expect(imgs.item(1).src.startsWith('/_image')).to.be.true;
+			// Image with title
+			expect(imgs.item(2).title).to.equal('Houston title');
+			// Image with spaces in the path
+			expect(imgs.item(3).src.startsWith('/_image')).to.be.true;
+		});
+	});
+});

package/test/mdx-syntax-highlighting.test.js

@@ -25,7 +25,7 @@ describe('MDX syntax highlighting', () => {
 
 			const shikiCodeBlock = document.querySelector('pre.astro-code');
 			expect(shikiCodeBlock).to.not.be.null;
-			expect(shikiCodeBlock.getAttribute('style')).to.contain('background-color:#0d1117');
+			expect(shikiCodeBlock.getAttribute('style')).to.contain('background-color:#24292e');
 		});
 
 		it('respects markdown.shikiConfig.theme', async () => {