Unnecessary CSS files in dist

[artursopelnik]

Astro Info

Astro                    v3.0.10
Node                     v20.5.1
System                   macOS (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/react

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

Not browser-related

Describe the Bug

When I update Astro from version 3.0.8 to 3.0.10, and running ´npm run build´, astro create unnecessary CSS files in dist folder. These files are still bundled in the latest version, but the CSS files were never assigned. It's definitely a bug.

Screenshot

https://ibb.co/bvrvD3D

Repo

https://github.com/artursopelnik/astro-demo

What's the expected result?

No unnecessary CSS files that are not included in the dist.

[lilnasy]

Thanks for opening this issue.

Due to a Vite behavior (#8329), CSS files had to be included (#8351).

Since the extra files are small and don't break anything, this would be low priority.

If someone would like to work on this issue, bluwy provided helpful pointers in #8351.

[pratik-codes]

Hey @lilnasy I would like to give it a shot

[lilnasy]

Thanks @pratik-codes
Go for it!

[pratik-codes]

When I update Astro from version 3.0.8 to 3.0.10, and run ´npm run dev´, Astro creates unnecessary CSS files in dist folder. These files are still bundled in the latest version, but the CSS files were never assigned. It's definitely a bug

To check this bug I wanted to reproduce this so I created a new astro project and did the same thing. But it wasn't creating an unnecessary css file in the dist folder.

To be sure about it I removed all the CSS from the project and when built it didn't even create a CSS file.

Attaching a screenshot above.

@lilnasy I think there is no issue or do you think I am doing anything wrong here?

[lilnasy]

That is probably a typo - npm run dev does not affect the dist folder - we are concerned with npm run build.

[pratik-codes]

@lilnasy correct I understood it was a typo. I tried npm run build only and it didn't generate anything when there was no CSS. I will also share a video for better understanding of this.

[cprass]

This happens for me too when building the static page. The CSS in the extra file comes from a local <style> definition in an .astro component. The same CSS is both inlined in the HTML file and provided as a separate CSS file in the _astro folder.

Wouldn't it be generally better to use the separate CSS file instead of the inline CSS? When using a strong CSP header, inlining CSS is not allowed. Loading it from the same origin would be fine.

[artursopelnik]

Now it works as expected with Astro 3.2. Topic can be closed.

[cprass]

Now it works as expected with Astro 3.2. Topic can be closed.

I just updated my page to latest Astro (3.2.2) and I'm still getting both the inline <style> and the unused CSS file when building for static.

[artursopelnik]

@cprass You're right. I still had v3.0.8. In version 3.2.2 the bug is still there.

PR from @bluwy works for me.