Issue: Pico.CSS styling leaked into Toast Styling

[ZombieChibiXD]

Hi, I wanted to use this toast package, but because I'm using PicoCSS, there's issue where the main styling leaked into this package.

Is there a way to make sure this toast's styling is scoped to itself?

[ZombieChibiXD]

So far my workaround is by making a component and styling it manually.

<script>
    import { SvelteToast } from '@zerodevx/svelte-toast';
</script>

<div class="toast">
    <SvelteToast
        options={{
            classes: ['something']
        }}
    />
</div>

<style>
    :global(ul._toastContainer>li) {
        list-style: none;
    }
    :global(._toastBtn) {
        --background-color: none;
        --border-color: none;
        --color: none;
        --box-shadow: none;
        --primary-hover: none;
        padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
        border: none;
        border-radius: 0;
        outline: 0;
    }
    :global(._toastBar) {
        border-radius: 0;
        margin-bottom: auto;
    }
</style>

[zerodevx]

Hey, unfortunately I don't think there's a straightforward solution (unless the toast component is set up as a custom element - which it's not right now). The drawback of using a CSS framework like PicoCSS is it's a bit like a sledgehammer.

Your workaround is probably fine.