Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🐛 BUG: Markdown-imported component styles do not get applied when Astro.glob().Content is used #3054

Closed
1 task
Tc-001 opened this issue Apr 10, 2022 · 1 comment · Fixed by #3116
Closed
1 task

🐛 BUG: Markdown-imported component styles do not get applied when Astro.glob().Content is used #3054

Tc-001 opened this issue Apr 10, 2022 · 1 comment · Fixed by #3116
Assignees
@bholmesdev
Labels
feat: markdown Related to Markdown (scope)

Comments

@Tc-001
Copy link
Contributor

Tc-001 commented Apr 10, 2022

What version of astro are you using?

1.0.0-beta.5

What package manager are you using?

yarn / pnpm

What operating system are you using?

Linux

Describe the Bug

  1. Create a src/markdowns/file.md file with the following:
---
setup: import Styled from "../components/StyledCompoent.astro"
---
<Styled></Styled>
  1. Create a src/components/StyledCompoent.astro with the following
<h1> This should be red </h1>
<style>
  h1 {color:red;}
</style>
  1. Replace index.astro with
---
	let pages = await Astro.glob("../markdowns/*.md")
---
<html lang="en">
	<head>
	</head>
	<body>
		{pages.map(page=> (
			<page.Content />
		))}
	</body>
</html>
  1. dev or build the project

Expected

There is a red <h1> component

Actual

There is a black <h1> component

Adding the following line to the index.astro frontmatter

import Styled from "../components/StyledCompoent.astro"

will side-effect import the styles, and I get the expected, red <h1>.

Link to Minimal Reproducible Example

https://codesandbox.io/s/pedantic-archimedes-p3k2n0?file=/src/pages/index.astro

Participation

  • I am willing to submit a pull request for this issue.
@bholmesdev bholmesdev self-assigned this Apr 14, 2022
@bholmesdev
Copy link
Contributor

Update: this affects styles loaded by any components in .md, not just .astro. It also occurs for standard ESM imports like so:

---
import { Content } from '../markdowns/page.md'
---

☝️ We're planning to use this in our own starter example soon, so it's definitely worth fixing!

@bholmesdev bholmesdev mentioned this issue Apr 14, 2022
Merged
@bholmesdev bholmesdev added the feat: markdown Related to Markdown (scope) label Apr 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@bholmesdev bholmesdev

Labels
feat: markdown Related to Markdown (scope)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix: component styles within imported markdown files withastro/astro
2 participants
@bholmesdev @Tc-001