Breaks local fonts folder being visible in the browser Sources folder tree

[jasonshanks]

I have this working entirely except the one thing it is breaking is my local @fontface fonts. I am using:

• @import rules for buttons, normalize
• postcss.config for jitprops(and loading open-props):

const postcssJitProps = require('postcss-jit-props');
const OpenProps = require('open-props');
module.exports = {
  plugins: [postcssJitProps(OpenProps), require('autoprefixer')],
};

• VITE to build a WordPress project

The problem appears to be that despite the font folder building as normal to /assets/dist/fonts and is physically there, it fails to show up in the Sources location when inspecting in the browser?!? Otherwise all the style references are the same and correct.

[argyleink]

can I get a little more information about the props you're using and the issue? 🙂

jit-props only knows to observe custom properties and inserts values from Open Props (in your example) into :root on discovery. you're sharing that the fonts are there but the prop referencing it isnt? is this a path issue to your local fonts or a custom property issue?

[renardsas]

I'm not sure if this is related to that issue.
If we update the example with Nuxt (3.11) and install nuxt-font, we encounter a 500 error:
[vite-node] [plugin:vite:css] /.nuxt/nuxt-fonts-global.css

stackblitz : https://stackblitz.com/edit/nuxt-openprops-3fecuv?file=package.json

 ERROR  Could not download google font metadata. @nuxt/fonts will not be able to inject @font-face rules for google.                                                          @nuxt/fonts 21:00:43


 ERROR  Could not download fontshare font metadata. @nuxt/fonts will not be able to inject @font-face rules for fontshare.                                                    @nuxt/fonts 21:00:43

If we remove postcss-jit-props, no error.
I don't have any leads on the issue yet.

It might also be related to this issue :
#40

[argyleink]

hm.. i wasnt able to get that stackblitz into a working example, even by removing jit-props and/or open props.

can try to help again later, but need to pivot to other things atm. keep me posted!