feat: allow for svelte:options css injected (#12660)

* feat: allow for `svelte:options` css injected

* chore: update test with different class

* fix: regenerate types

* remove external option

* regenerate

* Update .changeset/eight-comics-tell.md

* fix

---------

Co-authored-by: Rich Harris <[email protected]>
Co-authored-by: Rich Harris <[email protected]>

Author: paoloricciuti

.changeset/eight-comics-tell.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: add support for `<svelte:options css="injected" />`

packages/svelte/messages/compile-errors/template.md

@@ -324,7 +324,7 @@ HTML restricts where certain elements can appear. In case of a violation the bro
 
 ## svelte_options_invalid_attribute_value
 
-> Valid values are %list%
+> Value must be %list%, if specified
 
 ## svelte_options_invalid_customelement
 

packages/svelte/src/compiler/errors.js

@@ -1275,13 +1275,13 @@ export function svelte_options_invalid_attribute(node) {
 }
 
 /**
- * Valid values are %list%
+ * Value must be %list%, if specified
  * @param {null | number | NodeLike} node
  * @param {string} list
  * @returns {never}
  */
 export function svelte_options_invalid_attribute_value(node, list) {
-	e(node, "svelte_options_invalid_attribute_value", `Valid values are ${list}`);
+	e(node, "svelte_options_invalid_attribute_value", `Value must be ${list}, if specified`);
 }
 
 /**

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') {
+					component_options.css = value;
+				} else {
+					e.svelte_options_invalid_attribute_value(attribute, `"injected"`);
+				}
+
+				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';
 	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="bar">bar</div>
+
+<style>
+	.bar {
+		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="bar svelte-ievf05">bar</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-ievf05">
+	.bar.svelte-ievf05 {
+		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>

packages/svelte/tests/validator/samples/namespace-invalid/errors.json

@@ -1,7 +1,7 @@
 [
 	{
 		"code": "svelte_options_invalid_attribute_value",
-		"message": "Valid values are \"html\", \"mathml\", \"svg\" or \"foreign\"",
+		"message": "Value must be \"html\", \"mathml\", \"svg\" or \"foreign\", if specified",
 		"start": {
 			"line": 1,
 			"column": 16

packages/svelte/tests/validator/samples/namespace-non-literal/errors.json

@@ -1,7 +1,7 @@
 [
 	{
 		"code": "svelte_options_invalid_attribute_value",
-		"message": "Valid values are \"html\", \"mathml\", \"svg\" or \"foreign\"",
+		"message": "Value must be \"html\", \"mathml\", \"svg\" or \"foreign\", if specified",
 		"start": {
 			"line": 1,
 			"column": 16

packages/svelte/types/index.d.ts

@@ -1533,6 +1533,7 @@ declare module 'svelte/compiler' {
 		accessors?: boolean;
 		preserveWhitespace?: boolean;
 		namespace?: Namespace;
+		css?: 'injected';
 		customElement?: {
 			tag: string;
 			shadow?: 'open' | 'none';