Svelte Rollup plugin and Smelte conflict

[Richard Wood]

Am finding that the rollup-plugin-css-only plugin doesn't play nicely with smelte and I end up with an empty global.css smelte file. Is there a plugin that plays nicely with smelte?

Am trying to generate the smelte css into public/global.css and generate the component css into public/bundle.css

So it seems I need a rollup plugin css generator that will allow the the output of the smelte to be excluded.

Working around for now by not emitting css. The only examples can find online that enable both seem to use an old version of rollup-plugin-svelte that allows css to be emitted within itself before hitting smelte.

I guess another workaround could be to output to a custom extension that the css plugin doesn't recognise.

[tcd93]

I have same issue too, looks like rollup-plugin-svelte 7.0.0 breaks a lot of things

EDIT:
I'm able to work around the rollup-plugin-css-only by excluding tailwind.css

svelte({
	compilerOptions: {
		dev: !production
	},
}),
css({ output: 'bundle.css', exclude: ['**/tailwind.css'] }),
smelte({
	purge: production,
	output: "./public/global.css"
}),

main.js:

import App from './App.svelte';
import './tailwind.css'
...

tailwind.css:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

[Huy Z]

For me, the solution was just to move the css line to above smelte in rollup.config.js, as in @tcd93's code snippet. But maybe I'm just new to Smelte and there may be other issues.

[Deni Putra]

I have same issue too, looks like rollup-plugin-svelte 7.0.0 breaks a lot of things

EDIT:
I'm able to work around the rollup-plugin-css-only by excluding tailwind.css

svelte({
	compilerOptions: {
		dev: !production
	},
}),
css({ output: 'bundle.css', exclude: ['**/tailwind.css'] }),
smelte({
	purge: production,
	output: "./public/global.css"
}),

main.js:

import App from './App.svelte';
import './tailwind.css'
...

tailwind.css:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@tcd93's solution should be included in getting started

almost giving up using this package

[tcd93]

Actually in my previous comment you don't need to specifically create a css file, just use the one from lib like in instruction is OK

import "smelte/src/tailwind.css";

almost giving up using this package

Yeah I think the problem is from Rollup's messy plugins, they introduce breaking changes too easily; people wasted too much time on these Webpack Rollup thingy...