Losing styles when injecting popup component in CSUI

No matter if the CSUI is

<script context="moudule" lang="ts">
  import Dashboard from "~popup.svelte";
</script>

<Dashboard />

<script context="moudule" lang="ts">
  import Dashboard from "~popup.svelte";
</script>

<Dashboard />

<script lang="ts">
  import Dashboard from "~popup.svelte";
</script>

<Dashboard />

<script lang="ts">
  import Dashboard from "~popup.svelte";
</script>

<Dashboard />

And the popup is:

<script lang="ts">
  // ...
</script>

<div class="wrapper">
  <!-- -->
</div>

<style lang="scss">
  .wrapper {
    width: 450px;
  }
</style>

<script lang="ts">
  // ...
</script>

<div class="wrapper">
  <!-- -->
</div>

<style lang="scss">
  .wrapper {
    width: 450px;
  }
</style>

When the popup loads from within the CSUI, .wrapper is styled as in the attached screenshot I also tried renaming popup.svelte to Popup.svelte but didn't seem to solve it

9 Replies

AviOP•15mo ago

@louis Please take a look at it as soon as you can, it poses a major bottleneck on my dev cycle

lab•15mo ago

@avi12 afaik, the framework doesn't deal with svelte CSS extraction cross entry file. PR's welcome to add it xd... (iirc, you tried to work on a PR to add something like that but it got compliated quick)

AviOP•15mo ago

Right So I guess the solution is to extract all of the SCSS into files, right? Because this issue is only in CSUI as far as I can tell I got another hack working popup.svelte

<script lang="ts">
  import cssText from "data-text:~/popup/styles/popup.scss";

  const elStyle = document.createElement("style");
  elStyle.textContent = cssText;

  let elHead: HTMLDivElement;

  new MutationObserver((_, observer) => {
    if (!elHead) {
      return;
    }

    elHead.append(elStyle);
    observer.disconnect();
  }).observe(document, { childList: true, subtree: true });
</script>

<div bind:this={elHead}>
  <div class="wrapper">
    <Header/>

    <main>
      <!--    <SummaryTimeWatch/>-->
    </main>
  </div>
</div>

<script lang="ts">
  import cssText from "data-text:~/popup/styles/popup.scss";

  const elStyle = document.createElement("style");
  elStyle.textContent = cssText;

  let elHead: HTMLDivElement;

  new MutationObserver((_, observer) => {
    if (!elHead) {
      return;
    }

    elHead.append(elStyle);
    observer.disconnect();
  }).observe(document, { childList: true, subtree: true });
</script>

<div bind:this={elHead}>
  <div class="wrapper">
    <Header/>

    <main>
      <!--    <SummaryTimeWatch/>-->
    </main>
  </div>
</div>

lab•15mo ago

So I guess the solution is to extract all of the SCSS into files, right?

yeah I think so, leveraging the file system to share modules

AviOP•15mo ago

It has become tricky to maintain

lab•15mo ago

I'd colocate the relevant files

AviOP•15mo ago

Wdym?

lab•15mo ago

Something like components/Card/(index.svelte + index.scss) So you can import it separately, while also able to see them at the same location

AviOP•15mo ago

True, it is an option; it doesn't actually matter whether I use the same file locations with styles/ added in the path or I put the component and the SCSS in the same directory

Gaming

Programming

Losing styles when injecting popup component in CSUI