Astro doesn't bundle imports from Vue appEntrypoint during build

[vincerubinetti]

What version of astro are you using?

2.2.2

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

None

What package manager are you using?

yarn

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

This is a strange issue and took me a long time to track down. The issue seems to occur when "globally" importing CSS and global Vue components in a custom appEntrypoint. The bundler does not include the CSS files (maybe JS files too, I'm not sure) from these things, but only when running build. When running dev, it behaves as I would expect.

Minimal Reproducible Example:

astro-bundle-issue.zip
(Sorry for not making a CodeSandbox, but I tend to delete those later. And this was small enough to attach. This will be more permanent).

Workaround:

The "solution" is to do these global imports in my /layouts/Layout.astro file, as you can see commented out in the attached example. Uncomment those lines to watch the appropriate styles actually be included in the build.

Expected behavior:

I would expect imports in the appEntrypoint to be properly included in the resulting bundle, and not have to do all global imports in an .astro file. At the very least, the behavior should be consistent between build and dev, and well documented, as this will cause very insidious deployment bugs for people.

Link to Minimal Reproducible Example

See attached zip file for example

Participation

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

Unfortunately I would have no idea where to start debugging this in the actual source code. Probably can't dedicate the time to it anyway.

[matthewp]

Thanks @vincerubinetti. This is happening because this file is not actually imported by any pages. That's how Astro knows which pages CSS belongs to. In this case it belongs to none.

So I understand the use-case properly is it that you would import global components in this file and no where else, and you expect those component styles to always be included on every page?

[vincerubinetti]

Yes that would be my expectation.

In SPA frameworks/libraries, doing a global import "styles.css imports it everywhere, no matter which file you're importing it in (assuming the file itself is imported somewhere from the entrypoint and isn't an island). I understand non-SPA frameworks are different, especially Astro.

If I recall correctly, Next.js forces you to put global styles in the main App file (something I'm pretty sure is clearly spelled out in their docs), presumably for the same reason as you're insinuating here: wanting a distinction between app-global and page-global CSS? In this case, I think it makes sense to allow app-global CSS imports in the appEntrypoint, as this is where other Vue global things are defined, and not just in Layout.astro or something.

If the team doesn't want to do this, that's fine, but I would suggest some things:

1. Make sure the behavior is consistent between dev and build for early discovery of the problem.
2. Add a note, maybe to this section of the docs, about where you can and cannot import app-global CSS (currently it shows where you can, but doesn't spell out any limitations).
3. Maybe some console warning when doing global CSS imports where you shouldn't?

[natemoo-re]

Sorry for the lack of movement on this issue, folks. I was finally able to dedicate enough time to debug this and come up with a fix. PR is here #9490