Augmented chunk hashes based on imported css code

Author: dionysiusmarquis

src/core/create_compilers/RollupCompiler.ts

@@ -1,3 +1,4 @@
+import { createHash, Hash } from 'crypto';
 import * as path from 'path';
 import color from 'kleur';
 import relative from 'require-relative';
@@ -9,6 +10,7 @@ import {
 	OutputChunk,
 	Plugin,
 	PluginContext,
+	PreRenderedChunk,
 	RenderedChunk,
 	RollupError
 } from 'rollup';
@@ -154,11 +156,52 @@ export default class RollupCompiler {
 
 		const that = this;
 
-		// TODO this is hacky. refactor out into an external rollup plugin
-		(mod.plugins || (mod.plugins = [])).push(css_chunks({ injectImports: true }));
-		if (!/[\\/]client\./.test(entry_point)) {
-			return mod;
-		}
+		/**
+		 * Track css code hashes for proper chunk hashing
+		 */
+		const css_hashing = () => {
+			const css_hashes: Record<string, string> = {};
+			return <Plugin>{
+				name: 'sapper-css-hashing',
+				augmentChunkHash(this: PluginContext, chunk: PreRenderedChunk) {
+					let hash: Hash;
+
+					const module_files = Object.keys(chunk.modules).map(module_id => {
+						/**
+						 * Save `module_file` which represents the id without file extension. This way it's easy to determine
+						 * svelte generated css files as this will be the same for the svelte and corresponding css ids
+						 */ 
+						const modulePath = path.parse(module_id);
+						return { module_id, module_file: `${modulePath.dir}/${modulePath.name}` };
+					});
+					module_files.forEach(({ module_id, module_file }) => {
+						if (css_hashes[module_id]) {
+							/**
+							 * Ignore svelte css files created with `emitCss` enabled. These css files are generated out
+							 * of svelte's `<style>` and already part of the code that was used to generate the chunk hash
+							 */ 
+							const is_svelte_css = module_files.some(({ module_id: id, module_file: file }) => id !== module_id && file === module_file);
+							if (!is_svelte_css) {
+								if (!hash) {
+									hash = createHash('sha256');
+								}
+								hash.update(css_hashes[module_id]);
+							}
+						}
+					});
+					if (hash) {
+						return hash.digest('hex');
+					}
+				},
+				transform(this: PluginContext, code: string, id: string) {
+					if (path.extname(id) === '.css') {
+						// save css code based hashes before `rollup-plugin-css-chunks` clears the code
+						css_hashes[id] = createHash('sha256').update(code).digest('hex');
+					}
+					return { code, map: null };
+				}
+			};
+		};
 
 		/**
 		 * Finds dynamic imports and rewrites them to import the component and its CSS in parallel
@@ -300,6 +343,12 @@ export default class RollupCompiler {
 			}
 		};
 
+		// TODO this is hacky. refactor out into an external rollup plugin
+		(mod.plugins || (mod.plugins = [])).push(css_hashing());
+		mod.plugins.push(css_chunks({ injectImports: true }));
+		if (!/[\\/]client\./.test(entry_point)) {
+			return mod;
+		}
 		mod.plugins.push(css_injection);
 		mod.plugins.push(sapper_internal);