feat: allow for svelte:options css injected

Author: paoloricciuti

.changeset/eight-comics-tell.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: allow for `svelte:options` css injected

packages/svelte/src/compiler/phases/1-parse/read/options.js

@@ -175,6 +175,17 @@ export default function read_options(node) {
 
 				break;
 			}
+			case 'css': {
+				const value = get_static_value(attribute);
+
+				if (value === 'injected' || value === 'external') {
+					component_options.css = value;
+				} else {
+					e.svelte_options_invalid_attribute_value(attribute, `"injected", "external"`);
+				}
+
+				break;
+			}
 			case 'immutable': {
 				component_options.immutable = get_boolean_value(attribute);
 				break;

packages/svelte/src/compiler/types/template.d.ts

@@ -75,6 +75,7 @@ export interface SvelteOptions {
 	accessors?: boolean;
 	preserveWhitespace?: boolean;
 	namespace?: Namespace;
+	css?: 'injected' | 'external';
 	customElement?: {
 		tag: string;
 		shadow?: 'open' | 'none';

packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/Nested.svelte

@@ -0,0 +1,9 @@
+<svelte:options css="injected" />
+
+<div class="foo">foo</div>
+
+<style>
+	.foo {
+		color: red;
+	}
+</style>

packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_config.js

@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		css: 'external'
+	}
+});

packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.css

@@ -0,0 +1,4 @@
+
+	.foo.svelte-sg04hs {
+		color: red;
+	}

packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.html

@@ -0,0 +1 @@
+<!--[--><div class="foo svelte-sg04hs">foo</div><!----> <div class="foo svelte-sg04hs">foo</div><!--]-->

packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected_head.html

@@ -0,0 +1,5 @@
+<style id="svelte-sg04hs">
+	.foo.svelte-sg04hs {
+		color: red;
+	}
+</style>

packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/main.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested />
+
+<div class="foo">foo</div>
+
+<style>
+	.foo {
+		color: red;
+	}
+</style>

packages/svelte/tests/server-side-rendering/samples/css-injected-options/_config.js

@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		css: 'external'
+	}
+});

packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.css

@@ -0,0 +1,4 @@
+
+	.foo.svelte-sg04hs {
+		color: red;
+	}

packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.html

@@ -0,0 +1 @@
+<div class="foo svelte-sg04hs">foo</div>

packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected_head.html

@@ -0,0 +1,5 @@
+<style id="svelte-sg04hs">
+	.foo.svelte-sg04hs {
+		color: red;
+	}
+</style>

packages/svelte/tests/server-side-rendering/samples/css-injected-options/main.svelte

@@ -0,0 +1,9 @@
+<svelte:options css="injected" />
+
+<div class="foo">foo</div>
+
+<style>
+	.foo {
+		color: red;
+	}
+</style>