Use rendered CSS for AMP pages, rather than emitted CSS (#1408)

* failing test for #808

* use rendered CSS for AMP pages, rather than emitted CSS - fixes #808

* bump vite-plugin-svelte

* oops

Author: Rich Harris

.changeset/happy-nails-draw.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Use rendered CSS for AMP pages

packages/kit/package.json

@@ -3,7 +3,7 @@
 	"version": "1.0.0-next.104",
 	"type": "module",
 	"dependencies": {
-		"@sveltejs/vite-plugin-svelte": "^1.0.0-next.9",
+		"@sveltejs/vite-plugin-svelte": "^1.0.0-next.10",
 		"cheap-watch": "^1.0.3",
 		"sade": "^1.7.4",
 		"vite": "^2.2.4"

packages/kit/src/core/build/index.js

@@ -167,7 +167,8 @@ async function build_client({
 		plugins: [
 			...(user_config.plugins || []),
 			svelte({
-				extensions: config.extensions
+				extensions: config.extensions,
+				emitCss: !config.kit.amp
 			})
 		]
 	});

packages/kit/src/core/dev/index.js

@@ -97,7 +97,8 @@ class Watcher extends EventEmitter {
 			plugins: [
 				...(user_config.plugins || []),
 				svelte({
-					extensions: this.config.extensions
+					extensions: this.config.extensions,
+					emitCss: !this.config.kit.amp
 				})
 			],
 			publicDir: this.config.kit.files.assets,

packages/kit/src/runtime/server/page/render.js

@@ -87,16 +87,16 @@ export async function render_response({
 			unsubscribe();
 		}
 	} else {
-		rendered = { head: '', html: '', css: '' };
+		rendered = { head: '', html: '', css: { code: '', map: null } };
 	}
 
 	const include_js = page_config.router || page_config.hydrate;
 	if (!include_js) js.clear();
 
 	// TODO strip the AMP stuff out of the build if not relevant
 	const links = options.amp
-		? styles.size > 0
-			? `<style amp-custom>${Array.from(styles).join('\n')}</style>`
+		? styles.size > 0 || rendered.css.code.length > 0
+			? `<style amp-custom>${Array.from(styles).concat(rendered.css.code).join('\n')}</style>`
 			: ''
 		: [
 				...Array.from(js).map((dep) => `<link rel="modulepreload" href="${dep}">`),

packages/kit/test/apps/amp/src/routes/styles/Unused.svelte

@@ -0,0 +1,7 @@
+<p class="shouty">this component will never be rendered</p>
+
+<style>
+	p {
+		color: #40b3ff;
+	}
+</style>

packages/kit/test/apps/amp/src/routes/styles/_tests.js

@@ -0,0 +1,12 @@
+import * as assert from 'uvu/assert';
+
+/** @type {import('test').TestMaker} */
+export default function (test, is_dev) {
+	test('only includes CSS for rendered components', '/styles', async ({ page }) => {
+		const style = await page.innerHTML('style[amp-custom]');
+
+		assert.ok(style.includes('#ff3e00'), 'Rendered styles are included');
+		assert.ok(style.includes('uppercase'), 'Imported styles are included');
+		assert.ok(!style.includes('#40b3ff'), 'Unrendered styles are omitted');
+	});
+}

packages/kit/test/apps/amp/src/routes/styles/imported.css

@@ -0,0 +1,3 @@
+.shouty {
+	text-transform: uppercase;
+}

packages/kit/test/apps/amp/src/routes/styles/index.svelte

@@ -0,0 +1,18 @@
+<script>
+	import { amp } from '$app/env';
+	import Unused from './Unused.svelte';
+	import './imported.css';
+</script>
+
+{#if amp}
+	<p class="shouty">this text is rendered</p>
+{:else}
+	<Unused/>
+{/if}
+
+
+<style>
+	p {
+		color: #ff3e00;
+	}
+</style>

packages/kit/types/internal.d.ts

@@ -51,7 +51,10 @@ export type SSRComponent = {
 		) => {
 			html: string;
 			head: string;
-			css: string;
+			css: {
+				code: string;
+				map: any; // TODO
+			};
 		};
 	};
 };