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

Imported/Declared CSS from $layout.svelte is not ignored with $layout.reset.svelte. Dev and Build include different CSS <link> in different order #1100

Closed
DhyeyMoliya opened this issue Apr 18, 2021 · 5 comments
Closed

Imported/Declared CSS from $layout.svelte is not ignored with $layout.reset.svelte. Dev and Build include different CSS <link> in different order #1100

DhyeyMoliya opened this issue Apr 18, 2021 · 5 comments
Labels
bug Something isn't working

Comments

@DhyeyMoliya
Copy link

Describe the bug

  1. I have the main $layout.svelte and a $layout.reset.svelte for /admin path
  2. In $layout.svelte, we declare some <style> or import some stylesheet import ../../../*.css or ../../../*.scss.
  3. In $layout.reset.svelte, we declare same <style> or import some stylesheet import ../../../*.css or ../../../*.scss.
  4. When we open http://localhost:3000/admin,
  5. In svelte-kit dev, both <style> from $layout.svelte and <style> from $layout.reset.svelte are applied.
  6. In svelte-kit build output, both <link href="layout.css"> and <link href="$layout.reset.css"> are applied.
  7. Main Issue is, both Styles are applied even if we have reset the layout.
  8. Another Issue is, in build output's <head> tag, <link href="$layout.reset.css"> is preceded by <link href="layout.css">, resulting in an output where style from $layout.svelte are applied instead of $layout.reset.svelte after build. Because of the declaration order of CSS.

svelte-kit dev output :

Screenshot 2021-04-18 at 5 57 29 PM

svelte-kit build output :

Screenshot 2021-04-18 at 5 59 23 PM

Logs
No Logs.

To Reproduce

  1. Create new SvelteKit project.
  2. Create a $layout.svelte at the root of routes folder
  3. Create a $layout.reset.svelte at any sub route (e.g /admin).
  4. Add <style> or import some style file in both $layout.svelte and $layout.reset.svelte.
  5. Check different behaviours of svelte-kit dev and svelte-kit build.

or

Reproduction Repo : https://github.com/DhyeyMoliya/sveltekit-css-issue

  1. main branch for <style> example
  2. style-import branch from import ../../*.css example

Expected behavior

  1. It should apply CSS (<style> or import "../../*.css" or "../../*.scss") from $layout.reset.svelte only.
  2. Style from $layout.svelte should not be included in the output of a reset route (eg. /admin in this case).
  3. Order of CSS <link> declaration should be correct.

Information about your SvelteKit Installation:

Diagnostics

  • The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit,vite --binaries --browsers
    System:
    OS: macOS 11.2.3
    CPU: (8) x64 Apple M1
    Memory: 35.38 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
    Binaries:
    Node: 14.15.4 - /usr/local/bin/node
    npm: 7.6.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /opt/homebrew/bin/watchman
    Browsers:
    Chrome: 89.0.4389.128
    Edge: 89.0.774.76
    Safari: 14.0.3
    npmPackages:
    @sveltejs/kit: next => 1.0.0-next.78
    svelte: ^3.29.0 => 3.37.0
    vite: ^2.1.0 => 2.1.5

  • Your browser
    Edge

  • Your adapter (e.g. Node, static, Vercel, Begin, etc...)
    @sveltejs/adapter-node@1.0.0-next.14

Severity
How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of SvelteKit entirely?
Issue 1 - Severe - The build output and dev should give same outputs.
Issue 2 - Normal - Only the correct css should be applied

Note: the more honest and specific you are here the more we will take you seriously.

Additional context
I'm happy to give more explanation.
A SvelteKit REPL would really help in raising issues with examples.
@GrygrFlzr GrygrFlzr added bug Something isn't working router and removed router labels Apr 18, 2021
@DhyeyMoliya
Copy link
Author

DhyeyMoliya commented Apr 28, 2021 •
edited
Loading

$layout.reset.svelte is not actually a layout reset for css as the $layout.svelte file's CSS is still applying alongside $layout.reset.svelte.

Also, after npm run build, the $layout.svelte's CSS is prioritised by browser instead of $layout.reset.svelte. Because of the order of <link> tags in the rendered HTML.

@tylerbrostrom
Copy link

Can also confirm that stylesheets imported into the root $layout.svelte are present from routes with an associated $layout.reset.svelte.

Expectation is that module side-effects such as this would also be removed for routes with an associated $layout.reset.svelte.

@DhyeyMoliya
Copy link
Author

My current workaround is to

  1. Build my .scss files outside SvelteKit using sass and putting them into static folder.
  2. And Including CSS files in $layout.svelte and $layout.reset.svelte by adding <link> tag inside <svelte:head>

@DhyeyMoliya DhyeyMoliya mentioned this issue May 6, 2021
Closed
5 tasks
@Rich-Harris
Copy link
Member

Cross-posting from #1356 (comment):

Thank you. The current behaviour is deliberate though — the idea is that if a navigation fails, you need to have the root layout/error components available in memory (rather than a network request away, since a common reason for said failure is a lack of connectivity) so that things don't fall apart. This does cause a wasted request in the case where you initially hit a page with a layout reset, but on balance I think it's preferable.

@DhyeyMoliya
Copy link
Author

It seems there is no solution to this problem for now. Closing this issue.

@DhyeyMoliya DhyeyMoliya mentioned this issue Oct 24, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix $layout.svelte styles being imported in routes having $layout.reset.svelte
4 participants
@Rich-Harris @GrygrFlzr @tylerbrostrom @DhyeyMoliya