diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index 6fb96de9a..3e9cc945c 100644 --- a/packages/integrations/mdx/src/index.ts +++ b/packages/integrations/mdx/src/index.ts @@ -11,7 +11,7 @@ import type { Options as RemarkRehypeOptions } from 'remark-rehype'; import { VFile } from 'vfile'; import type { Plugin as VitePlugin } from 'vite'; import { getRehypePlugins, getRemarkPlugins, recmaInjectImportMetaEnvPlugin } from './plugins.js'; -import { getFileInfo, parseFrontmatter } from './utils.js'; +import { getFileInfo, parseFrontmatter, ignoreStringPlugins } from './utils.js'; export type MdxOptions = Omit & { extendMarkdownConfig: boolean; @@ -70,7 +70,7 @@ export default function mdx(partialMdxOptions: Partial = {}): Integr const mdxOptions = applyDefaultOptions({ options: partialMdxOptions, - defaults: withDefaultMdxOptions(extendMarkdownConfig ? config.markdown : markdownConfigDefaults), + defaults: markdownConfigToMdxOptions(extendMarkdownConfig ? config.markdown : markdownConfigDefaults), }); const mdxPluginOpts: MdxRollupPluginOptions = { @@ -188,15 +188,15 @@ export default function mdx(partialMdxOptions: Partial = {}): Integr const defaultMdxOptions = { extendMarkdownConfig: true, recmaPlugins: [], - remarkPlugins: [], - rehypePlugins: [], - remarkRehype: {}, } -function withDefaultMdxOptions(markdownConfig: typeof markdownConfigDefaults): MdxOptions { +function markdownConfigToMdxOptions(markdownConfig: typeof markdownConfigDefaults): MdxOptions { return { - ...markdownConfig, ...defaultMdxOptions, + ...markdownConfig, + remarkPlugins: ignoreStringPlugins(markdownConfig.remarkPlugins), + rehypePlugins: ignoreStringPlugins(markdownConfig.rehypePlugins), + remarkRehype: markdownConfig.remarkRehype as any ?? {}, }; } diff --git a/packages/integrations/mdx/src/plugins.ts b/packages/integrations/mdx/src/plugins.ts index cff09eae8..b0651a53b 100644 --- a/packages/integrations/mdx/src/plugins.ts +++ b/packages/integrations/mdx/src/plugins.ts @@ -4,12 +4,11 @@ import { safelyGetAstroData, } from '@astrojs/markdown-remark/dist/internal.js'; import { nodeTypes } from '@mdx-js/mdx'; -import type { PluggableList } from '@mdx-js/mdx/lib/core.js'; import type { Options as MdxRollupPluginOptions } from '@mdx-js/rollup'; +import type { PluggableList } from '@mdx-js/mdx/lib/core.js'; import type { AstroConfig } from 'astro'; import type { Literal, MemberExpression } from 'estree'; import { visit as estreeVisit } from 'estree-util-visit'; -import { bold, yellow } from 'kleur/colors'; import type { Image } from 'mdast'; import { pathToFileURL } from 'node:url'; import rehypeRaw from 'rehype-raw'; @@ -142,7 +141,7 @@ export async function getRemarkPlugins( } } - remarkPlugins = [...remarkPlugins, ...ignoreStringPlugins(mdxOptions.remarkPlugins)]; + remarkPlugins = [...remarkPlugins, ...mdxOptions.remarkPlugins]; if (!isPerformanceBenchmark) { // Apply syntax highlighters after user plugins to match `markdown/remark` behavior @@ -169,7 +168,7 @@ export function getRehypePlugins(mdxOptions: MdxOptions): MdxRollupPluginOptions rehypePlugins = [ ...rehypePlugins, - ...ignoreStringPlugins(mdxOptions.rehypePlugins), + ...mdxOptions.rehypePlugins, // getHeadings() is guaranteed by TS, so this must be included. // We run `rehypeHeadingIds` _last_ to respect any custom IDs set by user plugins. ...(isPerformanceBenchmark ? [] : [rehypeHeadingIds, rehypeInjectHeadingsExport]), @@ -179,28 +178,6 @@ export function getRehypePlugins(mdxOptions: MdxOptions): MdxRollupPluginOptions return rehypePlugins; } -function ignoreStringPlugins(plugins: any[]): PluggableList { - let validPlugins: PluggableList = []; - let hasInvalidPlugin = false; - for (const plugin of plugins) { - if (typeof plugin === 'string') { - console.warn(yellow(`[MDX] ${bold(plugin)} not applied.`)); - hasInvalidPlugin = true; - } else if (Array.isArray(plugin) && typeof plugin[0] === 'string') { - console.warn(yellow(`[MDX] ${bold(plugin[0])} not applied.`)); - hasInvalidPlugin = true; - } else { - validPlugins.push(plugin); - } - } - if (hasInvalidPlugin) { - console.warn( - `To inherit Markdown plugins in MDX, please use explicit imports in your config instead of "strings." See Markdown docs: https://docs.astro.build/en/guides/markdown-content/#markdown-plugins` - ); - } - return validPlugins; -} - /** * Check if estree entry is "import.meta.env.VARIABLE" * If it is, return the variable name (i.e. "VARIABLE") diff --git a/packages/integrations/mdx/src/utils.ts b/packages/integrations/mdx/src/utils.ts index 516cfafb2..1f679f9fa 100644 --- a/packages/integrations/mdx/src/utils.ts +++ b/packages/integrations/mdx/src/utils.ts @@ -1,7 +1,9 @@ import type { Options as AcornOpts } from 'acorn'; import { parse } from 'acorn'; import type { AstroConfig, SSRError } from 'astro'; +import { bold, yellow } from 'kleur/colors'; import matter from 'gray-matter'; +import type { PluggableList } from '@mdx-js/mdx/lib/core.js'; import type { MdxjsEsm } from 'mdast-util-mdx'; function appendForwardSlash(path: string) { @@ -100,3 +102,25 @@ function startsWithDotSlash(path: string) { const c2 = path[1]; return c1 === '.' && c2 === '/'; } + +export function ignoreStringPlugins(plugins: any[]): PluggableList { + let validPlugins: PluggableList = []; + let hasInvalidPlugin = false; + for (const plugin of plugins) { + if (typeof plugin === 'string') { + console.warn(yellow(`[MDX] ${bold(plugin)} not applied.`)); + hasInvalidPlugin = true; + } else if (Array.isArray(plugin) && typeof plugin[0] === 'string') { + console.warn(yellow(`[MDX] ${bold(plugin[0])} not applied.`)); + hasInvalidPlugin = true; + } else { + validPlugins.push(plugin); + } + } + if (hasInvalidPlugin) { + console.warn( + `To inherit Markdown plugins in MDX, please use explicit imports in your config instead of "strings." See Markdown docs: https://docs.astro.build/en/guides/markdown-content/#markdown-plugins` + ); + } + return validPlugins; +}