#Can I get Astro to generate a linked stylesheet?

13 messages · Page 1 of 1 (latest)

reef cape
#

If I put a client-side <script> in a component (that isn't is;inline), Astro converts it to a <script type="module" src="path/to/some.js">.

But if I put a <style> in that component -- or even if I put an import in the frontmatter -- Astro inlines the CSS. Is there a way to tell Astro not to inline it? That is, to bundle it and reference it via a <link> tag instead?

Or do I have to manage my own PostCSS processor and have it emit compiled CSS to dist/public/?

reef cape
#

@brittle kite in https://github.com/withastro/roadmap/discussions/104, you said

In any given .astro file, not one, but multiple <style> tags can be defined. What Astro does, is that it picks up any rules inside these style tags that are present on a page, and bundles them into a single CSS file with the naming of {page}.{id}.css. After it's done, Astro injects it into the <head> section of the site, using a regular Link tag, or it simply pushes the CSS rules into <style> tags into the head.
As far as I can tell, Astro always does a <style>…</style> tag instead of a <link>. Do you know under what circumstances it uses an external CSS link?

brittle kite
#

I have regular style tags in all my pages, and it gets bundled on build into a head import

#

The page source (and the end of the head tag) in one of the sites I did with astro:

#

The index and about are the page style tags bundled and injected into the head

autumn sluice
reef cape
#

Fascinating. That's why my production (SSR) site looks like, but in dev, I get

<style type="text/css" data-astro-dev-id="…">html {…</style>
#

That's breaking my Content-Security-Policy. I guess I can turn that off or relax it in dev

#

Thank you for asking that, Tyler!

autumn sluice
#

No prob—I've tripped on the Astro dev-prod-gap a few times already, so I thought it might be that 😅

#

Thanks for posting this question—good to know I'll need to relax my CSP in dev mode for the Astro projects I have planned.

reef cape
#

I'm thinking about writing an astro-csp integration. LMK if you want to collaborate! It should be small, but getting the middleware working correctly in both dev and SSR adapters might be tricky