Hi, I'm using Astro with a headless CMS (Storyblok). I was wondering if some behaviour was normal.
I have an Astro page [...slug].astro. On this components, I've collected all my routes from Storyblok API and render all my pages. It's working.
But when i look at the generated CSS i have three files /_astro/slug.[chunk].css. Why there are 3 files with the same name but a different chunk ? And inside one, i have CSS of all my pages. Is it normal ? When i run a performance test i have the problem "unused css" because some of CSS is used on another page. Is it possible to generate CSS files by routes ?
#CSS Chunks when using [...slug].astro
glossy latch
fossil sleetBOT
Hi @glossy latch. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Astro's default behavior is to generate separate CSS files for each route. However, when using dynamic routes like [...slug].astro, Astro treats this as a single route, hence it generates a single CSS file for all the pages rendered by this route. This is why you're seeing CSS for all your pages in one file.
The multiple CSS files with the same name but different chunks are likely due to Astro's CSS optimization process. Astro tries to optimize the CSS delivery by splitting the CSS into smaller chunks and only loading the necessary chunks for each page. However, in the case of dynamic routes, this optimization might not work as expected, leading to the "unused css" issue in your performance test.
Currently, Astro does not support generating separate CSS files for each page rendered by a dynamic route. However, there's a discussion about this issue on Astro's GitHub page (source (https://github.com/withastro/astro/issues/5787)). You might want to follow that thread for updates.