astro-duplicate-css

Minimal Astro + Vue project for reproducing an issue with duplicate CSS when importing components from a component library in different ways.

Summary

• Astro creates a client-side and server-side css bundle (not sure that makes any sense 🤔)
  • no client directives -> only server-side css bundle
  • client:only="..." -> separate chunks for client komponents
  • client:load (hybrid rendering) -> css included in both server and client bundles
• Components imported using barrel imports cause css of all components in the barrel to be included in both server and client bundles, even if only one of them is used with a client directive.
• Component library / monorepo is not really relevant
• TL;DR: Barrel imports are still bad 🤷‍♂️