Bug: CSS class overwriting from svelte library

[MuslemRahimi]

Hi,

I have this weird bug when I use daisyui with the svelte library
import RangeSlider from "svelte-range-slider-pips";

 <RangeSlider
              min={0}
              max={100}
              range={true}
              pushy={false}
              bind:values={valuesMinMax}
              float pips  hoverable
            />

When i set range = {false} the slider works fine:

But when I set the range = {true} this happens:

Ive checked that when I deactivate daisyui everything works fine in both cases so my initial thought was that daisyui overwrites some of the css classes of the svelte library.

[saadeghi]

This package, adds a class name called range when you set range = {true}
This creates a conflict with a daisyUI class name range.
It looks like this package doesn't provide a way to customize that class name and it also doesn't provide a prefix for the class names.

You can add a prefix to all daisyUI class names to avoid that conflict: https://daisyui.com/docs/config/

Or you can completely remove the daisyUI range class name using a PostCSS plugin if you don't wan't to use it elsewhere.

[MuslemRahimi]

How can i exclude the range class of daisyui in my postcss.config.cjs file in sveltekit?

module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }

[saadeghi]

You can use this PostCSS plugin to remove the class name: https://www.npmjs.com/package/postcss-remove-classes