I have been working on a SvelteKit component library where I define variables for components like background-color and font-family in a CSS file. Inside the ./dist/index.js file of my library, I export the CSS using `import './main.css'`. When integrating this library into my project, I import it into the +layout.svelte file with `import 'library'.
Initially, everything functions as expected, with colors and fonts being applied correctly. To update variable values, I make changes inside the :root element of my +layout.svelte file, as seen below:
<style>
:root {
--color-accent: tomato;
}
</style>
However, despite creating a new :root element with the modified value, I encounter some issues. Upon inspecting the browser devtools, I noticed that the original color is displayed before transitioning to the updated value. Interestingly, when deploying onto Vercel, the new color does not appear at all. I am unsure if the problem lies within my library or how I am importing the CSS. Is there a way to ensure that the original value is correctly replaced?
Reference Image:
https://i.stack.imgur.com/jKznM.png
Any assistance or insights on this matter would be highly appreciated!