Merge pull request #1900 from sveltejs/show-compiled-css

show compiled CSS separately

site/src/routes/repl/_components/Output/index.html

@@ -5,7 +5,8 @@
 	import CodeMirror from '../CodeMirror.html';
 
 	export let bundle
-	export let code;
+	export let js;
+	export let css;
 	export let dom;
 	export let ssr;
 	export let props;
@@ -97,9 +98,14 @@
 	>Result</button>
 
 	<button
-		class:active="{view === 'code'}"
+		class:active="{view === 'js'}"
-		on:click="{() => view = 'code'}"
+		on:click="{() => view = 'js'}"
-	>Compiled code</button>
+	>JS output</button>
+
+	<button
+		class:active="{view === 'css'}"
+		on:click="{() => view = 'css'}"
+	>CSS output</button>
 </div>
 
 
@@ -157,7 +163,7 @@
 		<div slot="a">
 			<CodeMirror
 				mode="javascript"
-				{code}
+				code="{view === 'js' ? js : css}"
 				error={sourceError}
 				errorLoc={sourceErrorLoc}
 				readonly

site/src/routes/repl/_components/Repl.html

@@ -47,7 +47,8 @@
 	let sourceError = null;
 	let runtimeError = null;
 	let warningCount = 0;
-	let code = '';
+	let js = '';
+	let css = '';
 	let uid = 0;
 	let props = null;
 	let sourceErrorLoc;
@@ -61,7 +62,8 @@
 
 		workers.compiler.postMessage({ type: 'init', version });
 		workers.compiler.onmessage = event => {
-			code = event.data.code;
+			js = event.data.js;
+			css = event.data.css;
 			if (event.data.props) props = event.data.props;
 		};
 
@@ -111,7 +113,7 @@
 				entry: component === $component_store[0]
 			});
 		} else {
-			code = component.source;
+			js = css = `/* Select a component to see its compiled code */`;
 		}
 	}
 
@@ -264,7 +266,8 @@
 			<Output
 				{version}
 				{selected_store}
-				{code}
+				{js}
+				{css}
 				{bundle}
 				{ssr}
 				{dom}

site/static/workers/compiler.js

@@ -27,12 +27,12 @@ const commonCompilerOptions = {
 
 function compile({ source, options, entry }) {
 	try {
-		const { js, stats } = svelte.compile(
+		const { js, css, stats } = svelte.compile(
 			source,
 			Object.assign({}, commonCompilerOptions, options)
 		);
 
-		return { code: js.code, props: entry ? stats.props : null };
+		return { js: js.code, css: css.code, props: entry ? stats.props : null };
 	} catch (err) {
 		let result = `/* Error compiling component\n\n${err.message}`;
 		if (err.frame) result += `\n${err.frame}`;