compiler icon indicating copy to clipboard operation
compiler copied to clipboard

Slots remove whitespace where it shouldn't when `<style>` is used

Open Lectem opened this issue 1 year ago • 4 comments

Astro Info

Astro                    v5.2.5
Node                     v22.13.1
System                   Windows (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/sitemap

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Whitespaces are being stripped between multiple <span> elements when using Layout components (<slot>), if and only if a <style> is present. This leads to inconsistent rendering between using slots and not using slots.

Weirdly, this is something that was discussed in https://github.com/withastro/astro/issues/6893, and it was mentioned that astro not removing whitespaces was a feature !

What's the expected result?

Astro should have the same rendering results whether <slot/>/<style> are being used or not.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-wwx73rkk?file=src%2Fpages%2FindexWithLayout.astro

Participation

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

Lectem avatar Feb 08 '25 22:02 Lectem

Reposting my reply to a user on discord encountering the same issue

I think this has to do with Astro preserving whitespace when only a style (or script) tag remains in a component body

Astro mostly follows the html spec that's why whitespace is meaningful, but in such a case where a style tag is the last node in the component (and are stripped off and injected in the page head), we could probably ignore trailing whitespace

A workaround for now is to avoid whitespace between the a tag and the style tag

<a>Page</a><style>
  a {
    /*...*/
  }
</style>

MoustaphaDev avatar Apr 07 '25 12:04 MoustaphaDev

Please fix 🙏

arch-fan avatar Apr 08 '25 19:04 arch-fan

I'm using VSCode with the Astro formatter, and there is indeed a single space character after long paragraphs of text that get broken into multiple lines in the code editor. Even after building and deploying the website. It doesn't matter whether my code uses spaces or tabs for indentation. When putting the paragraph on a single line in Notepad for example, it does not add the extra space. But in VSCode there is no extra space and Astro still renders it.

daanheskes avatar Apr 20 '25 19:04 daanheskes

So it's a formatter issue?

arch-fan avatar Apr 24 '25 09:04 arch-fan