Importing packages from the Typefaces project breaks Webpack

[fmauNeko]

Hello,

if I try to import a font from one of the KyleAMathews/typefaces project, webpack compilation breaks.

I also tried to use CSS imports from a .global.css file but had no success either.

Is there any way to make this working ? I want to avoid importing from external CDNs as much as possible.

Thanks !

Here's the error I get in the console:

/home/fmauneko/code/accounts/node_modules/typeface-roboto/index.css:2
@font-face {
^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:537:28)
    at Object.Module._extensions..js (module.js:584:10)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
    at Function.Module._load (module.js:462:3)
    at Module.require (module.js:517:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/fmauneko/code/accounts/dist/server_dev.js:2729:18)

[leebenson]

What should be possible is simply importing the css into styles.global.css:

@import '~typeface-abeezee/index.css';

html {
  font-family: 'ABeeZee';
}

However, it seems that @font-face is simply ignored on imports.

I'll investigate this today.

[leebenson]

Found the issue to ^^^: cssnano/cssnano#374

Basically, cssnano was removing unused @font-face declarations. Since this was being pulled from an external file, it reached the end of the file and saw it wasn't used, so discarded it - rendering it unavailable to the calling CSS file.

Bumping to cssnano@next fixes it, which I'll do in the next release (later today.)

The issue you're facing @fmauNeko with @font-face being an invalid token looks different. Make sure you're importing it per the example above, and not from within a .js file.

[fmauNeko]

I was indeed importing it from my js file, like I did in a create-react-app application, which works.
I'll bump to cssnano@next and import in from styles.global.css then, thanks a lot !

[leebenson]

generally, direct imports from .js will work, but they'll follow the Webpack build config for the rest of the system -- i.e. if you're just doing require('typeface-bla');, it'll think that's a JS file and not .css specifically, hence the 'unknown token' error.

You could do require('typeface-bla/index.css'), but then you'll get local modules (which shouldn't be an issue with @font-face declarations, but it might be with other stuff).

Best/easiest is to keep all CSS in CSS land by just importing from the relevant .css or .global.css file.

[fmauNeko]

Yeah that's what I'll do from now on. Which is the proper way to be honest.
Anyway with cssnano@next everything works like a charm !

Thanks for your time :)

[leebenson]

my pleasure. Gimme a shout if you run into any other issues.

[leebenson]

fixed in 2.8.2