diff options
11 files changed, 41 insertions, 18 deletions
diff --git a/.changeset/beige-points-search.md b/.changeset/beige-points-search.md new file mode 100644 index 000000000..ed7909972 --- /dev/null +++ b/.changeset/beige-points-search.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fixes an issue where component styles were not correctly included in rendered MDX diff --git a/packages/astro/src/content/runtime.ts b/packages/astro/src/content/runtime.ts index 439d7e11e..e446b3c93 100644 --- a/packages/astro/src/content/runtime.ts +++ b/packages/astro/src/content/runtime.ts @@ -445,13 +445,12 @@ export async function renderEntry( try { // @ts-expect-error virtual module const { default: contentModules } = await import('astro:content-module-imports'); - const module = contentModules.get(entry.filePath); - const deferredMod = await module(); - return { - Content: deferredMod.Content, - headings: deferredMod.getHeadings?.() ?? [], - remarkPluginFrontmatter: deferredMod.frontmatter ?? {}, - }; + const renderEntryImport = contentModules.get(entry.filePath); + return render({ + collection: '', + id: entry.id, + renderEntryImport, + }); } catch (e) { // eslint-disable-next-line console.error(e); diff --git a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts b/packages/astro/src/content/vite-plugin-content-virtual-mod.ts index 6ffa37a4e..d1a24004e 100644 --- a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts +++ b/packages/astro/src/content/vite-plugin-content-virtual-mod.ts @@ -82,12 +82,12 @@ export function astroContentVirtualModPlugin({ const [, query] = id.split('?'); const params = new URLSearchParams(query); const fileName = params.get('fileName'); - let importerPath = undefined; + let importPath = undefined; if (fileName && URL.canParse(fileName, settings.config.root.toString())) { - importerPath = fileURLToPath(new URL(fileName, settings.config.root)); + importPath = fileURLToPath(new URL(fileName, settings.config.root)) } - if (importerPath) { - return await this.resolve(importerPath); + if (importPath) { + return await this.resolve(`${importPath}?${CONTENT_RENDER_FLAG}`); } } diff --git a/packages/integrations/mdx/test/css-head-mdx.test.js b/packages/integrations/mdx/test/css-head-mdx.test.js index 083348015..6e31d972d 100644 --- a/packages/integrations/mdx/test/css-head-mdx.test.js +++ b/packages/integrations/mdx/test/css-head-mdx.test.js @@ -15,6 +15,7 @@ describe('Head injection w/ MDX', () => { integrations: [mdx()], // test suite was authored when inlineStylesheets defaulted to never build: { inlineStylesheets: 'never' }, + experimental: { contentLayer: true } }); }); diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro index 1804388b0..3ef9d7639 100644 --- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro +++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro @@ -1,8 +1,8 @@ --- -import { getEntryBySlug } from 'astro:content'; +import { getEntry, render } from 'astro:content'; -const launchWeek = await getEntryBySlug('blog', 'using-mdx'); -const { Content } = await launchWeek.render(); +const launchWeek = await getEntry('blog', 'using-mdx'); +const { Content } = await render(launchWeek); --- <Content /> diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/config.ts b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/config.ts new file mode 100644 index 000000000..2c8944d51 --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/config.ts @@ -0,0 +1,18 @@ +import { defineCollection } from "astro:content"; +import { glob } from "astro/loaders" + +const posts = defineCollection({ + loader: glob({ + pattern: "*.mdx", + base: "src/data/posts", + }) +}); + +const blog = defineCollection({ + loader: glob({ + pattern: "*.mdx", + base: "src/data/blog", + }) +}); + +export const collections = { posts, blog }; diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/_styles.css b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/_styles.css index 1379b29c0..1379b29c0 100644 --- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/_styles.css +++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/_styles.css diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/using-mdx.mdx b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/using-mdx.mdx index 917fc3331..917fc3331 100644 --- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/using-mdx.mdx +++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/using-mdx.mdx diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/test.mdx b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/test.mdx index 0bb1153ca..0bb1153ca 100644 --- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/test.mdx +++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/test.mdx diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/using-component.mdx b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/using-component.mdx index fa550fb04..fa550fb04 100644 --- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/using-component.mdx +++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/using-component.mdx diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro index 5afb5be92..13a9e56db 100644 --- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro +++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro @@ -1,17 +1,17 @@ --- -import { getCollection } from 'astro:content'; +import { getCollection, render } from 'astro:content'; import SmallCaps from '../../components/SmallCaps.astro'; import Layout from '../../layouts/ContentLayout.astro'; export async function getStaticPaths() { const entries = await getCollection('posts'); return entries.map(entry => { - return {params: { post: entry.slug }, props: { entry }, - }}); + return { params: { post: entry.id }, props: { entry }}; + }); } const { entry } = Astro.props; -const { Content } = await entry.render(); +const { Content } = await render(entry); --- <Layout title=""> <Content components={{ SmallCaps }} /> |