the `--toastContainer*` css variables don't seem to be working

[paulovieira]

First, congratulations for this great utility! It's the kind of thing we all have to do manually sooner or later, but here you have something robust and that works for everyone.

About the issue: I was playing with the several css variables and noticed that --toastContainer* css variables don't have any effect. After inspecting the source code the problem seems to be here: https://github.com/zerodevx/svelte-toast/blob/master/src/lib/SvelteToast.svelte#L25-L52

You are using the style prop in the <li> element, so the --toastContainer* variables will be set here. However the _toastContainer class (which uses those variables) is used in the parent element (the <ul>). So the variables are not available for _toastContainer.

A simple solution would be unfold the css in that component into 2 selectors:

<style>
._toastContainer {
  list-style-type: none;
  z-index: var(--toastContainerZIndex, 9999);
}

._toastContainer > li {
  top: var(--toastContainerTop, 1.5rem);
  right: var(--toastContainerRight, 2rem);
  bottom: var(--toastContainerBottom, auto);
  left: var(--toastContainerLeft, auto);
  position: fixed;
  margin: 0;
  padding: 0;
  z-index: var(--toastContainerZIndex, 9999);
}
</style>

[zerodevx]

Hey, if I'm understanding correctly, you're passing the --toastContainer* CSS vars through options.theme? TBH the toastContainer* vars weren't intended to be used like that. The docs should have been clearer about this.

I think there's opportunity for improvement re CSS var setup, but it feel it should be a v1 rework; I do think these changes will be breaking.

[NormandoHall]

I agree with @paulovieira. Passing --toastContainer* in toast instance also no works:

toast.push('Yo!', {
  theme: {
    '--toastContainerTop': '3.5rem',
  }
})

Adding the paul's styles as globals runs like a charm

EDIT: But no stacked...

[paulovieira]

Hey, if I'm understanding correctly, you're passing the --toastContainer* CSS vars through options.theme? TBH the toastContainer* vars weren't intended to be used like that. The docs should have been clearer about this.

Yes, I was setting them in options.theme. Now I understand that they should be used in the <style> block, like this:

<style>
  :root {
    --toastContainerXyz: abc;
  }
</style>

Thanks for the clarification. Yes, the documentation was a bit misleading since some css variables can be used in the <SvelteToast /> component, but others don't.

Thanks again.

[zerodevx]

Going to label this issue as an enhancement - the CSS vars should be refactored in v1.