Importing the style.css breaks rest of code

[sebajans]

Hey,
i installed the package to try it out on a project i am working on but the line

import '@selemondev/svelte-marquee/dist/style.css';

completely breaks my css.

I tried importing it into a local component so after a reload the issue disappears, but i couldn't find a way to work around this.

I also tried a scoped style tag (see below) but that also did not work. I didn't find the style.css file so i was wondering if you might be able to help.

<style scoped>
@import url('@selemondev/svelte-marquee/dist/style.css');
</style>

[selemondev]

Hey @sebajans, this fix will land in the next version of Svelte Marquee.

[sebajans]

Wonderful @selemondev, looking forward to it! If you need any more details let me know.

[tekigg]

1+ this, my tailwind is broken when I import it :(

[frederichoule]

Importing the CSS seems to break the responsive utilities (hidden lg:block) on my side. I didn't deep dive as to why, but it's unusable in its current form.

[frederichoule]

Any plan on fixing this soon @selemondev ? Do you need help with a PR?

[selemondev]

Any plan on fixing this soon @selemondev ? Do you need help with a PR?

Hey there @frederichoule . Sure, you can handle this issue 😁.

[quixado]

Hopefully this helps someone else with a more complete solution Not going to check in as this am still learning the ropes of Svelte. That said, duplicating large chunks (all?) of Tailwind's code that overrides the application's CSS? WTF!!

Issues that are head scratching:

• If you don't import from import '@selemondev/svelte-marquee/dist/style.css'; it doesn't work. Maybe beyond my working knowledge why, but it prevents any fix unless you're willing to add node_modules into your repo --- nope!
• The sheer bloat in style.css Went from 1122 lines to 210 lines to get my instance working with no functional impairments.

Workaround to help a maybe more experienced Svelte dev correct this frankencode for others:

• Duplicate the …/node_modules/@selemondev/svelte-marquee/dist/style.css and rename a back-up for reference
• Nuked everything down to the attached file. Lots of trial and error comparing the delta as it seems the customizations for svelte-marquee are mixed-in alongside the stock tailwind code for some reason.
  style.css.zip
• Reloaded the server to re-read the node_modules and your new, edited …/node_modules/@selemondev/svelte-marquee/dist/style.css file
• Copy that new, edited file into the repo so there's checked-in back-up – in case any future updates to the component blow-up the code again.

HtH

UPDATE: Don't do what I did, see the solve below instead.

[frederichoule]

Hey @quixado - here is a simpler way that I did on a few projects. Just modify your tailwind.config.js to look like this:

import animate from 'tailwindcss-animate';

/** @type {import('tailwindcss').Config} */
export default {
	content: [
		'./node_modules/@selemondev/svelte-marquee/dist/*.svelte'
	],
	theme: {
		extend: {
			keyframes: {
				'marquee-left': {
					from: { transform: 'translateX(0)' },
					to: { transform: 'translateX(calc(-100% - var(--gap)))' }
				},
				'marquee-up': {
					from: { transform: 'translateY(0)' },
					to: { transform: 'translateY(calc(-100% - var(--gap)))' }
				}
			},
			animation: {
				'marquee-left': 'marquee-left var(--duration, 40s) linear infinite',
				'marquee-up': 'marquee-up var(--duration, 40s) linear infinite'
			}
		}
	},
	plugins: [animate]
};

In short, you need to:

• Import the tailwindcss-animate package and load it as a plugin
• Add './node_modules/@selemondev/svelte-marquee/dist/*.svelte' in content
• Extend tailwind with the required keyframesand animation for the marquee

And you're good to go!

[quixado]

So clean. So much less hacky. Thanks for sharing; worked perfectly. 👏
Definitely should be the documented way to set-up and configure. Hopefully there's a corrected release soon.

For sake of completeness for others implementing the @frederichoule fix (who may also be newer to the Svelte way):

• Do above. Your tailwind.config.js file will likely have other content, just add into the correct places in the file or adding the nodes as needed: default.content, default.theme.extend, etc.
• Now when you load the Marquee component, instead of:
  import { Marquee } from '@selemondev/svelte-marquee';
import '@selemondev/svelte-marquee/dist/style.css';
  as in the current documentation, you just need:
  import { Marquee } from '@selemondev/svelte-marquee';
• Reload your server
• Enjoy beautiful scrolling content in your app.

[selemondev]

Hey there @quixado, @frederichoule, @tekigg and @sebajans. Thanks @frederichoule's for the solution. The reason why the css code breaks the rest of site is because during build time the tailwindcss code isn't purged. This is because when using sveltekit to build an npm package you need to use the sveltekit package command which only transforms Typescript and Svelte files and doesn't include nor pre-process any css files. I have been looking for an optimum solution for this issue but until then we can use @frederichoule solution 😊. You can keep up with the sveltekit-package issue here.