14 replies

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

.wrapper

is styled as in the attached screenshot
I also tried renaming

popup.svelte

popup.svelte

Popup.svelte

Popup.svelte

but didn't seem to solve it

14 replies

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

.wrapper

is styled as in the attached screenshot
I also tried renaming

popup.svelte

popup.svelte

Popup.svelte

Popup.svelte

but didn't seem to solve it