Isolating styles of daisyUI Sass files from Tabler

[saadeghi]

Today I started working on the project and began with figuring out the files structure and how to add a new set of component styles in src/scss
Currently the components and the the document site itself are both using Tabler styles (generated from src/scss/tabler)
The challenge would be how to make the component demos get styles from an alternative set of Sass files (src/scss/daisyui) without breaking the document site itself.

Should I use a new prefix instead of u- (and if yes, how to handle changing the class names of all components from the docs)?
It looks like currently there is no functionality to change the CSS file for the components without affecting the document site.

@pournasserian Let me know if I'm missing something here.

[pournasserian]

@saadeghi I have create a branch here:

https://github.com/ubeac/svelte/tree/903-daisyui-integration

At this step we need to link css file, though we have the option to import scss file as well.

Please share your idea.

[saadeghi]

I didn't know about this branch. Thank you.
But how is the isolation should be handled? For example Tabler CSS file has a style for .u-button how can I remove that style from the docs and use a new style without destroying the style of the document site itself because the document site itself is also using that style.

[pournasserian]

I didn't know about this branch. Thank you. But how is the isolation should be handled? For example Tabler CSS file has a style for .u-button how can I remove that style from the docs and use a new style without destroying the style of the document site itself because the document site itself is also using that style.

The class names are constants and you should not change them: {prefix}-button, {prefix}-button-color-primary, etc.

We have a solution to change the CSS file runtime and we will apply that later. For now, just focus on developing the new SCSS for DaisyUI. Assume that there is no style in the app and just import your own style (I have added that here.

<svelte:head>
	<title>{$page.data.metaData.title}</title>
	<meta name="description" content={$page.data.metaData.description} />
	<link rel="stylesheet" href="/css/tabler.css" />
</svelte:head>