A new line character in the jsx-like syntax we write in.astro files adds an extra space to the generated markup

[flexdinesh]

What version of astro are you using?

1.7.1

Are you using an SSR adapter? If so, which one?

No

What package manager are you using?

yarn

What operating system are you using?

Mac

Describe the Bug

I apologize in advance about this vague bug. I couldn't exactly put a pin on what is going on or when it happens but I have noticed it multiple times while building blogster and I am pretty sure there is an extra-space bug somewhere.

The spacing and formatting in .astro files affects the generated markup. Sometimes an extra space is added to the generated span or a elements (usually inline elements).

This code doesn't add the extra space in the generated markup

// IMPORTANT - DO NOT ADD EXTRA LINE TO THE END OF THIS FILE.
// ASTRO ADDS AN EXTRA SPACE IN ANCHOR TAGS WHEN YOU DO.
---

{
  node.shouldRenderChildren() ? (
    // IMPORTANT - DO NOT SELF CLOSE THIS TAG. ASTRO FREAKS OUT.
    <Fragment set:html={children}></Fragment>
  ) : node.shouldRenderSelf() ? (
    // @ts-ignore
    content.map((element) => {
      return <Astro.self content={element} components={components} />;
    })
  ) : node.shouldRenderTag() ? (
    <Tag {...props}>
      {node.hasChildren() ? (
        <Astro.self content={children} components={components} />
      ) : null}
    </Tag>
  ) : null
}

Correctly generated markup without any extra space:

But this code does (code is exactly same but notice the extra line at the end of file)

---

{
  node.shouldRenderChildren() ? (
    // IMPORTANT - DO NOT SELF CLOSE THIS TAG. ASTRO FREAKS OUT.
    <Fragment set:html={children}></Fragment>
  ) : node.shouldRenderSelf() ? (
    // @ts-ignore
    content.map((element) => {
      return <Astro.self content={element} components={components} />;
    })
  ) : node.shouldRenderTag() ? (
    <Tag {...props}>
      {node.hasChildren() ? (
        <Astro.self content={children} components={components} />
      ) : null}
    </Tag>
  ) : null
}

Incorrectly generated markup with extra space:

This commit is what fixed the extra space that was added to the generated a elements in Blogster. I had to turn off my prettier auto formatting to format the jsx-like code manually to avoid this extra space being generated in inline markup elements.

If I try to replicate it in a new astro example in Stackblitz using astro.new it doesn't happen so I couldn't provide a simple reproducible example. But I have noticed this happen multiple times in Blogster and I have a feeling it might have something to do with either my prettier formatting or astro-markdoc-renderer.

There is not really a way to replicate it other than directly editing the astro-markdoc-renderer package in node_modules and restarting the server in my blog repo - dineshpandiyan.com. If you add the new line at the end, the a elements in the blog posts will have the extra space. If it helps, it actually works fine in blogster repo since it's a monorepo and the astro-markdoc-renderer package is locally symlinked. It just doesn't work when the package is imported from node_modules in a separate repo like my blog dineshpandiyan.com. And that's what confuses me the most.

If this is not enough information, please feel free to close this issue. If you need more info, perhaps I could record a video of editing the package directly in node_modules and show it happen.

Link to Minimal Reproducible Example

There's no reproducible example link sorry. Please check the issue description above for more info.

Participation

• I am willing to submit a pull request for this issue.

[Princesseuh]

Had the newline been inside the expression, I would've said this is caused by withastro/prettier-plugin-astro#308, but since it's really the ending of the file, not too sure 🤔

[natemoo-re]

I think I know what is causing this, by default our compiler preserves all the whitespace in your file. It should strip out trailing whitespace at the end of the file, but it looks like it is still included in the generated markup. I'll try to look into this.

[flexdinesh]

Thanks @natemoo-re 🙌

[SeanMcP]

This appears to still be an issue: https://stackblitz.com/edit/github-wg8oqd?file=src/pages/index.astro

I'm seeing it in astro@2.0.9 locally and astro@2.0.16 in the reproduction above.

[jahirfiquitiva]

I'm also facing the very same issue with Astro 4.0.7 🙃

https://discord.com/channels/830184174198718474/1188517356801114173

[Streudal]

Same issue in Astro 4.2.5

@SeanMcP example in StackBlitz is has a perfect example of this happening in Astro 2.0.16.

But here are some snippets to reproduce:

BAD

---
// BrokenComponent.astro
---

<a href="https://astro.build/">
  <slot />
</a>

GOOD

---
// GoodComponent.astro
---

<a href="https://astro.build/"><slot /></a>

OR

---
// GoodComponentWithFormatting.astro
// Formatted used Astro prettier plugin
---

<a href="https://astro.build/">
  <slot /></a
>

[seunggs]

Just an FYI - similar issue during using mdx component to customize the code fence where an extra space is added at the beginning of the code block if I do:

<div>
  <slot />
</div>

Which goes away if I do:

<div><slot /></div>