PD
🧩 Plasmo Developers•17mo ago
Avi

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 />
or 
<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
No description
9 Replies
Avi
AviOP•17mo ago
@louis Please take a look at it as soon as you can, it poses a major bottleneck on my dev cycle
lab
lab•17mo 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)
Avi
AviOP•17mo 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
lab•17mo 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
Avi
AviOP•17mo ago
It has become tricky to maintain
No description
lab
lab•17mo ago
I'd colocate the relevant files
Avi
AviOP•17mo ago
Wdym?
lab
lab•17mo 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
Avi
AviOP•17mo 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

Did you find this page helpful?