[css-in-js] Google fonts broken #21
Labels
Comments
|
You will need to provide full example, because I can not reproduce the error. Maybe you have some kind of JS which is responsible for font loading? I use following testcase <html lang="en">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
</head>
<body>
</body>
</html> |
|
Hm, I assume this has to do with critical css generation. I am using CRA, styled-components, and rebass. Rebass uses styled-components ThemeProvider to set a font-family in the theme. I don't think anything fancy is happening with these related to the font loading. If needed, I will recreate a minimal example using these libraries in the next few days. The line is untouched when not using react-snap. All of the @font-face is generated with something in react-snap. |
|
Output with <html lang="en"><head><meta charset="utf-8"><style type="text/css">@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans Regular'),local('OpenSans-Regular'),url(https://fonts.gstatic.com/s/opensans/v15/K88pR3goAWT7BTt32Z01m_FC_w5J6O5PEm5icuu-cHc.woff) format('woff');unicode-range:U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans Regular'),local('OpenSans-Regular'),url(https://fonts.gstatic.com/s/opensans/v15/RjgO7rYTmqiVp7vzi-Q5UfFC_w5J6O5PEm5icuu-cHc.woff) format('woff');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans Regular'),local('OpenSans-Regular'),url(https://fonts.gstatic.com/s/opensans/v15/LWCjsQkB6EMdfHrEVqA1KfFC_w5J6O5PEm5icuu-cHc.woff) format('woff');unicode-range:U+1F00-1FFF}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans Regular'),local('OpenSans-Regular'),url(https://fonts.gstatic.com/s/opensans/v15/xozscpT2726on7jbcb_pAvFC_w5J6O5PEm5icuu-cHc.woff) format('woff');unicode-range:U+0370-03FF}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans Regular'),local('OpenSans-Regular'),url(https://fonts.gstatic.com/s/opensans/v15/59ZRklaO5bWGqF5A9baEEfFC_w5J6O5PEm5icuu-cHc.woff) format('woff');unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans Regular'),local('OpenSans-Regular'),url(https://fonts.gstatic.com/s/opensans/v15/u-WUoqrET9fUeobQW7jkRfFC_w5J6O5PEm5icuu-cHc.woff) format('woff');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans Regular'),local('OpenSans-Regular'),url(https://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans SemiBold'),local('OpenSans-SemiBold'),url(https://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNSs0NlpArWrQ-mQys31ZNwTE.woff) format('woff');unicode-range:U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans SemiBold'),local('OpenSans-SemiBold'),url(https://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNStRc-2PBzc1NSFKvWogIzAE.woff) format('woff');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans SemiBold'),local('OpenSans-SemiBold'),url(https://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNSmyTStHY0V-yyowwjUxO52M.woff) format('woff');unicode-range:U+1F00-1FFF}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans SemiBold'),local('OpenSans-SemiBold'),url(https://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNSv8VwQmLN70U_B07n-lpR9Q.woff) format('woff');unicode-range:U+0370-03FF}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans SemiBold'),local('OpenSans-SemiBold'),url(https://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNSu1y2ggEKtv8WPJqPUwj45g.woff) format('woff');unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans SemiBold'),local('OpenSans-SemiBold'),url(https://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNSvpCW-pY0asCAalMicFfg1U.woff) format('woff');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans SemiBold'),local('OpenSans-SemiBold'),url(https://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNSqRDOzjiPcYnFooOUGCOsRk.woff) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(https://fonts.gstatic.com/s/opensans/v15/k3k702ZOKiLJc3WVjuplzM0NlpArWrQ-mQys31ZNwTE.woff) format('woff');unicode-range:U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(https://fonts.gstatic.com/s/opensans/v15/k3k702ZOKiLJc3WVjuplzNRc-2PBzc1NSFKvWogIzAE.woff) format('woff');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(https://fonts.gstatic.com/s/opensans/v15/k3k702ZOKiLJc3WVjuplzGyTStHY0V-yyowwjUxO52M.woff) format('woff');unicode-range:U+1F00-1FFF}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(https://fonts.gstatic.com/s/opensans/v15/k3k702ZOKiLJc3WVjuplzP8VwQmLN70U_B07n-lpR9Q.woff) format('woff');unicode-range:U+0370-03FF}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(https://fonts.gstatic.com/s/opensans/v15/k3k702ZOKiLJc3WVjuplzO1y2ggEKtv8WPJqPUwj45g.woff) format('woff');unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(https://fonts.gstatic.com/s/opensans/v15/k3k702ZOKiLJc3WVjuplzPpCW-pY0asCAalMicFfg1U.woff) format('woff');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(https://fonts.gstatic.com/s/opensans/v15/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}</style><link as="style" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" onload="this.rel='stylesheet'" rel="stylesheet"></head><body><script type="text/javascript">/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
!function(e){"use strict";var n=function(n,t,o){function i(e){if(a.body)return e();setTimeout(function(){i(e)})}function r(){l.addEventListener&&l.removeEventListener("load",r),l.media=o||"all"}var d,a=e.document,l=a.createElement("link");if(t)d=t;else{var f=(a.body||a.getElementsByTagName("head")[0]).childNodes;d=f[f.length-1]}var s=a.styleSheets;l.rel="stylesheet",l.href=n,l.media="only x",i(function(){d.parentNode.insertBefore(l,t?d:d.nextSibling)});var u=function(e){for(var n=l.href,t=s.length;t--;)if(s[t].href===n)return e();setTimeout(function(){u(e)})};return l.addEventListener&&l.addEventListener("load",r),l.onloadcssdefined=u,u(r),l};"undefined"!=typeof exports?exports.loadCSS=n:e.loadCSS=n}("undefined"!=typeof global?global:this);
/*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */
!function(t){if(t.loadCSS){var e=loadCSS.relpreload={};if(e.support=function(){try{return t.document.createElement("link").relList.supports("preload")}catch(t){return!1}},e.poly=function(){for(var e=t.document.getElementsByTagName("link"),r=0;r<e.length;r++){var n=e[r];"preload"===n.rel&&"style"===n.getAttribute("as")&&(t.loadCSS(n.href,n,n.getAttribute("media")),n.rel=null)}},!e.support()){e.poly();var r=t.setInterval(e.poly,300);t.addEventListener&&t.addEventListener("load",function(){e.poly(),t.clearInterval(r)}),t.attachEvent&&t.attachEvent("onload",function(){t.clearInterval(r)})}}}(this);</script></body></html> |
stereobooster
changed the title
|
I wasn't running w/ inlineCSS originally. Adding that ends up producing the same issue. Config used: const { run } = require("react-snap");
run({
fixWebpackChunksIssue: true,
inlineCss: true
});I will get together an example that produces the error so you can see it in action. |
stereobooster
changed the title
|
Starting from a fresh CRA projects, none of the following reproduce the issue.
I will spend more time trying to isolate the issue later. It appears to be an edge case. |
|
Whatever was causing this issue was resolved by updating |
|
Is there an example of how to implment CRA+react-snap+styled-components ? I've been googling and githubing for hours and can't find an example. This was the closest thing. |
erulabs
pushed a commit
to erulabs/react-snap
that referenced
this issue
Jan 22, 2021
…utput-format Feat/custom html output format
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey, awesome library here. Excited to see someone improve upon react-snapshot! Moving off of JSDOM, working w/ react-loadable, adding critical css... all awesome! Thanks for your work on this.
Anyways, I appear to have an issue:
I have the following lines in my index.html file to use a google font.
After running through react-snap, I'm getting:
The generated
media="@media{a{top:0}}"prevents the font from applying to anything. Removing the media tag manually resolves the issue.Any idea on how to resolve this? Is there config that can be done?
The text was updated successfully, but these errors were encountered: