Replies: 1 comment
-
|
Thanks for the discussion comment! I will first point out that we can really only address the first issue here in this repo, with respect to how we document how Astro already and currently works. We can't go changing features here! 😄 So I would encourage you to first check out the Astro Roadmap and see if there are any current CSS proposals that fit what you're thinking of. If not, that is the place to propose a new or different implementation! And, maybe if that attracts interest, then we don't change docs until we know if there are actual feature changes coming that would require us to update docs anyway. I do know that, at least when written, those methods in the "Advanced" section were really intended to be there and were not really encouraged. As you've said, times change, and maybe this is no longer the case. But I haven't received any updated guidance from our framework team that they no longer feel this way. That could be something else to ask/discuss in a roadmap proposal for your proposed reworked implementation! I don't mean to be "passing the buck", but it does feel like maybe this whole thing together could be a new And, I am the most "only the minimal asides/cautions needed!" person you'll find, but it does look like those may in fact be warning not against using the methods, but rather of particular consequences that may not be intuitive to our readers. If you can get one of our devs to sign off on "Yeah, those are no longer needed; this is pretty standard stuff now" then I will HAPPILY remove them. 😄 I do think maybe a roadmap discussion or post on Discord where you can first see how your proposed implementation is received makes sense as a first step? Would you be interested in/willing to try one of those avenues? Thank you again for contributing to Astro! I'm glad you're generally having a great experience! 🚀 |
Beta Was this translation helpful? Give feedback.
-
Use case
Get common site-wide styles into an internal stylesheet in the
<head>of my layout. This improves page performance because there's no delay waiting for it to download and the browser can immediately start the style calculations and paint.What I did
That works, i.e. Astro (or Vite or both?) takes the
m-.cssstylesheet from the Mdash package and puts it in a regular old<style>tag.This gives me the end result I needed, but it was not intuitive and only after finding the buried docs and ignoring the big CAUTION alert, I figured it out (and not on the first try either, I tried a few different iterations trying to get as close to what I wanted).
Proposal
First, I think Astro should move this approach out of the Advanced section on this page. In my experience, this is a well-known strategy used regularly by teams focused on site performance. There's also been several issues raised here in the Astro project to support critical CSS, so I think it's more mainstream that assumed. At a minimum, please delete the CAUTION alert.
Second, I think the directives could used some improved naming. This is more clear and helpful imo:
is:external- these styles will be moved to an external stylesheet and this style tag will become a link tagis:internal- (default) these styles will stay right here in the style tagis:global- these styles will not be scoped, where they go depends on the external/internal directive (that's a breaking change)is:imported- all@importat-rules will import at build time, whether the stylesheet is further processed depends on its?rawflagMy implementation above becomes:
Now all relevant code is together in one place where you would hope to find it - at the style tag. I also know that I'm getting
I really like that this would eliminate the need for a developer to first go to the front matter and use JavaScript to import CSS and then use that variable in the HTML. That just doesn't align with my perception of Astro's simplicity and apparent preference for web standards. Also , not continuing with this import approach I think would be wise as the import CSS with JS story is going to get a bit more messy/complicated as Constructable Stylesheets and the
with { type: "css" }assertions start to land in all browsers.Btw, I'm loving Astro. Great work! It's the first thing in the web space in 5+ years that I've found to be really compelling, like abandon my old tech preferences level of compelling.
Beta Was this translation helpful? Give feedback.
All reactions