Fix half way render blocking external css for astro#457
Conversation
✅ Deploy Preview for expressive-code ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
|
||
| return renderedGroupAst | ||
| return { | ||
| type: 'mdxJsxFlowElement', |
There was a problem hiding this comment.
Unfortunately this doesn't seem to work for .md files, only .mdx files...
Edit: there's an old discussions about this withastro/roadmap#423
There was a problem hiding this comment.
@hippotastic It seems to me that this is quite tricky to get right with the current markdown system used by Astro.
Would you accept an alternative approach, instead of hacking things here, expose the virtual:astro-expressive-code/styles.css (or with another name), and add an option to disable the style injections so the user can choose to manually import the styles and disable the style injections?
There was a problem hiding this comment.
@Legend-Master Yes, absolutely! The current approach of manually injecting styles into the first code block is quite fragile and I'd love to find a better way.
This could even become the new default for astro-expressive-code if we can find a solution that:
- Works with
md,mdxandastrofiles - Works both with the new Sätteri and the legacy Markdown pipeline
- Works both for fenced code blocks and the
<Code>component - Does not break when used with the Cloudflare adapter
- Does not include EC CSS styles on pages that don't even have a code block
I've attempted to find a solution in the past but failed, but I'd welcome a better solution anytime!
There was a problem hiding this comment.
The current approach should work for all the above you listed except for the fenced code blocks in .md files so I have posted this in the astro discord server for some help see if we can get this solved.
https://discord.com/channels/830184174198718474/1197638002764152843/1520997105425055856
If not, then I think a fair trade off would be exposing virtual:astro-expressive-code/styles.css and add an option to disable the style injections, this should work with all of above except Does not include EC CSS styles on pages that don't even have a code block, maybe not as a default, but at least you have a choice (maybe startlight could have it as a default since most sites using it will contain code blocks)
2 participants
Fix #452
Use astro's external stylesheet imports and vite's virtual modules instead of manually emitting the css as files and add them to the html. This avoids duplications (yes it can happen if
<Code />is used by different parts like a MDX file and a .astro file) and the half way render blocking that causes unpleasant layout shifts.(this should probably be done to the js as well)
This reverts part of the removal of the virtual module from #187, but instead of js, it returns the css code.
I have not fixed the tests and added change logs yet, so marking as draft for now.