CSS not applied to nested route layouts (server-rendered only)

[rodoch]

Describe the bug
When using a nested _layout.svelte component CSS does not appear to be applied to any markup defined within that layout component (the markup within the layout remains unstyled). When the component is subsequently hydrated the client JS does inject the relevant styles. This makes the bug hard to spot but its effects can be clearly seen if:

• You are using a slower or throttled connection (you will get a flash of unstyled content), or;
• JS is disabled in the browser, in which case the styles are never applied.

Some important clarifications:

• This bug affects both markup and styles defined directly within the layout component as well as any child components imported directly into the layout component (i.e. styles defined in these components are not applied either.)
• This bug does not affect slotted content within the layout component.
• This bug does not affect the top-level layout component; only layouts nested one level down or deeper seem to experience this issue.

Logs
There are no relevant error logs or warnings.

To Reproduce
Please find a minimal repro here: https://github.com/rodoch/sapper-repro

This is the base Sapper template with two changes:

• Svelte bumped to v3.29.0 & Sapper bumped to v0.28.9
• The src/blog directory now contains a nested _layout.svelte file with one styled div.

Again, the surest method to observe the behaviour is to disable JS in your browser or to simulate a throttled connection.

1. Navigate to /blog.
2. With JS enabled, you should see an ugly green div (possibly after a FOUC).

3. Without JS enabled, the div remains unstyled and, in this case, less ugly.

Expected behavior
The styles defined in the layout component and any of its child components should be included with the server-rendered page.

Information about your Sapper Installation:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 352.97 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.16.1 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 85.0.4183.121
    Firefox: 81.0
    Firefox Developer Edition: 78.0
    Safari: 14.0
  npmPackages:
    rollup: ^2.3.4 => 2.28.2 
    sapper: ^0.28.9 => 0.28.9 
    svelte: ^3.29.0 => 3.29.0 

• Tested with Chrome, Firefox, Edge latest

• Local environment, Azure deployment

• Dynamic application

Severity
Blocker

Additional context
I appreciate the work you did on #1505 and I feel bad coming back with another CSS issue! It's definitely getting there though.

I did consider the issue described in #1572 but I am using Rollup 2. I'm curious if this could be in any way related to #1564.

[benmccann]

It looks like Sapper 0.28.0 included the layouts in the build.json and that's no longer happening

      "blog/_layout.svelte": [
        "_layout.5f343352.css",
        "client.dc771b6b.css"
      ],

[benmccann]

You can fix it by removing && !file_path.includes(path.sep + '_') from the line below:

sapper/src/core/create_compilers/RollupCompiler.ts

Line 244 in 43fd91b

return file_path.includes(that.routes) && !file_path.includes(path.sep + '_') && !file_path.endsWith('.css');

We should add a test though to make sure we don't break it again. Would you be able to send a PR with the fix and a test?

[rodoch]

Thanks @benmccann I have very little experience writing tests in JS but I will give this a go over the weekend. I'd love to get this in before the next release.

[benmccann]

That'd be great! Thank you!

There's a sample app and tests for the css here:
https://github.com/sveltejs/sapper/tree/master/test/apps/css

I would start by updating the sample app to reproduce the issue similar to your reproduction repo and then write a test that fails on master. The you can change that line and hopefully see that the test passes

[Conduitry]

This should be fixed in 0.28.10.

[suciptoid]

Hi, I'm facing something simillar.

When page load in server side render (direct access eg: /dashboard), the script on page not work. But when in client side render (eg: navigating from login page -> dashboard), it work.

Reproduce: https://github.com/tegalan/sapper-tailwind-bug-reproduce
Video demo: https://github.com/tegalan/sapper-tailwind-bug-reproduce/blob/main/Screen%20Recording%202020-10-30%20at%2022.34.49.mov

The problem occurs when:

1. Nested layout (not affected nested route without _layout.svelte)
2. Using svelte-preprocess
3. Server render

[benmccann]

@suciptoid can you file a new issue for this? It will get lost as a comment on a closed issue

[suciptoid]

@benmccann done