Loading styles. Content attribute not working.

[thsorens]

When using ex font-awesome or some other library that provides icons as a font, the font is not working in the opened window. I can see that the styles for it is copied over, but the content part of the style is not put in properly.

[yakaldir]

same for usage like: .check-toggle { -webkit-mask-image: url(../images/check.svg); mask-image: url(../images/check.svg); } check.svg is not copied

[Hinaser]

Hi I came across the same issue and understand the root cause.

When copying css styles from original window, the function below will be called.

The problem is, when trying to copy styles from <link rel='stylesheet' href=<url> />, sometimes it extracts css styles rules from the url specified at href attribute. For @font-face css rule, it can specify font file location in relative path style.

So those relational path will be broken when the rule is extracted from css files and copied as plain <style></style> element.

For example, below is the case which breaks font-face rule.

In above case, rules variable in copyStyles function will not be empty and thus the css rules is pulled out from the css file.

I already send PR for this issue. In case you can't wait until PR is merged, I also uploaded fixed version of this npm module.

You can specify fixed version of npm module like below in package.json. Or just re-install react-new-window with my github repos branch. npm install --save Hinaser/react-new-window#npm-fix-external-font-not-loaded

[TravWill-Mongo]

@Hinaser Just wanted to say thanks, your fix helped me with using Material UI in a NewWindow

[rmariuzzo]

Release 1.0.1 include the fix provided by @Hinaser. Here's a working example (click on FontFace).