[Svelte 5] Error when parsing a semicolon inside a CSS `url()` function when used in `<style>`

[amr3k]

Describe the bug

I was trying to use a Google font by embedding it inside component style, and the font had multiple weights, that's when I noticed a 500 error: Expected a valid CSS identifier!

Notice this doesn't happen with svelte 4

Reproduction

A stackblitz demo of the bug with svelte 5

A stackblitz demo of normal behaviour with svelte 4

Logs

6  |  
7  |  <style>
8  |    @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
   |                                                                         ^
9  |    h1 {
10 |      font-family: 'Cairo', sans-serif;

CompileError: Expected a valid CSS identifier
    at CompileError (/home/projects/stackblitz-starters-fykxkh/node_modules/svelte/src/compiler/errors.js:545:3)
    at error (/home/projects/stackblitz-starters-fykxkh/node_modules/svelte/src/compiler/errors.js:583:8)
    at read_identifier (/home/projects/stackblitz-starters-fykxkh/node_modules/svelte/src/compiler/phases/1-parse/read/style.js:481:14)
    at read_selector (/home/projects/stackblitz-starters-fykxkh/node_modules/svelte/src/compiler/phases/1-parse/read/style.js:304:11)
    at read_selector_list (/home/projects/stackblitz-starters-fykxkh/node_modules/svelte/src/compiler/phases/1-parse/read/style.js:172:17)
    at read_rule (/home/projects/stackblitz-starters-fykxkh/node_modules/svelte/src/compiler/phases/1-parse/read/style.js:154:12)
    at read_body (/home/projects/stackblitz-starters-fykxkh/node_modules/svelte/src/compiler/phases/1-parse/read/style.js:79:18)
    at read_style (/home/projects/stackblitz-starters-fykxkh/node_modules/svelte/src/compiler/phases/1-parse/read/style.js:40:28)
    at tag (/home/projects/stackblitz-starters-fykxkh/node_modules/svelte/src/compiler/phases/1-parse/state/element.js:291:35)
    at Parser (/home/projects/stackblitz-starters-fykxkh/node_modules/svelte/src/compiler/phases/1-parse/index.js:89:12)
    at parse (/home/projects/stackblitz-starters-fykxkh/node_modules/svelte/src/compiler/phases/1-parse/index.js:297:17)
    at compile (/home/projects/stackblitz-starters-fykxkh/node_modules/svelte/src/compiler/index.js:43:43)
    at compileSvelte (/home/projects/stackblitz-starters-fykxkh/node_modules/@sveltejs/vite-plugin-svelte/src/utils/compile.js:146:27

System Info

Just stackblitz

Severity

annoyance

[n0n3br]

I think the problem may be at line 82 of style.js.It uses the regex /[{;]/ to detect the end of the block. In your case we have a semicolon inside quotes. Maybe changing this regex to exclude semicolons inside quotes could solve the problem.

[n0n3br]

Made a pr to fix it. Hope it get merged soon