@astrojs/mdx 0.15.1 → 0.16.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output 86781ef119fbfda9
-@astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.15.1 build /home/runner/work/astro/astro/packages/integrations/mdx
-@astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
-@astrojs/mdx:build: 
+@astrojs/mdx:build: cache hit, replaying output 2e9264d0ca51149a
+@astrojs/mdx:build: 
+@astrojs/mdx:build: > @astrojs/mdx@0.16.0 build /home/runner/work/astro/astro/packages/integrations/mdx
+@astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
+@astrojs/mdx:build: 

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @astrojs/mdx
 
+## 0.16.0
+
+### Minor Changes
+
+- [#6050](https://github.com/withastro/astro/pull/6050) [`2ab32b59e`](https://github.com/withastro/astro/commit/2ab32b59ef0a28d34757f2c2adb9cf2baa86855e) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Fix: load syntax highlighters after MDX remark plugins. This keeps MDX consistent with Astro's markdown behavior.
+
+### Patch Changes
+
+- [#6062](https://github.com/withastro/astro/pull/6062) [`c6cf847bd`](https://github.com/withastro/astro/commit/c6cf847bd0b6bef3c51a5710fba5ca43b11e46f9) Thanks [@delucis](https://github.com/delucis)! - Update MDX README
+
+## 0.15.2
+
+### Patch Changes
+
+- [#5478](https://github.com/withastro/astro/pull/5478) [`1c7eef308`](https://github.com/withastro/astro/commit/1c7eef308e808aa5ed4662b53e67ec8d1b814d1f) Thanks [@nemo0](https://github.com/nemo0)! - Update READMEs for consistency
+
 ## 0.15.1
 
 ### Patch Changes

package/README.md

@@ -42,9 +42,9 @@ npm install @astrojs/mdx
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
+__`astro.config.mjs`__
 
-```js
+```js ins={2} "mdx()"
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -92,8 +92,9 @@ All [`markdown` configuration options](https://docs.astro.build/en/reference/con
 There is no separate MDX configuration for [including pages marked as draft in the build](https://docs.astro.build/en/reference/configuration-reference/#markdowndrafts). This Markdown setting will be respected by both Markdown and MDX files and cannot be overridden for MDX files specifically.
 :::
 
-```ts
-// astro.config.mjs
+__`astro.config.mjs`__
+
+```js
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import remarkToc from 'remark-toc';
@@ -128,8 +129,9 @@ MDX will extend [your project's existing Markdown configuration](https://docs.as
 
 For example, say you need to disable GitHub-Flavored Markdown and apply a different set of remark plugins for MDX files. You can apply these options like so, with `extendMarkdownConfig` enabled by default:
 
-```ts
-// astro.config.mjs
+__`astro.config.mjs`__
+
+```js
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -155,8 +157,9 @@ export default defineConfig({
 
 You may also need to disable `markdown` config extension in MDX. For this, set `extendMarkdownConfig` to `false`:
 
-```ts
-// astro.config.mjs
+__`astro.config.mjs`__
+
+```js
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 

package/dist/plugins.js

@@ -98,12 +98,6 @@ function toRemarkContentRelImageError({ srcDir }) {
 }
 async function getRemarkPlugins(mdxOptions, config) {
   let remarkPlugins = [];
-  if (mdxOptions.syntaxHighlight === "shiki") {
-    remarkPlugins.push([await remarkShiki(mdxOptions.shikiConfig)]);
-  }
-  if (mdxOptions.syntaxHighlight === "prism") {
-    remarkPlugins.push(remarkPrism);
-  }
   if (mdxOptions.gfm) {
     remarkPlugins.push(remarkGfm);
   }
@@ -111,6 +105,12 @@ async function getRemarkPlugins(mdxOptions, config) {
     remarkPlugins.push(remarkSmartypants);
   }
   remarkPlugins = [...remarkPlugins, ...ignoreStringPlugins(mdxOptions.remarkPlugins)];
+  if (mdxOptions.syntaxHighlight === "shiki") {
+    remarkPlugins.push([await remarkShiki(mdxOptions.shikiConfig)]);
+  }
+  if (mdxOptions.syntaxHighlight === "prism") {
+    remarkPlugins.push(remarkPrism);
+  }
   remarkPlugins.push(toRemarkContentRelImageError(config));
   return remarkPlugins;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Use MDX within Astro",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -48,7 +48,7 @@
     "@types/mdast": "^3.0.10",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "2.0.2",
+    "astro": "2.0.5",
     "astro-scripts": "0.0.10",
     "chai": "^4.3.6",
     "cheerio": "^1.0.0-rc.11",

package/src/plugins.ts

@@ -129,12 +129,7 @@ export async function getRemarkPlugins(
 	config: AstroConfig
 ): Promise<MdxRollupPluginOptions['remarkPlugins']> {
 	let remarkPlugins: PluggableList = [];
-	if (mdxOptions.syntaxHighlight === 'shiki') {
-		remarkPlugins.push([await remarkShiki(mdxOptions.shikiConfig)]);
-	}
-	if (mdxOptions.syntaxHighlight === 'prism') {
-		remarkPlugins.push(remarkPrism);
-	}
+
 	if (mdxOptions.gfm) {
 		remarkPlugins.push(remarkGfm);
 	}
@@ -144,6 +139,14 @@ export async function getRemarkPlugins(
 
 	remarkPlugins = [...remarkPlugins, ...ignoreStringPlugins(mdxOptions.remarkPlugins)];
 
+	// Apply syntax highlighters after user plugins to match `markdown/remark` behavior
+	if (mdxOptions.syntaxHighlight === 'shiki') {
+		remarkPlugins.push([await remarkShiki(mdxOptions.shikiConfig)]);
+	}
+	if (mdxOptions.syntaxHighlight === 'prism') {
+		remarkPlugins.push(remarkPrism);
+	}
+
 	// Apply last in case user plugins resolve relative image paths
 	remarkPlugins.push(toRemarkContentRelImageError(config));
 

package/test/css-head-mdx.test.js

@@ -0,0 +1,33 @@
+import mdx from '@astrojs/mdx';
+
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+describe('Head injection w/ MDX', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: new URL('./fixtures/css-head-mdx/', import.meta.url),
+			integrations: [mdx()],
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await fixture.build();
+		});
+
+		it('only injects contents into head', async () => {
+			const html = await fixture.readFile('/indexThree/index.html');
+			const { document } = parseHTML(html);
+
+			const links = document.querySelectorAll('link[rel=stylesheet]');
+			expect(links).to.have.a.lengthOf(1);
+
+			const scripts = document.querySelectorAll('script[type=module]');
+			expect(scripts).to.have.a.lengthOf(1);
+		});
+	});
+});

package/test/fixtures/css-head-mdx/src/components/HelloWorld.astro

@@ -0,0 +1,11 @@
+---
+---
+
+<h3>Hello world!!</h3>
+<slot />
+
+<style>h3 { color: red }</style>
+
+<script>
+console.log('hellooooo')
+</script>

package/test/fixtures/css-head-mdx/src/layouts/One.astro

@@ -0,0 +1,15 @@
+---
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro</title>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>

package/test/fixtures/css-head-mdx/src/layouts/Three.astro

@@ -0,0 +1,6 @@
+---
+import Two from './Two.astro'
+---
+<Two>
+<slot />
+</Two>

package/test/fixtures/css-head-mdx/src/layouts/Two.astro

@@ -0,0 +1,6 @@
+---
+import One from './One.astro'
+---
+<One>
+<slot />
+</One>

package/test/fixtures/css-head-mdx/src/pages/indexOne.astro

@@ -0,0 +1,10 @@
+---
+import One from '../layouts/One.astro'
+
+import { Content } from '../test.mdx'
+---
+
+<One>
+	<h1>Astro</h1>
+	<Content />
+</One>

package/test/fixtures/css-head-mdx/src/pages/indexThree.astro

@@ -0,0 +1,10 @@
+---
+import Three from '../layouts/Three.astro'
+
+import { Content } from '../test.mdx'
+---
+
+<Three>
+	<h1>Astro</h1>
+	<Content />
+</Three>

package/test/fixtures/css-head-mdx/src/pages/indexTwo.astro

@@ -0,0 +1,10 @@
+---
+import Two from '../layouts/Two.astro'
+
+import { Content } from '../test.mdx'
+---
+
+<Two>
+	<h1>Astro</h1>
+	<Content />
+</Two>

package/test/fixtures/css-head-mdx/src/pages/testOne.mdx

@@ -0,0 +1,15 @@
+---
+layout: '../layouts/One.astro'
+title: "hello world"
+publishDate: "2023-01-01"
+---
+
+import HelloWorld from '../components/HelloWorld.astro';
+
+# Test
+
+123
+
+<HelloWorld />
+
+456

package/test/fixtures/css-head-mdx/src/pages/testThree.mdx

@@ -0,0 +1,15 @@
+---
+layout: '../layouts/Three.astro'
+title: "hello world"
+publishDate: "2023-01-01"
+---
+
+import HelloWorld from '../components/HelloWorld.astro';
+
+# Test
+
+123
+
+<HelloWorld />
+
+456

package/test/fixtures/css-head-mdx/src/pages/testTwo.mdx

@@ -0,0 +1,15 @@
+---
+layout: '../layouts/Two.astro'
+title: "hello world"
+publishDate: "2023-01-01"
+---
+
+import HelloWorld from '../components/HelloWorld.astro';
+
+# Test
+
+123
+
+<HelloWorld />
+
+456

package/test/fixtures/css-head-mdx/src/test.mdx

@@ -0,0 +1,14 @@
+---
+title: "hello world"
+publishDate: "2023-01-01"
+---
+
+import HelloWorld from './components/HelloWorld.astro';
+
+# Test
+
+123
+
+<HelloWorld />
+
+456