Skip to content
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

Merged
merged 3 commits into from
Jul 2, 2018
Merged

core(fonts): handle CORS cssRules #5592

merged 3 commits into from
Jul 2, 2018

Conversation

patrickhulce
Copy link
Collaborator

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 be null.

This adds a smoketest for the CORS font case and fixes that behavior.

@paulirish
Copy link
Member

Thanks Chrome for starting to throw here when you didn't before. 💔

Copy link
Member

@brendankenny brendankenny left a 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);
Copy link
Member

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

Copy link
Collaborator Author

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.
Copy link
Member

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?

Copy link
Collaborator Author

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');
Copy link
Collaborator

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?

Copy link
Collaborator Author

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');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

@paulirish paulirish dismissed wardpeet’s stale review July 2, 2018 15:58

cant merge otherwise.

@paulirish paulirish merged commit 65fa9fc into master Jul 2, 2018
@paulirish paulirish deleted the cors_fonts branch July 2, 2018 15:58
paulirish pushed a commit that referenced this pull request Jul 2, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants