Add style src="" attribute to Astro components

[FredKSchott]

• Start Date: 2022-06-27
• Status: Draft

Summary

This new RFC proposes a new <style src=""> feature to move external CSS file imports into the HTML template of the Astro component. Inspired by Vue and our current hoisted <script src=""> support.

<style src="../some-relative-file.css" />
<style src="bootstrap" />
<style src="@fontsource/roboto" />

Links

• Full Rendered Proposal

[crutchcorn]

Potentially odd question:

Would src="" support dynamic route access?

IE: If I wanted to use:

---
const path = "some-relative-file.css"
---

<style src={`../${path}.css`} />

I know it's a rare use case, but I've occasionally ran into needs for something similar, which is supported by Vite's dynamic import() syntax via @rollup/plugin-dynamic-import-vars.

If so, this might be one more rationale for moving forward with using <style> as the preferred API

[FredKSchott]

Would src="" support dynamic route access?

This isn't currently planned. Similar to <script src>, only statically analyzable strings are supported.

We could support this, however I'm not sure it's a good idea since the way Vite would work is that all matched CSS files would be include on the page, because Vite doesn't know which exact file you mean with <style src={../${path}.css} />, it will just include all of them :)

[FredKSchott]

Update: Abandoning this for now, but would love to revisit at some point. The main blocker right now is figuring out the right scoping behavior: "should <style src=""> be scoped by default, similar to how <style> is scoped by default?" We don't have the time to pursue this now, but looking forward to picking it up after v1.0 is out.

For now, keep ESM importing that CSS :)

---
import "../some-relative-file.css";
import "bootstrap";
import "@fontsource/roboto";
---