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.