Blasting Off with Astro
Maybe “blasting off” is the wrong choice of words. Due to life stuff, I completely got thrown off course. I had planned to rewrite mtype with Astro mere moons ago. While Astro was nearing its beta stage, I decided to switch gears a bit and work on a theme which would set the foundation for mtype. However, that didn’t go according to plan either, also due to that life stuff mentioned earlier.
Choosing a CSS Path Forward
Regarding the theme, I originally opted for Open Props rather than relying on my own CSS library, simply because it hadn’t been completed; never mind documented. Some might say, I was at a crossroad.
Around March 2022, Nate Moore had announced TokenCSS on Frontend Horse. It’s my assumption, because so many frontend developers are entranced by Tailwind, this wouldn’t reach their radar as it did mine. To someone whose whole orbit revolves around writing CSS, TokenCSS is the best thing since Sass; or at least the potential is there. As silly as it seems, my main gripe regarding CSS variables is its verbosity. To this day, it ails me. Sass is so concise, keeping it sexy with a single dollar sign. While CSS properties contains this slue of nonsense: var(--wtf-freckless-nonsense). Reading and writing simple variables doesn’t require a linguist. But as soon as several variables are introduced within some calc function, or begin referencing other variables – welcome to the varhunt.
TokenCSS abstracts away said nonsense. For example, no need to write background: var(--color-primary). Instead, simply scribe, background: color-primary. While this is not the sole purpose for choosing TokenCSS, it is quite nooice.
TokenCSS is still very green. Currently, the autocomplete intellisense is absent even with the TokenCSS extension installed. The syntax color highlighting is also wildly inaccurate within .css files.
Another route I explored was introduced by Andy Bell whereby Tailwind was used in an “unconventional” manner. By unconventional, I mean, without Tailwind’s built-in-billion utility classes. Instead, the class names’ naming conventions were tailored by his own javascript functions which referenced his tokens from JSON files. Since Tailwind is now fully le’JIT (Just In Time), no excess bloat will end up in the production build either. The days of PurgeCSS are nevermore.
In the interim, I’m just writing raw css properties – nothing fancy – naming them similar to how I’d expect to see my design tokens flattened out. Example: --color-white. Then, I’m using the PostCSS JIT Props plugin; pointing it at the variables.css file; so it only adds the necessary tokens to the page.
Migration From Gridsome
Prior to Astro, Gridsome was my grail. Gridsome was brilliant for writing markdown while effortlessly pulling data from vast GraphQL and REST API sources. Compared to Gatsby, Gridsome was made for someone who preferred writing template tags to JSX logic. Vue was easier for me to comprehend than React; or at least more appealing. I would’ve stuck with Gridsome today if it wasn’t for its still-TBA death.
With that said, I oddly ended up here, persuaded by a framework that actually uses JSX …plus template tags, plus single file components, plus other library integrations. Astro has also been my gateway drug to other libraries, too, like SvelteKit and NextJS.
Astro, by design, its documentation, and helpful community have made it all possible to get up and running without much effort.
For my own purposes, I also needed the ability to fetch my playlists, movie picks, and bookmarks without fuss. With Astro, it’s possible to use node fetch on the server, and Astro will render the queried data to the page. Simple doesn’t get any simpler.
Outro Remarks
Image Transformations
As I continue to praise Astro, there are needed improvements for image handling. Prior to the Astro team developing their own image transformation tool, its feature-set isn’t as rich as Astro Imagetools, a 3rd-party package. And due to breaking changes regarding markdown files, Astro Imagetools will no longer automatically transform inline images. We all know what happens when image files are left without optimization. Duh, dolphins die.
Debugging
As someone who writes CSS all day long, the sourcemaps issue still lingers on; since beta 1.0.0-41 to be precise. I’m afraid this won’t be solved unless it’s inadvertently addressed by some other issue. Basically, in devtools, Astro (or Vite) duplicates CSS properties as both component and page which can make debugging soarer than an eyesore. Update: The CSS sourcemaps issue has finally been fixed!
Looking Ahead
Astro already treats markdown as a first-class citizen, supporting both .md and .mdx files along with various markdown extensions. Now, content collection schemas are being introduced for type checking, making content management next level.
Currently, Astro can build out static or server-side rendered pages. There’s already an experimental hybrid approach for pre-rendering specific pages when running in SSR mode.
Looking forward to Astro@Next!
Article Credits
Photo by julien Tromeur on Unsplash