diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index 3f8f2c1330..e01b43dc09 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -37,7 +37,13 @@ export default function dom(
 
 	const add_css = component.get_unique_name('add_css');
 
-	if (styles && component.compile_options.css !== false && !options.customElement) {
+	const should_add_css = (
+		!options.customElement &&
+		styles.length > 0 &&
+		options.css !== false
+	);
+
+	if (should_add_css) {
 		body.push(b`
 			function ${add_css}() {
 				var style = @element("style");
@@ -65,14 +71,6 @@ export default function dom(
 		);
 	}
 
-	// TODO injecting CSS this way is kinda dirty. Maybe it should be an
-	// explicit opt-in, or something?
-	const should_add_css = (
-		!options.customElement &&
-		component.stylesheet.has_styles &&
-		options.css !== false
-	);
-
 	const uses_props = component.var_lookup.has('$$props');
 	const $$props = uses_props ? `$$new_props` : `$$props`;
 	const props = component.vars.filter(variable => !variable.module && variable.export_name);
diff --git a/src/compiler/compile/render_ssr/index.ts b/src/compiler/compile/render_ssr/index.ts
index a22e7fee0d..72cc26d5cf 100644
--- a/src/compiler/compile/render_ssr/index.ts
+++ b/src/compiler/compile/render_ssr/index.ts
@@ -142,11 +142,11 @@ export default function ssr(
 	].filter(Boolean);
 
 	return b`
-		${css.code && b`
+		${css.code ? b`
 		const #css = {
 			code: "${css.code}",
 			map: ${css.map ? string_literal(css.map.toString()) : 'null'}
-		};`}
+		};` : null}
 
 		${component.extract_javascript(component.ast.module)}