Blog Fun

Programming woes no matter the framework.

Since I’ve started learning how to use Astro to build a static site, I’ve quickly realized that there are some pain points that come with it that I’ve got to deal with. Over the past few nights I’ve spent a lot of time trying to build out the blog portion of this site a little more. I very quickly ran into a few problems…

---

The First Problem

First off, the very first deployment of my brand new rewritten site was completely broken! As it turns out, importing styles in Astro is a bit weird when you look at the output of astro dev and the real output of astro build. Global styles, for some reason or another, don’t clash when running the dev server. They do, however, clash horribly after building. For example: If you import a stylesheet like this in the frontmatter:

---
import '../styles/blog.css';
---

it’s considered a global import. This will clash with global styles.

However, if you import a stylesheet like this in the HTML:

<style>
    @import url('../styles/header.css');
</style>

it works just as you’d want.

To me, this behavior is really strange. If I run a dev server, I’m expecting it to behave exactly the same when it’s built.

---

The Second Problem

Coincidentally, the very next problem I ran into I solved by using this behavior to my advantage.

If you read the Astro Styling Guide, you can see that they clearly promote using global styling for your markdown content. After sleeping on it for a night, I realized I could simply make a global import work like it was scoped. Everything inside a div of class blog gets their styles overwritten!

---
// Workaround to import CSS that will work with slot'd md->html content.
// Must import global styles - these are scoped to .blog items
import '../styles/blog.css';
---

And with that, everything finally works, and my website looks just like I expect it to.

---

Future Problems?

I’m still happy with Astro despite the weird problems early on. I think this is mostly unfamiliarity with the framework as I get used to it. Without any new problems yet, Astro is still promising. Just like with any framework, I’ll find something I don’t like here or there, but I’ll work with it anyway.