Unescaped semicolon in inlined CSS import URL triggers invalid request

Feedback
1

The inlined CSS in the worker HTML starts with:

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");

For some bizarre reason this causes Chrome (84.0.4147.125 on MacOS 10.13.6) to request the following URL:

https://mootari.static.observableusercontent.com/worker/url(%22https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400

The invalid request is immediately followed by a correct request to the proper stylesheet URL, also initiated by the worker frame.

For comparison, in the parent frame’s main stylesheet the font stylesheet is imported via:

@import "https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap";

Notes:

  • All tests were made without any active extensions.
  • I couldn’t observe the behavior in Firefox.
  • To get rid of the error, it might suffice to remove the wrapping url(...). Edit: Wrong conclusion. When the CSS is inlined and the (quoted) import URL contains a raw semicolon, then Chrome will treat this as the end of the statement and treat the URL up to the semicolon (including the url(" prefix) as relative URL.
2

Chrome chokes on the semicolon, and URI-encoding each stops the error:

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400%3B0,600%3B0,700%3B1,400%3B1,600%3B1,700&display=swap");

Edit: If others can confirm the problem, then this might qualify as a (very minor) webcompat bug.

3

So! As you’ve researched, this is a known issue that I’ve been consciously ignoring since it still ends up requesting the correct resource directly after. It:

  • is in Chrome only (not in Safari nor Firefox)
  • due to the @import …; in a <style> tag on the page (doesn’t happen without the semicolon and doesn’t happen from a css file either <link>ed or @import’ed)

See a small reproduction of mine on Codepen.

I’ve been hoping Chrome would fix this, but I was also considering un-inlining the worker css back to its own file, which would also fix this.

This was a change I introduced recently in moving our Source Serif Pro self-hosting to Google fonts. The immediate benefits of the Google-hosted version are smaller font files for most cases (they break up the font’s unicode ranges across files) and the thumbnailer’s kerning used to be pretty awkward, but is now correct.

1 Like
4

Update: @mbostock has since suggested an easy fix (moving from @import to a <link> tag), which should be deployed.

2 Likes