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

GoogleChromeLabs / postcss-jit-props

A CSS custom property helper based on PostCSS. Supply a pool of variables and this plugin will add them to the stylesheet as they are used.

https://stackblitz.com/edit/jit-open-props?file=postcss.config.js

Apache License 2.0

210 stars 9 forks source link

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

Open jasonshanks opened 5 months ago

jasonshanks commented 5 months ago

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 commented 4 months ago

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 commented 2 months ago

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 : https://github.com/GoogleChromeLabs/postcss-jit-props/issues/40

argyleink commented 2 months ago

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!