")" not found when trying to import font with multiple weights

[RahulLanjewar93]

CSSOM/lib/parse.js

Lines 333 to 358 in a469aae

	case ";":
	switch (state) {
	case "value":
	styleRule.style.setProperty(name, buffer.trim(), priority);
	priority = "";
	buffer = "";
	state = "before-name";
	break;
	case "atRule":
	buffer = "";
	state = "before-selector";
	break;
	case "importRule":
	importRule = new CSSOM.CSSImportRule();
	importRule.parentStyleSheet = importRule.styleSheet.parentStyleSheet = styleSheet;
	importRule.cssText = buffer + character;
	styleSheet.cssRules.push(importRule);
	buffer = "";
	state = "before-selector";
	break;
	default:
	buffer += character;
	break;
	}
	break;

This fails for import rules for fonts which have multiple font weights.

Example :- @import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400&display=swap);

I get the error:- ")" not found.
I am guessing it's due to semicolon being encountered first before closing the bracket.

[RahulLanjewar93]

@papandreou @NV Any idea how we can resolve this?

[papandreou]

Yeah, looks like the parser doesn't handle semicolons within url(...).

One possible workaround is to add quotes around the url:

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400&display=swap');

Or you can percent-encode the semicolon:

@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300%3B400&display=swap);

[RahulLanjewar93]

Thanks for the workaround.