Changes from @import-ed CSS files are not applied

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

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.

	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]) : [],
	};