Preprocessor tries to process style string within script section

[brunnerh]

Describe the bug
I have a component which generates a small bit of HTML which is injected into an iframe. The HTML contains a style section which the preprocessor tries to transform, yielding a parser error because there are interpolated values in it.

To Reproduce

A component like this will cause the error:

<script>
	function getItemHtml(html)
	{
		const style = window.getComputedStyle(document.documentElement);

		const background = style.getPropertyValue('--background');
		const foreground = style.getPropertyValue('--foreground');

		return html + /*html*/`<style>
			html
			{
				background: ${background};
				color: ${foreground};
			}
		</style>`;
	}
</script>

<style>
	:global(:root)
	{
		--background: #333;
		--foreground: #ddd;
	}
</style>

<div>
	HTML:
	<pre>
		{getItemHtml('Hello World')}
	</pre>
</div>

[Repository with Webpack config]

Expected behavior
No attempted transform and thus no errors.

Stacktraces

Stack trace

ERROR in ./src/app.svelte
Module build failed (from ./node_modules/svelte-loader/index.js):
CssSyntaxError: C:\brunnerh\svelte-global-issue\src\app.svelte:4:19: Unknown word
    at Input.error (C:\brunnerh\svelte-global-issue\node_modules\postcss\lib\input.js:130:16)        
    at Parser.unknownWord (C:\brunnerh\svelte-global-issue\node_modules\postcss\lib\parser.js:563:22)
    at Parser.other (C:\brunnerh\svelte-global-issue\node_modules\postcss\lib\parser.js:168:12)      
    at Parser.parse (C:\brunnerh\svelte-global-issue\node_modules\postcss\lib\parser.js:77:16)       
    at parse (C:\brunnerh\svelte-global-issue\node_modules\postcss\lib\parse.js:17:12)
    at new LazyResult (C:\brunnerh\svelte-global-issue\node_modules\postcss\lib\lazy-result.js:60:16)
    at Processor.<anonymous> (C:\brunnerh\svelte-global-issue\node_modules\postcss\lib\processor.js:138:12)
    at Processor.process (C:\brunnerh\svelte-global-issue\node_modules\postcss\lib\processor.js:117:23)
    at transformer (C:\brunnerh\svelte-global-issue\node_modules\svelte-preprocess\dist\transformers\globalStyle.js:55:67)
    at Object.exports.runTransformer (C:\brunnerh\svelte-global-issue\node_modules\svelte-preprocess\dist\autoProcess.js:51:12)
    at async style (C:\brunnerh\svelte-global-issue\node_modules\svelte-preprocess\dist\autoProcess.js:171:33)
    at async C:\brunnerh\svelte-global-issue\node_modules\svelte\compiler.js:27016:32
    at async Promise.all (index 0)
    at async replace_async (C:\brunnerh\svelte-global-issue\node_modules\svelte\compiler.js:26971:52)
    at async preprocess (C:\brunnerh\svelte-global-issue\node_modules\svelte\compiler.js:27012:19)
 @ ./src/main.js 1:0-31 3:4-7
 @ multi ./src/main.js

Information about your project:

• Your browser and the version: -
• Your operating system: Windows 10 64bit
• svelte-preprocess version: 4.1.1
• Webpack

Workaround

Trick the Regex looking for <style>, e.g.:

return html + /*html*/`<${''}style>...`

[kaisermann]

Hey @brunnerh 👋 That's actually a known limitation in the way svelte looks for the content of those tags, nothing we can do from the svelte-preprocess side. See the regex here.

[brunnerh]

Oh, saw .../preprocess/index.ts and was mislead...