CSS bundling issue with lazy components

[patheticGeek]

Astro Info

Astro                    v4.7.0
Node                     v20.10.0
System                   Linux (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When we have a lazy loaded component, its css is still getting bundled into the page's css

Consider the following component tree: (in stackblitz example)

• pages/index.astro (astro page)
  • Loader.jsx (react component)
    • LazyLoaded.jsx (lazy loaded react component, loaded on condition)

Now what happens is:

• When i load the / page it contains css for all three components, even if the bundle for LazyLoaded.jsx is not yet loaded.
• When i click a button to render LazyLoaded component, the js bundle for it is loaded and also a css file is loaded which contains css loaded in that component. This css was already in the page so is a waste request and duplicates styles.

What's the expected result?

When we load the / page, i would expect

• the css in page to only contain css added in: index.astro & Loader.jsx
• the css in LazyLoaded.jsx should be loaded when js file for it is requested

My initial goal for doing all this is:

I want to utilize inlineStylesheets: always to have all styles inlined on the page except for the components which are lazy loaded (modals etc).

Before someone shouts this is bad, this is to optimize for fp/fcp & cls. Our pages render from cached data & avg. page size is less than 50kb with styles inlined so is okay to do. This is what we were already doing with nextjs, dont wanna loose on this critial css optimization in migrating to astro.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-jsmmdp

Participation

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

[matthewp]

This is an architectural issue with how Astro bundling works. All CSS imported on a page gets bundled together. There isn't a way to dynamically add CSS the way that you'd want it to due to streaming.

[patheticGeek]

but the components explicitly behind a lazy boundary shouldn't have their CSS loaded as it would already be in that chunk.
or at the very least the CSS shouldn't be loaded twice & duplicated 🤔
that seems like a bug that css is added in both, the page & the lazy chunk

[matthewp]

Does your example show duplication occuring?

[patheticGeek]

yes. checking the example once 🤔 it was for me

[patheticGeek]

the .lazy-loaded class appears in the page css (with any inlineStylesheets value) and is also loaded in the css file which is loaded when LazyLoaded.jsx's chunk is loaded

[patheticGeek]

confirmed, you can build and preview the example i have added, the css is being duplicated in it
it appears in the initial <style> tag and also the lazy loaded css bundle
ps. sorry for spamming the notis

[patheticGeek]

Any updated on this?

[apatel369]

I think this vite PR will help to fix this issue