_layout getting top priority in CSS

[icecog]

Hello, I understand that SvelteKit is in the works, but here I am.

Describe the bug Any CSS applied in _layout is applied last, and so cannot be overwritten using :global

To Reproduce _layout.svelte:

<main>
    <slot></slot>
</main>

<style>
    main {
        background-color: white;
    }
</style>

index.svelte:

<style>
    :global(main) {
        background-color: black;
    }
</style>

What I am seeing is that my :global override is after the _layout CSS in Chrome inspect, and so is getting ignored.

Expected behavior I would assume that the hierarchy should be:root, body, _layout , index but it seems to be :root, body, index, _layout.

Is this expected or am I being a dum-dum?

Information about your Sapper Installation:

• The output of npx envinfo --system --npmPackages svelte,sapper,rollup,webpack --binaries --browsers System: OS: Windows 10 10.0.18363 CPU: (4) x64 Intel(R) Core(TM) i7-6650U CPU @ 2.20GHz Memory: 3.05 GB / 15.92 GB Binaries: Node: 14.15.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 87.0.4280.88 Edge: Spartan (44.18362.449.0) Internet Explorer: 11.0.18362.1 npmPackages: sapper: ^0.28.10 => 0.28.10 svelte: ^3.31.0 => 3.31.0 webpack: ^4.7.0 => 4.44.2

• Your browser Chrome

• Your hosting environment (i.e. Local, GCP/AWS/Azure, Vercel/Begin, etc...) Running locally

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

Severity This is annoying

[benmccann]

Can you provide a project that reproduces this or investigate whether those style declarations are in the same generated .css file or different generated .css files?

[icecog]

Good morning Ben, Sure. Complete repro below, project zip at the bottom. When I look closer at the files the css is in, as you can see in the image below they are in two different files: _layout is in client<...>.css while about is in about<....>.css

Here are the steps I took:

npx degit "sveltejs/sapper-template#rollup" my-app go to src\routes\about.svelte

replace content with

<svelte:head>
    <title>About</title>
</svelte:head>

<div class="about-slot">
    <h1>About this site</h1>

    <p>This is the 'about' page. There's not much here.</p>
</div>

<style>

    .about-slot {
        background-color: black;
    }

    :global(main) {
        background-color: red;
    }

</style>

And then you get the below result

And here is the project in all its glory, sans node_modules: my-app.zip

[mdynnl]

i'd say this is expected behavior to my understanding :global puts css to global.css it doesn't mean override svelte uses generated class names to solve css scoping so, even if the css used with :global comes after the generated css css with more specificity would wins where the order which comes first contributes little to css specificity

[icecog]

Ah, I see! Thank you!

Is there some way then to alter the css from _layout? I only want to make this change in one place, so an alternative solution would be some way to opt out of the layout for that page. Any such solutions?

[benmccann]

You might try css variables, !important, or more specific css rules

I'm going to close this since there isn't a bug