(V3 RC) experimental optimize doesn't seem to like fonts

[Monkatraz]

I have some @font-faces that look like this:

  @font-face
    font-family: 'Rubik'
    src: url('/static/fonts/variable/Rubik-VariableFont.woff2') format('woff2')
    font-weight: 300 900
    font-display: swap

  @font-face
    font-family: 'Rubik'
    src: url('/static/fonts/variable/Rubik-Italic-VariableFont.woff2') format('woff2')
    font-weight: 300 900
    font-style: italic
    font-display: swap

The sources are Stylus, but obviously it just compiles to CSS.

And my optimize config is:

"experiments": {
    "optimize": {
      "preload": true,
      "minify": true,
      "target": "es2018"
    }
  },

If I build, I will get an error for every single url():

The paths are meant to be from root, but it appears esbuild doesn't like that for whatever reason. However, I can workaround this issue by using relative paths:

src: url('../fonts/variable/Rubik-VariableFont.woff2') format('woff2')

But, I'll just get a different error:

After a brain-melting period of furious Googling, I think I have a guess at the problem. I think that the esbuild configuration Snowpack is selecting things it shouldn't - it is correctly selecting only JS and CSS files on the surface level, but once it resolves imports inside of those files it may encounter a file type it doesn't have a loader for. I think the esbuild documentation supports this, because it says that you'll need to add a loader for images and fonts in CSS files.

If anyone knows a good work-around for this let me know.

[evanw]

@FredKSchott Let me know if you want my help with this.

[sebastienbarre]

@choksheak would love to hear about the modifications you made to snowpack-plugin-relative-css-urls, because I'm stomped right now with these src: url() directives in my CSS files... Or actually any solution to this problem, because mine looks exactly like your original one. Thank you very much.

[choksheak]

Happy to help, @sebastienbarre! The code I use is relative-css-urls.js which you can copy from the following link:

https://gist.github.com/choksheak/14bc2ff80fbe337ba2435158176ed4e2

I am hoping that this functionality will be built into snowpack core as transforming css urls seem to be quite a common use case.

[sebastienbarre]

Thanks, will have a look! If you had a min, could you please elaborate on " Snowpack already copies the font files from my src/ directory verbatim to the output directory using the mount config"? Or share your mount config key? Thanks!

[choksheak]

This means that if you have say a font file like MyFont.ttf under src/fonts, and you have the following config in your snowpack.config.js:

module.exports = {
mount: {
src: { url: "/srcdist" },
},

Then after running npx snowpack build, you will see MyFont.ttf copied without any changes to build/srcdist/fonts.

[sebastienbarre]

Oh I see. I didn't realize you had vendored your font in src/fonts, I thought you were mounting something straight out of node_modules/. My config already has src: '/_dist_', so anything in src/fonts would land in build/_dist_/fonts. I assumed everybody had that mount point. Thanks.