CSS/CSS Problems

[Kapsonfire-DE]

Hello, i tried to get HMR working on my project by moving the rollup config from this repo to my project

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';
import css from 'rollup-plugin-css-only';
import scss from "rollup-plugin-scss";
import replace from 'rollup-plugin-replace';
import hmr from 'rollup-plugin-hot'
const production = !process.env.ROLLUP_WATCH;
const isNollup = !!process.env.NOLLUP
const isWatch = !!process.env.ROLLUP_WATCH
const isLiveReload = !!process.env.LIVERELOAD

const isDev = isWatch || isLiveReload
const isProduction = !isDev

const isHot = isWatch && !isLiveReload

function serve() {
	let server;

	function toExit() {
		if (server) server.kill(0);
	}

	return {
		writeBundle() {
			if (server) return;
			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
				stdio: ['ignore', 'inherit', 'inherit'],
				shell: true
			});

			process.on('SIGTERM', toExit);
			process.on('exit', toExit);
		}
	};
}



export default {
	input: 'src/main.ts',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		dir: 'public/build/',
		chunkFileNames: '[name].js',
		exports: "named"

	},
	inlineDynamicImports: true,
	plugins: [
		replace({
			'process.env.NODE_ENV': JSON.stringify(
				'production'
			)
		}),
		svelte({
			preprocess: [
				sveltePreprocess({ sourceMap: !production })
			],
			compilerOptions: {
				// enable run-time checks when not in production
				dev: !production,
				cssHash: function(option) {
					return `_${option.hash(option.css)}`;
				},
				css: css => {
					css.write('bundle.css')
				},

			}


		}),

		// we'll extract any component CSS out into
		// a separate file - better for performance
		scss({output: 'public/build/bundle.css'}),
		css({ output: 'bundle.css' }),


		// If you have external dependencies installed from
		// npm, you'll most likely need these plugins. In
		// some cases you'll need additional configuration -
		// consult the documentation for details:
		// https://github.com/rollup/plugins/tree/master/packages/commonjs
		resolve({
			browser: true,
			dedupe: ['svelte']
		}),
		commonjs(),
		typescript({
			include: ['./**/*.ts', './../network/**/*.ts', './../shared/**/*.ts'],
			sourceMap: !production,
			inlineSources: !production
		}),

		// In dev mode, call `npm run start` once
		// the bundle has been generated
		isDev && !isNollup && serve(),

		// Watch the `public` directory and refresh the
		// browser on changes when not in production
		isLiveReload && livereload('public'),

		// If we're building for production (npm run build
		// instead of npm run dev), minify
		isProduction && terser(),
		hmr({
			public: 'public',
			inMemory: true,
			host: '0.0.0.0',
			port: 35729,
			compatModuleHot: !isHot,
		})
	],
	watch: {
		clearScreen: false
	}
};

i ended up this way, and everything works except when i change css/scss Code... The Module reloads with the new CSS hash, but the new CSS Code isnt injected to the dom so I have broken design / missing styles.

[rixo]

Yes, indeed, you'd need a HMR-enabled CSS plugin. Typically, it would wrap your CSS files in JS that replaces the stylesheet on hot updates.

Rollup ecosystem's not rich in HMR enabled stuff, unfortunately. You may want to experiment with https://github.com/PepsRyuu/rollup-plugin-hot-css or https://github.com/rixo/rollup-plugin-postcss-hot.