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

Check for already-injected @font-face rules by src - Fixes #80 #82

Merged
merged 6 commits into from
Sep 16, 2016

Conversation

jdan
Copy link
Contributor

@jdan jdan commented Jun 5, 2016

Hey @xymostech && @jlfwong,

This changeset modifies the call to injectStyleOnce to use src as the key, rather than fontName which does not need to be unique.

I added a quick test as well, let me know if you'd like it to be more thorough. You can also see the fix in action on my cloned Aphrodite output.

Input:

{
  "test": {
    fontFamily: [{
      fontStyle: "normal",
      fontWeight: "normal",
      fontFamily: "My Font",
      src: 'url(blah) format("woff"), url(blah) format("truetype")'
    }, {
      fontStyle: "italic",
      fontWeight: "normal",
      fontFamily: "My Font",
      src: 'url(blahitalic) format("woff"), url(blahitalic) format("truetype")'
    }]
  }
}

Current:

@font-face {
  font-style:normal;font-weight:normal;font-family:My Font;src:url(blah) format("woff"), url(blah) format("truetype");
}
.test_1pqrvdz {
  font-family:"My Font","My Font" !important;}

With fix (notice how "My Font" is uniquified in font-family):

@font-face {
  font-style:normal;font-weight:normal;font-family:My Font;src:url(blah) format("woff"), url(blah) format("truetype");
}
@font-face {
  font-style:italic;font-weight:normal;font-family:My Font;src:url(blahitalic) format("woff"), url(blahitalic) format("truetype");
}
.test_1pqrvdz {
  font-family:"My Font" !important;}

Maybe we want to think about only adding @font-face if it actually applies to the font-family rule? (i.e., only adding the second @font-family if we use font-style: italic?) dunno

@@ -43,6 +43,10 @@ export const recursiveMerge = (a, b) => {
return ret;
};

export const uniquify = (values) => {
return [...new Set(values)];
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm not sure we guarantee that people have a Set polyfill, so I don't think this will work?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good catch! Looks like our build script doesn't polyfill it.

Copy link
Collaborator

Choose a reason for hiding this comment

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

I'm guessing this was already the plan, but I'd rather just not use Set than change this to include the polyfill (in the interest of keeping byte size down).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah we're on the same page. Since outputting unique font-familys isn't important we can skip all of this.

@xymostech
Copy link
Contributor

This fixes #80, correct?

@jdan
Copy link
Contributor Author

jdan commented Jun 6, 2016

Yep fixes #80! It's in the commit message so it'll auto-close if merged.

@jdan
Copy link
Contributor Author

jdan commented Jun 7, 2016

Kk after some revert-revert-reverts I removed the unique font style stuff. This is good for a re-review.

@jlfwong
Copy link
Collaborator

jlfwong commented Jun 7, 2016

One line change accompanied by lots of tests -- this is my kinda change 😄

LGTM, but I only skimmed -- will leave to @xymostech for sign-off.

@smdern
Copy link

smdern commented Sep 16, 2016

Any update on this?

@xymostech
Copy link
Contributor

Looks like I totally dropped the ball here! Looks like this still merges, so I'm gonna squash+merge. Thanks for the reminder @smdern

@xymostech xymostech merged commit 8f2e11f into master Sep 16, 2016
@jdan jdan deleted the multiple-font-face branch September 17, 2016 15:40
@jlfwong
Copy link
Collaborator

jlfwong commented Sep 17, 2016

Should this be a patch or a minor release?

mattkrick added a commit to mattkrick/aphrodite that referenced this pull request Oct 5, 2016
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