fix: use improved regex for script and style from svelte (#799)

* fix: use improved regex for script and style from svelte * fix: update regexes to correctly account for unquoted attribute values, see sveltejs/svelte#9552 * Update packages/vite-plugin-svelte/src/utils/error.js Co-authored-by: Bjorn Lu <[email protected]> --------- Co-authored-by: Bjorn Lu <[email protected]>
sveltejs · Nov 21, 2023 · c2017e0 · c2017e0
1 parent f2dfba3
commit c2017e0
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/.changeset/eighty-oranges-brush.md b/.changeset/eighty-oranges-brush.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+fix: improve checking of script and style in .svelte code to work with new generic= attribute
diff --git a/packages/vite-plugin-svelte/src/utils/compile.js b/packages/vite-plugin-svelte/src/utils/compile.js
@@ -12,7 +12,11 @@ import { mapToRelative } from './sourcemaps.js';
 import { enhanceCompileError } from './error.js';
 import { isSvelte5 } from './svelte-version.js';
 
-const scriptLangRE = /<script [^>]*lang=["']?([^"' >]+)["']?[^>]*>/;
+// TODO this is a patched version of https://github.com/sveltejs/vite-plugin-svelte/pull/796/files#diff-3bce0b33034aad4b35ca094893671f7e7ddf4d27254ae7b9b0f912027a001b15R10
+// which is closer to the other regexes in at least not falling into commented script
+// but ideally would be shared exactly with svelte and other tools that use it
+const scriptLangRE =
+	/<!--[^]*?-->|<script (?:[^>]*|(?:[^=>'"/]+=(?:"[^"]*"|'[^']*'|[^>\s]+)\s+)*)lang=["']?([^"' >]+)["']?[^>]*>/;
 
 /**
  * @param {Function} [makeHot]

diff --git a/packages/vite-plugin-svelte/src/utils/error.js b/packages/vite-plugin-svelte/src/utils/error.js
@@ -114,8 +114,9 @@ export function enhanceCompileError(err, originalCode, preprocessors) {
 
 	// Handle incorrect TypeScript usage
 	if (err.code === 'parse-error') {
-		// Reference from Svelte: https://github.com/sveltejs/svelte/blob/800f6c076be5dd87dd4d2e9d66c59b973d54d84b/packages/svelte/src/compiler/preprocess/index.js#L262
-		const scriptRe = /<script(\s[^]*?)?(?:>([^]*?)<\/script>|\/>)/gi;
+		// Reference from Svelte: https://github.com/sveltejs/svelte/blob/9926347ad9dbdd0f3324d5538e25dcb7f5e442f8/packages/svelte/src/compiler/preprocess/index.js#L259
+		const scriptRe =
+			/<!--[^]*?-->|<script((?:\s+[^=>'"/]+=(?:"[^"]*"|'[^']*'|[^>\s]+)|\s+[^=>'"/]+)*\s*)(?:\/>|>([\S\s]*?)<\/script>)/g;
 		const errIndex = err.pos ?? -1;
 
 		let m;
@@ -142,7 +143,9 @@ export function enhanceCompileError(err, originalCode, preprocessors) {
 
 	// Handle incorrect CSS preprocessor usage
 	if (err.code === 'css-syntax-error') {
-		const styleRe = /<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi;
+		// Reference from Svelte: https://github.com/sveltejs/svelte/blob/9926347ad9dbdd0f3324d5538e25dcb7f5e442f8/packages/svelte/src/compiler/preprocess/index.js#L257
+		const styleRe =
+			/<!--[^]*?-->|<style((?:\s+[^=>'"/]+=(?:"[^"]*"|'[^']*'|[^>\s]+)|\s+[^=>'"/]+)*\s*)(?:\/>|>([\S\s]*?)<\/style>)/g;
 
 		let m;
 		while ((m = styleRe.exec(originalCode))) {