lambda-packages icon indicating copy to clipboard operation
lambda-packages copied to clipboard

🐛 BUG: CSS generated by `Astro.glob` is included on all pages

Open JLarky opened this issue 3 years ago • 6 comments

What version of astro are you using?

1.0.0-beta.63

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

None

What package manager are you using?

pnpm

What operating system are you using?

Mac

Describe the Bug

becase Astro.glob('../pages/posts/*.md') will render those markdown files it will also include css files used in them. The issue I noticed is that HRM logic will not unload that css files until you restart you astro dev.

Steps to reproduce:

  1. download astro-hmr-css-bug branch from https://github.com/JLarky/jlarky-blog/tree/astro-hmr-css-bug
  2. run astro dev
  3. open /posts page
  4. now all pages including / and /contacts will have * {color: red} css in them
  5. restart astro dev
  6. now your / or /contacts are fine (i.e. not red) until you click on the /posts again

You can do the same with https://stackblitz.com/github/JLarky/jlarky-blog/tree/astro-hmr-css-bug but instead of restarting astro dev you would do a full page reload of stackblitz app

Possible solutions:

  1. provide Astro.globMetadataOnly that will skip markdown rendering 🤪
  2. I tested that generally Astro will unload css in less crazy setups, so there's probably some kind of leak in this more indirect case. Compare this to https://stackblitz.com/edit/github-8fswvn?file=src%2Fpages%2Fanother.astro that has Astro.glob but if you navigate away from this page css gets properly unloaded

I first saw this issue here: https://youtu.be/EU1MLQMUeXw?t=3490 at 58:58 you can see that I switch to another page but color: red is still applied.

Link to Minimal Reproducible Example

https://stackblitz.com/github/JLarky/jlarky-blog/tree/astro-hmr-css-bug

Participation

  • [ ] I am willing to submit a pull request for this issue.

JLarky avatar Jul 04 '22 17:07 JLarky

So I looked into this during https://github.com/withastro/astro/pull/3932.

Seems like this is not related to HMR, but is the result of how we're crawling the module graph to discover CSS during dev. This is probably a bigger issue to tackle.

natemoo-re avatar Jul 19 '22 22:07 natemoo-re

So I looked into this during #3932.

Seems like this is not related to HMR, but is the result of how we're crawling the module graph to discover CSS during dev. This is probably a bigger issue to tackle.

thank you for looking into this :) any plans to introduce globs without rendering markdown (just frontmatter) though? :)

JLarky avatar Jul 20 '22 05:07 JLarky

@natemoo-re anything that we can do here before v1.0 next week?

FredKSchott avatar Aug 01 '22 18:08 FredKSchott

@FredKSchott and I discussed this with the rest of the team. Given how close we are to v1.0.0, we won't be able to explore this feature in time. However, the ability to glob files while not importing any CSS (as @JLarky suggested) sounds extremely useful and is something we'd like to tackle in the future.

natemoo-re avatar Aug 05 '22 21:08 natemoo-re

@natemoo-re Is this issue available to work on?

Nike682631 avatar Aug 13 '22 18:08 Nike682631

We're beginning to plan our post-v1.0 roadmap! Please comment here if this issue is affecting you so that we can get a feel for its priority: https://github.com/withastro/rfcs/discussions/247

FredKSchott avatar Aug 14 '22 19:08 FredKSchott