Repository: sveltejs/sapper

Issue #1024: :global(body) {} rules override each other on 2 different components when only one is used (via <svelte:component>)
Created: 2019-12-10T22:34:10Z
Describe the bug
When you want to have 2 layouts that have :global(body) { ... } rule and you change the layout based on a condition, those 2 rules override each other and the last imported one wins.
Logs
There's no error/warning.
To Reproduce
It work on repl ironically but just create a repl like this and just implement those on _layout.svelte. https://svelte.dev/repl/c6495a98d8d945428ad8958f642cb6a7?version=3.16.3
Although the Sapper equivalent is like this:
_layout.svelte:
<script>
	import Layout1 from '../components/Layout1.svelte';
	import Layout2 from '../components/Layout2.svelte';
	
	const myCondition = Math.random() > .5;
	
	const layout = (myCondition)
		? Layout1
		: Layout2;
</script>

<svelte:component this={layout}>
	{myCondition ? 'blue' : 'red'}
</svelte:component>
Layout1.svelte:
<style>
	:global(body) {
		background-color: blue;
	}
</style>

<slot/>
Layout2.svelte:
<style>
	:global(body) {
		background-color: red;
	}
</style>

<slot/>
Expected behavior
Those rules shouldn't override each other as in the repl.
Information about your Sapper Installation:


Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10)
Firefox Developer Edition, version 72.0b4 (64bit)


Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc)
Void Linux (kinda like Arch if you don't know anything about it)


Your hosting environment: (i.e. Local, GCP, AWS, Now, etc...)
Local


Sapper version (Please check you can reproduce the issue with the latest release!)
0.27.9


Svelte version (Please check you can reproduce the issue with the latest release!)
3.16.3


If it is an exported (npm run export) or dynamic application.
dynamic


Whether your application uses Webpack or Rollup
rollup (1.27.9)


Severity
How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Sapper entirely?
It just annoying and I don't want to make any hack.

Duplicate issue #1032: Buggy `:global(...)` modifier behavior.
Created: 2019-12-20T22:28:48Z
Describe the bug
Buggy :global(...) modifier behavior. A style added to an element outside the component in which the modifier is used in, will persist even after route change.
The style is updated if another component uses global modifier on the same element, setting the same style, but then, it will persist even after navigating back to the first route, or any other route.
To Reproduce
https://github.com/jankulma-turbine/sapper-bug This is basically sapper's template, here are my changes: jankulma-turbine/sapper-bug@2fa4bc1
To reproduce click on "about" link in nav, then "blog", back "about", "home", etc...
Expected behavior
I'd expect that the change to element's style, that was done via :global() modifier, would be reverted or updated every time after route is changed.
Information about your Sapper Installation:
Chrome Version 78.0.3904.97 (Official Build) (64-bit)
Ubuntu Linux 19.10
Hosting environment: Local
"sapper": "^0.27.0",
"svelte": "^3.0.0"

If it is an exported (npm run export) or dynamic application. <== I dont know what that means. I cloned your template, run npm install && npm run dev
Whether your application uses Webpack or Rollup: Webpack

Severity
Low, but I'd appreciate a fix or a hint how to workaround
Additional context
Just a couple words of appreciation: your work is very interesting and seems to be a great alternative to the "big" frameworks/libs out there. Amazing job 🥇

Closing comment (2019-12-20T22:33:09Z): duplicate of #1024