Changes from @import-ed CSS files are not applied

[kucrut]

Even after reloading the browser, changes from CSS files that are @import-ed from <style> tags are not applied, until the svelte file is saved. I can confirm that the issue is happening on MacOS & (Arch) Linux.

Below is a video demonstrating it on vanilla Elder template.

elder-css-changes-not-applied.mp4

[eight04]

I think the @import statement is processed by clean-css:

elderjs/src/rollup/rollupPlugin.ts

Lines 293 to 304 in 162972c

	const cleanCss = new CleanCSS({
	sourceMap: true,
	sourceMapInlineSources: true,
	level: isDev ? 0 : 1,
	rebaseTo: elderConfig.distDir,
	// rebase: elderConfig.distDir,
	});
	const sorted = sortCss(css);
	return {
	...cleanCss.minify(sorted),
	included: sorted ? sorted.map((m) => Object.keys(m)[0]) : [],
	};

Which is called after the build.

To fix this, we have to process @import statement in the transform function and set imported files as dependencies.