-
Notifications
You must be signed in to change notification settings - Fork 9.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
core(fonts): handle CORS cssRules #5592
Conversation
Thanks Chrome for starting to throw here when you didn't before. 💔 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
@@ -124,11 +124,24 @@ function getFontFaceFromStylesheets() { | |||
return new Promise(resolve => { | |||
newNode.addEventListener('load', function onload() { | |||
newNode.removeEventListener('load', onload); | |||
resolve(getFontFaceFromStylesheets()); | |||
try { | |||
const stylesheet = Array.from(document.styleSheets).find(sh => sh.ownerNode === newNode); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I feel like s
would be better :P
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
if (cssStylesheet.cssRules === null && cssStylesheet.href && cssStylesheet.ownerNode && | ||
// @ts-ignore - crossOrigin exists if ownerNode is an HTMLLinkElement | ||
!cssStylesheet.ownerNode.crossOrigin) { | ||
// cssRules can be null or this access can throw when CORS isn't enabled, throw a matching error message. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
a little hard to parse comment. Semicolon instead of a comma?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
@@ -6,14 +6,14 @@ | |||
font-family: 'Lobster'; | |||
font-style: normal; | |||
font-weight: 400; | |||
src: local('Lobster'), url('./lobster-v20-latin-regular.eot?#iefix') format('eot'), url('./lobster-v20-latin-regular.woff2') format('woff2'); | |||
src: url('./lobster-v20-latin-regular.woff2') format('woff2'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I added the local strings just to make sure the regex in getSheetsFontFaces works. Maybe we should keep it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah ok, thanks for the context I'll revert :)
} | ||
@font-face { | ||
font-family: 'Lobster Two'; | ||
font-style: normal; | ||
font-weight: 700; | ||
font-display: optional; | ||
src: local("Lobster Two"), url("./lobster-two-v10-latin-700.woff2?delay=4000") format('woff2'); | ||
src: url("./lobster-two-v10-latin-700.woff2?delay=4000") format('woff2'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
same here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
After our 3.0 release a new high volume error popped up in sentry for the fonts gatherer. Turns out Chrome changed the behavior for CORS
.cssRules
property to throw instead of benull
.This adds a smoketest for the CORS font case and fixes that behavior.