diff --git a/src/generators/Generator.ts b/src/generators/Generator.ts
index 17b524aac5..e20deb75bb 100644
--- a/src/generators/Generator.ts
+++ b/src/generators/Generator.ts
@@ -80,7 +80,6 @@ export default class Generator {
 
 		// TODO this is legacy — just to get the tests to pass during the transition
 		this.css = this.stylesheet.render(options.cssOutputFilename).css;
-		this.cssId = `svelte-${parsed.hash}`;
 
 		// allow compiler to deconflict user's `import { get } from 'whatever'` and
 		// Svelte's builtin `import { get, ... } from 'svelte/shared.ts'`;
diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
index 4bac2bb014..beaae0449c 100644
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@@ -135,12 +135,18 @@ export default function dom(
 		builder.addBlock(`[✂${parsed.js.content.start}-${parsed.js.content.end}✂]`);
 	}
 
-	if (generator.css && options.css !== false) {
+	if (generator.stylesheet.hasStyles && options.css !== false) {
+		const { css, cssMap } = generator.stylesheet.render(options.filename);
+
+		const textContent = options.dev ?
+			`${css}\n/*# sourceMappingURL=${cssMap.toUrl()} */` :
+			css;
+
 		builder.addBlock(deindent`
 			function @add_css () {
 				var style = @createElement( 'style' );
-				style.id = '${generator.cssId}-style';
-				style.textContent = ${stringify(generator.css)};
+				style.id = '${generator.stylesheet.id}-style';
+				style.textContent = ${JSON.stringify(textContent)};
 				@appendNode( style, document.head );
 			}
 		`);
@@ -199,9 +205,9 @@ export default function dom(
 			this._yield = options._yield;
 
 			this._torndown = false;
-			${generator.css &&
+			${generator.stylesheet.hasStyles &&
 				options.css !== false &&
-				`if ( !document.getElementById( '${generator.cssId}-style' ) ) @add_css();`}
+				`if ( !document.getElementById( '${generator.stylesheet.id}-style' ) ) @add_css();`}
 			${(generator.hasComponents || generator.hasIntroTransitions) &&
 				`this._oncreate = [];`}
 			${generator.hasComplexBindings && `this._bindings = [];`}
diff --git a/src/generators/dom/visitors/Element/Element.ts b/src/generators/dom/visitors/Element/Element.ts
index bb7de853bb..9a8e600583 100644
--- a/src/generators/dom/visitors/Element/Element.ts
+++ b/src/generators/dom/visitors/Element/Element.ts
@@ -84,7 +84,7 @@ export default function visitElement(
 	// TODO add a helper for this, rather than repeating it
 	if (node._needsCssAttribute) {
 		block.builders.hydrate.addLine(
-			`@setAttribute( ${name}, '${generator.cssId}', '' );`
+			`@setAttribute( ${name}, '${generator.stylesheet.id}', '' );`
 		);
 	}
 
diff --git a/src/generators/server-side-rendering/index.ts b/src/generators/server-side-rendering/index.ts
index ca5158764d..53518e32ee 100644
--- a/src/generators/server-side-rendering/index.ts
+++ b/src/generators/server-side-rendering/index.ts
@@ -86,6 +86,8 @@ export default function ssr(
 		visit(generator, mainBlock, node);
 	});
 
+	const { css, cssMap } = generator.stylesheet.render(options.filename);
+
 	const result = deindent`
 		${hasJs && `[✂${parsed.js.content.start}-${parsed.js.content.end}✂]`}
 
@@ -127,12 +129,12 @@ export default function ssr(
 		${name}.renderCss = function () {
 			var components = [];
 
-			${generator.css &&
+			${generator.stylesheet.hasStyles &&
 				deindent`
 				components.push({
 					filename: ${name}.filename,
-					css: ${JSON.stringify(generator.css)},
-					map: null // TODO
+					css: ${JSON.stringify(css)},
+					map: ${JSON.stringify(cssMap)}
 				});
 			`}
 
diff --git a/src/generators/server-side-rendering/visitors/Element.ts b/src/generators/server-side-rendering/visitors/Element.ts
index 765e16ec8a..059e8bced2 100644
--- a/src/generators/server-side-rendering/visitors/Element.ts
+++ b/src/generators/server-side-rendering/visitors/Element.ts
@@ -57,7 +57,7 @@ export default function visitElement(
 	});
 
 	if (node._needsCssAttribute) {
-		openingTag += ` ${generator.cssId}`;
+		openingTag += ` ${generator.stylesheet.id}`;
 	}
 
 	openingTag += '>';