Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Styles are rendered inside the body, instead of the header in certain combinations using slots #6185

Closed
1 task
prototypa opened this issue Feb 9, 2023 · 7 comments · Fixed by #6196 or #6216
Closed
1 task

Styles are rendered inside the body, instead of the header in certain combinations using slots #6185

prototypa opened this issue Feb 9, 2023 · 7 comments · Fixed by #6196 or #6216
Assignees
@matthewp
Labels
- P5: urgent Fix build-breaking bugs affecting most users, should be released ASAP (priority)

Comments

@prototypa
Copy link

What version of astro are you using?

2.0.9

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

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

Since Astro version 2.0.4 something changed that causes for certain uses of slots (https://docs.astro.build/en/reference/api-reference/#astroslotsrender), the main styles (link) are rendered inside tags in the body instead of in the header. This causes page speeds problems with CLS (cumulative shift).

You can check the problem in the following repository: https://github.com/prototypa/astro-styles-in-body-with-slots

Once the build is done, the result of the html page is the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>

  <body>
    <main>
      <section class="bg-slate-50">
        <div class="mx-auto text-center max-w-3xl px-4 py-8 md:py-16">
          <h1 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter">Lorem ipsum lorem</h1>
          <p class="mt-4 text-xl text-gray-500">
            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
          </p>
          <div class="mt-4">
            <link rel="stylesheet" href="/_astro/good.857198b4.css" />
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat.
            </p>
            <p class="mt-4">
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
              laborum.
            </p>
          </div>
        </div>
      </section>
      <div class="text-center p-4">
        <a class="text-blue-500 underline" href="good">To good example »</a>
      </div>
    </main>
  </body>
</html>

In that example repository you can see how index.astro is generated with styles incorrectly, however the page good.astro resolves the styles ok, but doesn't use slots the way we used it in that demo's component: Widget.astro

We have done many tests and combinations before submitting this issue. We have not been able to resolve the issue. If you can help us please. Thank you.

PD: This problem has caused us to have the version of Astro fixed at 2.0.2. in AstroWind

Link to Minimal Reproducible Example

https://github.com/prototypa/astro-styles-in-body-with-slots

Participation

  • I am willing to submit a pull request for this issue.
@prototypa prototypa mentioned this issue Feb 9, 2023
Closed
@matthewp matthewp added the - P5: urgent Fix build-breaking bugs affecting most users, should be released ASAP (priority) label Feb 9, 2023
@matthewp matthewp self-assigned this Feb 9, 2023
@matthewp
Copy link
Contributor

matthewp commented Feb 9, 2023

Thanks, there has been some changes here to prevent styles from rendering in the body. It sounds like it must have broke some other cases. Will prioritize getting this fixed.

@drumsta
Copy link

drumsta commented Feb 9, 2023

Hello,

I have encountered exactly the same issue and was about to open the issue.

I've prepared very minimal example to localize the issue, hope that will help you.

https://github.com/drumsta/astro-slot-render

Regards,

@matthewp
Copy link
Contributor

matthewp commented Feb 9, 2023

@drumsta Yep, the user of slots.render() is the issue here. Working on a solution now. Thanks for the extra repro!

@matthewp matthewp mentioned this issue Feb 9, 2023
Merged
@matthewp
Copy link
Contributor

matthewp commented Feb 9, 2023

PR up: #6196

@prototypa
Copy link
Author

Thank you so much @matthewp,
I already updated to version 2.0.10 and AstroWind once again has 100 PageSpeed.

@drumsta
Copy link

drumsta commented Feb 9, 2023

Hi @matthewp !

Thank you for addressing the issue.

Unfortunately, the issue still exist in a more complicated scenario, which is the real case in my own project.

I've update the repo that you would be able reproduce the issue.

https://github.com/drumsta/astro-slot-render

Regards,

@matthewp
Copy link
Contributor

matthewp commented Feb 9, 2023

Ah, sorry to hear that @drumsta. I'll take your new test case and incorporate it. Thanks for your patience, I think we're close to getting through these issues.

@matthewp matthewp reopened this Feb 10, 2023
@matthewp matthewp mentioned this issue Feb 10, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@matthewp matthewp

Labels
- P5: urgent Fix build-breaking bugs affecting most users, should be released ASAP (priority)
Projects
None yet
Milestone
No milestone
3 participants
@matthewp @drumsta @prototypa