taxi
taxi copied to clipboard
craftedbygc
[Feature/Idea] Add option to add CSS from target page to <head>
I was attempting to put up a quick demo using taxi and Astro since it's one of the new hot frameworks in the current MPA resurgence. I got it going pretty easily, except for the fact that Astro will only include the component CSS in the head for components that are used on that page. So if I start from the homepage and navigate to another page with a new component, I have missing styles because the target page css never gets transferred into the current page.
I asked if there was a way to ask Astro to compile all component CSS down into a single CSS file but it seems like there isn't.
I could just pull all my single-file component styles out of each component and into a global library of CSS, in fact if you switch to tailwind, since the classes are component-local and the styles are global, this issue goes away. But I really like the DX of the single-file components.
So I'm not entirely blocked here, but I thought it would be neat if there were an option in taxi, similar to how you look for scripts, to look for and inject stylesheets.
One of the Astro folks pointed me to an example where they implemented something similar for a prefetch option: https://github.com/withastro/astro/blob/main/packages/integrations/prefetch/src/client.ts#L54
I think the hard part might be making sure you're not just stuffing the same style tags into the head when you traverse back and forth on pages, but otherwise it could be a neat feature. Or perhaps the solve there is that all the existing CSS is removed and the new CSS is added, since it's likely you're working with an MPA where all the styles that page needs are on the page.
Anyway, curious to know what you think!
My company just launched our new website wearetraina.com which uses taxi! It was a real joy to work with!
