Styles loaded from server not applied

ziedHamdi commented 1 year ago

Describe the bug

I'm really confused because I don't know if this is related to svelte endpoints or to how styles are loaded. This is my issue:

I'm trying to load a Css file from the server (to allow users to edit templates). All I'm doing is to to create an endpoint that returns a css content.

NOTE: I checked that the css file is correctly loaded, and checked that the style syntax is valid. I just can't find any explanation on why it doesn't work

like follows:

export async function GET({ params }) {
    const { templateId } = params;
    let cssContent
    console.log('responding to request for templateId : ', params);
        cssContent = `
html, body {
    background-color: blue;
}
div {
  border: 1px solid gray;
}
`;
    // Return the CSS content as a response

    return new Response(cssContent, { headers: { 'Content-Type': 'text/html; charset=utf-8' } });
}

and I load that endpoint in app.html <link rel='stylesheet' type="text/css" href='%sveltekit.assets%/css/default.css'>

Reproduction

https://github.com/ziedHamdi/svelteServerCss/tree/master

Logs

No response

System Info

System:
    OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Memory: 17.53 GB / 31.25 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.14.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 9.6.6 - ~/.local/share/pnpm/npm
  Browsers:
    Chrome: 113.0.5672.92
    Firefox: 113.0.1
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.0.1 
    @sveltejs/kit: ^1.5.0 => 1.16.3 
    svelte: ^3.54.0 => 3.59.1 
    vite: ^4.3.0 => 4.3.7

Severity

serious, but I can work around it

Additional Information

The reason why I'm trying to do this is because it's impossible to dynamically add css classes to a page. There's an SF question about the issue here: https://stackoverflow.com/questions/76091194/using-dynamic-css-class-loading-in-sveltekit

p.s: As I saw the answer to another issue I tried to insert the style through

<svelte:head>
    <link rel="stylesheet" href="/css/default.css" />
</svelte:head>

That also didn't work

gtm-nayan commented 1 year ago

Fix the content type in your endpoint, text/css instead of text/html, either remove %sveltekit.assets% in app.html or use the script you posted, both of them will work afterwards

ziedHamdi commented 1 year ago

Digging a little bit more, I created an html page with a link to the css file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blue</title>
    <link rel='stylesheet' type="text/css" href='http://localhost:5174/css/default.css'>
</head>
<body>
    <div>Hello everybody</div>
</body>
</html>

Then I opened the file in the browser, in dev tools, when I go to the css file, and modify it, suddenly all styles are applied correctly. I don't understand what can be the cause for that. But I suspect the endpoint not to close the connection, letting the browser hanging waiting for more bytes...???

ziedHamdi commented 1 year ago

text/css

Just saw your answer! thanks a lot

sveltejs / kit