Merge pull request #101 from sveltejs/gh-84

order css chunks by filename

Author: Rich-Harris

index.js

@@ -302,7 +302,9 @@ module.exports = function svelte(options = {}) {
 				const sources = [];
 				const sourcesContent = [];
 
-				for (let chunk of cssLookup.values()) {
+				const chunks = Array.from(cssLookup.keys()).sort().map(key => cssLookup.get(key));
+
+				for (let chunk of chunks) {
 					if (!chunk.code) continue;
 					result += chunk.code + '\n';
 

test/deterministic-css/expected/bundle.css

@@ -0,0 +1,7 @@
+<p class="a">red</p>
+
+<style>
+	.a {
+		color: red;
+	}
+</style>

test/deterministic-css/src/A.svelte

@@ -0,0 +1,9 @@
+<script>
+	import A from './A.svelte';
+	import B from './B.svelte';
+	import C from './C.svelte';
+</script>
+
+<A/>
+<B/>
+<C/>

test/deterministic-css/src/App.svelte

@@ -0,0 +1,7 @@
+<p class="b">green</p>
+
+<style>
+	.b {
+		color: green;
+	}
+</style>

test/deterministic-css/src/B.svelte

@@ -0,0 +1,7 @@
+<p class="c">blue</p>
+
+<style>
+	.c {
+		color: blue;
+	}
+</style>

test/deterministic-css/src/C.svelte

@@ -0,0 +1,5 @@
+import App from './App.svelte';
+
+new App({
+	target: document.body
+});

test/deterministic-css/src/main.js

@@ -1,3 +1,4 @@
+const fs = require('fs');
 const path = require('path');
 const sander = require('sander');
 const assert = require('assert');
@@ -255,4 +256,40 @@ describe('rollup-plugin-svelte', () => {
 		assert.deepEqual(warnings.map(w => w.code), ['a11y-hidden', 'a11y-distracting-elements']);
 		assert.deepEqual(handled.map(w => w.code), ['a11y-hidden']);
 	});
+
+	it('bundles CSS deterministically', async () => {
+		sander.rimrafSync('test/deterministic-css/dist');
+		sander.mkdirSync('test/deterministic-css/dist');
+
+		let css;
+
+		const bundle = await rollup.rollup({
+			input: 'test/deterministic-css/src/main.js',
+			plugins: [
+				{
+					resolveId: async (id) => {
+						if (/A\.svelte/.test(id)) {
+							await new Promise(f => setTimeout(f, 50));
+						}
+					}
+				},
+				plugin({
+					css: value => {
+						css = value;
+						css.write('test/deterministic-css/dist/bundle.css');
+					}
+				})
+			]
+		});
+
+		await bundle.write({
+			format: 'iife',
+			file: 'test/deterministic-css/dist/bundle.js'
+		});
+
+		assert.equal(
+			fs.readFileSync('test/deterministic-css/dist/bundle.css', 'utf-8'),
+			fs.readFileSync('test/deterministic-css/expected/bundle.css', 'utf-8')
+		);
+	});
 });