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

*.mdx loaded from /content does not support CSS #6434

Closed
1 task
jbebe opened this issue Mar 6, 2023 · 5 comments
Closed
1 task

*.mdx loaded from /content does not support CSS #6434

jbebe opened this issue Mar 6, 2023 · 5 comments
Assignees
@matthewp
Labels
- P2: has workaround Bug, but has workaround (priority)

Comments

@jbebe
Copy link

jbebe commented Mar 6, 2023

What version of astro are you using?

2.0.17

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

If you define a collection and load mdx files from that collection, every *.astro component that is imported into that mdx file will lose its style.

The repro clearly shows that when I use mdx at page level (/red app url), the imported Astro component works fine and the text becomes red, but when I choose the defineCollection way and render the mdx file as a component, the style is gone (/not-red app url). It is the same behavior for when I import the css class in the inner Astro component. (/not-red-2 app url)

Link to Minimal Reproducible Example

https://stackblitz.com/edit/astro-ujjlyg

Participation

  • I am willing to submit a pull request for this issue.
@matthewp matthewp self-assigned this Mar 6, 2023
@matthewp matthewp added the - P4: important Violate documented behavior or significantly impacts performance (priority) label Mar 6, 2023
@matthewp
Copy link
Contributor

matthewp commented Mar 6, 2023

Thanks, taking a look.

@matthewp
Copy link
Contributor

matthewp commented Mar 6, 2023

With content collections you really do need to have a <head> element. That's how Astro knows to inject the CSS. See this fix: https://stackblitz.com/edit/astro-y2rbcq?file=src%2Fpages%2Fnot-red.astro

We might wind up creating a Astro.injectHead() or something like that, a utility you can use yourself, but until this adding a head in your document fixes it.

@matthewp matthewp added - P2: has workaround Bug, but has workaround (priority) and removed - P4: important Violate documented behavior or significantly impacts performance (priority) labels Mar 6, 2023
@jbebe
Copy link
Author

jbebe commented Mar 6, 2023 •
edited
Loading

Sorry for missing the <html> part, I fixed the stackblitz demo, now the issue might be clearer:
https://stackblitz.com/edit/astro-ujjlyg

Apparently rendering in the root Astro component yields different output compared to rendering in a child Astro component. (leading to the missing style, as initially stated)

@matthewp
Copy link
Contributor

matthewp commented Mar 6, 2023

That's helpful, thanks I'll dig into this, then.

@natemoo-re natemoo-re mentioned this issue Aug 16, 2023
Open
1 task
@natemoo-re
Copy link
Member

This seems to be a duplicate of #7761 so I'm going to track that there. Feel free to chime in on that conversation!

@natemoo-re natemoo-re closed this as not planned Won't fix, can't repro, duplicate, stale Aug 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@matthewp matthewp

Labels
- P2: has workaround Bug, but has workaround (priority)
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@matthewp @jbebe @natemoo-re