Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Imported/Declared CSS from $layout.svelte is not ignored with $layout.reset.svelte. Dev and Build include different CSS <link> in different order
See original GitHub issueDescribe the bug
- I have the main
$layout.svelteand a$layout.reset.sveltefor/adminpath - In
$layout.svelte, we declare some<style>or import some stylesheetimport ../../../*.css or ../../../*.scss. - In
$layout.reset.svelte, we declare same<style>or import some stylesheetimport ../../../*.css or ../../../*.scss. - When we open
http://localhost:3000/admin, - In
svelte-kit dev, both<style>from$layout.svelteand<style>from$layout.reset.svelteare applied. - In
svelte-kit buildoutput, both<link href="layout.css">and<link href="$layout.reset.css">are applied. - Main Issue is, both Styles are applied even if we have
resetthe layout. - Another Issue is, in
buildoutput’s<head>tag,<link href="$layout.reset.css">is preceded by<link href="layout.css">, resulting in an output where style from$layout.svelteare applied instead of$layout.reset.svelteafter build. Because of the declaration order of CSS.
svelte-kit dev output :
svelte-kit build output :
Logs No Logs.
To Reproduce
- Create new SvelteKit project.
- Create a
$layout.svelteat the root ofroutesfolder - Create a
$layout.reset.svelteat any sub route (e.g /admin). - Add <style> or import some style file in both
$layout.svelteand$layout.reset.svelte. - Check different behaviours of
svelte-kit devandsvelte-kit build.
or
Reproduction Repo : https://github.com/DhyeyMoliya/sveltekit-css-issue
mainbranch for<style>examplestyle-importbranch fromimport ../../*.cssexample
Expected behavior
- It should apply CSS (
<style>orimport "../../*.css" or "../../*.scss") from$layout.reset.svelteonly. - Style from
$layout.svelteshould not be included in the output of a reset route (eg./adminin this case). - 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 --browsersSystem: 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.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Can also confirm that stylesheets imported into the root
$layout.svelteare 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.It seems there is no solution to this problem for now. Closing this issue.