Semicolon delimiter between font weights breaks Webpack-compiled CSS

[c-tanner]

The semicolon delimiter used for multiple font weight selections breaks the compiled CSS when using SCSS / Webpack.

SCSS:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

Compiled CSS:

@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;

600&display=swap);

I'm assuming Webpack sees the semicolon as a line-ending character and puts the following text on a new line. This causes the import to fail in the compiled CSS.

Solution: Using the HTML entity for semicolons (%3B) resolves this issue. Suggesting that this be swapped in the import codes supplied by Google Fonts.

[graphicore]

It would be interesting to hear what the Webpack developers think about this. It looks to me like the url parsing of the @import rule is broken and should be fixed. I.e. the (single) quotes in @import url('{the url}') seem to be ignored. But the quotes make a big difference in how to parse the url.

[c-tanner]

@graphicore I've created an issue in the Webpack repo, we'll see what they say.

[graphicore]

Thanks @c-tanner!

Issue is: webpack/webpack#10873