preprocess self-closing script and style tags (#5082)

Author: lukasmoellerch

src/compiler/preprocess/index.ts

@@ -94,8 +94,8 @@ export default async function preprocess(
 	for (const fn of script) {
 		source = await replace_async(
 			source,
-			/<!--[^]*?-->|<script(\s[^]*?)?>([^]*?)<\/script>/gi,
-			async (match, attributes = '', content) => {
+			/<!--[^]*?-->|<script(\s[^]*?)?(?:>([^]*?)<\/script>|\/>)/gi,
+			async (match, attributes = '', content = '') => {
 				if (!attributes && !content) {
 					return match;
 				}
@@ -114,8 +114,8 @@ export default async function preprocess(
 	for (const fn of style) {
 		source = await replace_async(
 			source,
-			/<!--[^]*?-->|<style(\s[^]*?)?>([^]*?)<\/style>/gi,
-			async (match, attributes = '', content) => {
+			/<!--[^]*?-->|<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi,
+			async (match, attributes = '', content = '') => {
 				if (!attributes && !content) {
 					return match;
 				}

test/preprocess/samples/script-self-closing/_config.js

@@ -0,0 +1,12 @@
+import * as assert from "assert";
+
+export default {
+	preprocess: {
+		script: ({ content, attributes }) => {
+			assert.equal(content, "");
+			return {
+				code: `console.log("${attributes["the-answer"]}");`
+			};
+		}
+	}
+};

test/preprocess/samples/script-self-closing/input.svelte

@@ -0,0 +1 @@
+<script the-answer="42"/>

test/preprocess/samples/script-self-closing/output.svelte

@@ -0,0 +1 @@
+<script the-answer="42">console.log("42");</script>

test/preprocess/samples/style-self-closing/_config.js

@@ -0,0 +1,12 @@
+import * as assert from "assert";
+
+export default {
+	preprocess: {
+		style: ({ content, attributes: { color } }) => {
+			assert.equal(content, "");
+			return {
+				code: `div { color: ${color}; }`
+			};
+		}
+	}
+};

test/preprocess/samples/style-self-closing/input.svelte

@@ -0,0 +1,3 @@
+<div class='brand-color'>$brand</div>
+
+<style color="red"/>

test/preprocess/samples/style-self-closing/output.svelte

@@ -0,0 +1,3 @@
+<div class='brand-color'>$brand</div>
+
+<style color="red">div { color: red; }</style>