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.

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

Preload settings affect stylesheet loading for current page #8238

Closed
arackaf opened this issue Dec 20, 2022 · 2 comments · Fixed by #9255
Closed

Preload settings affect stylesheet loading for current page #8238

arackaf opened this issue Dec 20, 2022 · 2 comments · Fixed by #9255
Labels
bug Something isn't working low hanging fruit ready to implement please submit PRs for these issues!
Milestone

Comments

@arackaf
Copy link

arackaf commented Dec 20, 2022

Describe the bug

With the following content in hooks.server.ts

export async function handle({ event, resolve }: any) {
  const response = await resolve(event, {
    preload: ({ type }: any) => type === "font"
  });

  return response;
}

after an npm run build and npm run preview, running the page shows needed stylesheets are not loaded into , causing FOUC.

Adding a preload for css fixes it (or just not including any preload at all)

image

Reproduction

See code above - hopefully that's sufficient

Logs

No response

System Info

System:
    OS: macOS 13.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 1.09 GB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.2 - /usr/local/Cellar/nvm/0.38.0/versions/node/v16.14.2/bin/node
    Yarn: 1.22.17 - /usr/local/Cellar/nvm/0.38.0/versions/node/v16.11.1/bin/yarn
    npm: 9.2.0 - ~/Documents/git/booklist/svelte-kit/node_modules/.bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 108.0.1
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.89 
    @sveltejs/kit: ^1.0.1 => 1.0.1 
    svelte: ^3.44.0 => 3.54.0 
    vite: ^4.0.1 => 4.0.1

Severity

serious, but I can work around it

Additional Information

No response

@Rich-Harris Rich-Harris added bug Something isn't working low hanging fruit ready to implement please submit PRs for these issues! labels Feb 3, 2023
@Rich-Harris Rich-Harris added this to the soon milestone Feb 3, 2023
@Rich-Harris
Copy link
Member

Yeah, <link rel="stylesheet"> should always be generated, regardless of the return value from preload. In the case of stylesheets the preload function should only be used to determine whether a stylesheet is added to the Link header

@Devr-pro
Copy link

I had the same issue, it creates a large layout shift and renders a unstyled page at the first paint.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working low hanging fruit ready to implement please submit PRs for these issues!
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants