Whitespace in Astro 7.0

There’s some new default whitespace handling in the latest version of Astro!

I noticed that when I updated my blog template (this blog! Right here!) to the new Astro 7.0, a bunch of words and spacing were broken up in weird ways.

Turns out, in the brand new Rust compiler, there’s some very specific JSX changes. Before, if you had two elements one after the other, like so:

<span>Howdy</span>
<span>y'all</span>

It would render as “Howdy y’all” on the page.

But, in version 7.0, it would render as “Howdyy’all” instead, with no space.

If you wanted to fix it, you’d have to do:

<span>Howdy</span>{' '}<span>y'all</span>

Which is very JSX-y like React and other similar frameworks.

It was a bit of an annoying change for me, because my blog template has lines like this in a few components that were now rendering incorrectly:

<a href={`/post/${slug}/`} class="title">{title}</a>
<time datetime={date}>
    {
        new Date(date).toLocaleDateString("en-us", {
            year: "numeric",
            month: "short",
            day: "numeric",
        })
    }
</time>

But! There’s a solution here, if you don’t want to edit all of your components and templates (like me). In your astro.config.json, add the following compressHTML in defineConfig:

export default defineConfig({
    // ...
    compressHTML: true,
});

You can see it in context in my template here, if you’d like.

I hope this is helpful for ya! Here’s the upgrade guide for more details!