Svelte: font face ignored when compiled via Component.render()?

Created on 6 Apr 2018  Â·  6Comments  Â·  Source: sveltejs/svelte


I might be doing it wrong but I included an @font-face directive to my style block and it's empty after compiling. There is a test repo here: https://github.com/burningTyger/compile

Here's the cli string:

 git clone [email protected]:burningTyger/compile.git; cd compile; npm install
 node index.js

Thanks for looking into it.

bug has pr

All 6 comments

Was just finally poking around at this a little bit. This is still an issue on the latest version, and affects DOM mode as well.

It looks like the issue is here - we aren't handling @font-face atrules. If I put in an else if (name === 'font-face') { return; } to make us just bail in that case and not try to minify the atrule, it looks like it gets included as expected. But that's not an ideal solution, because the @font-face block then isn't minified.

I'll have to dig in more to the data structures used to represent stylesheets here. The @font-face Atrule doesn't have any children and I'm not sure whether it should.

My current workaround is to use an external css file:

<style>
  @import 'main.css';
</style>

This handles at-rules globally but it works fine for me.

Yeah, something else I was thinking about while fiddling with this was whether we wanted to rename font faces to scope them to this component, as we do with keyframes.

I can't think of any features (besides keyframes and font faces) where something can be declared in one place in CSS and used elsewhere, but CSS is definitely not my area.

I understand why, but I think it's a bit strange to scope the @font-face. It would actually be the font-family prop, right?

This certainly prevents me using google fonts using @import syntax. I'm having to import the font-file globally at the html level. Seems very strange.

I think CSS variables might fall into the category you mentioned earlier @Conduitry - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

I faced with the same bug.
Any updates of this issue?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

matt3224 picture matt3224  Â·  3Comments

thoughtspile picture thoughtspile  Â·  3Comments

lnryan picture lnryan  Â·  3Comments

AntoninBeaufort picture AntoninBeaufort  Â·  3Comments

noypiscripter picture noypiscripter  Â·  3Comments