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.
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?