Load css files on `+layout.svelte` conditionally based on server-side data

Describe the problem

We are trying to import a.css on a layout file, and when a prop coming from +layout.server.js is met, load b.css.

CSS files imported from components load regardless of the svelte component getting rendered on the markup. This is a problem because we haven't found another way to load global css files based on SSR props.

Describe the proposed solution

Ideally we could simply do the following:

<script>
  // +layout.svelte
  import './styles/a.css';
  import Theme  from './Theme.svelte';

  export let data;
</script>

<!-- b.css is not loaded when condition is false  -->
{#if data.condition}
  <Theme />
{/if}

<slot />

<script>
  // Theme.svelte
  import './styles/b.css';
</script>

<script>
  // +layout.server.js
  export async function load(event) {
    return { condition: false }
  }
</script>

Alternatives considered

We have taken a look at the layout system. Unfortunately it seems to designed around routes and not really around props coming from a server.

Importance

would make my life easier

Additional Information

We are not sure how to proceed maintaining SSR. Would appreciate any suggestions or ideas!

Start with the reported examples in +layout.svelte, Theme.svelte, and +layout.server.js, then trace how component CSS imports are processed during SSR. Determine whether the requested conditional loading can be supported while preserving SSR, and define tests that verify b.css is absent when the server-provided condition is false.