use globalCss to import more than one font face

[hhhxxjj]

Describe the bug
A clear and concise description of what the bug is.

I'm using globalCss to import serveral font faces.

when only one font face is includes, it is OK:

const globalStyles = globalCss({ '@font-face': { fontFamily: 'CustomFont1', src: 'local("CustomFont1"), url("CustomFont1.woff2")', }, });

when two font faces are introduces, the IDE complains wrong type, this code is as follows:

const globalStyles = globalCss({ '@font-face': [ { fontFamily: 'CustomFont1', src: 'local("CustomFont1"), url("CustomFont1.woff2")', }, { fontFamily: 'CustomFont2', src: 'local("CustomFont2"), url("CustomFont2.woff2")', }, ], });

the details info is as follows:

globalCss<{ '@font-face': unknown; }>( ...styles: {"@import"?: unknown, "@font-face"?: unknown} & {"@font-face": CSS<{sm: string, md: string, lg: string, xl: string, "2xl": string, "reduce-motion": string, light: string, dark: string}, {colors: {loContrast: string, ... 112 more ..., blackAlpha12: string}, ... 9 more ..., zIndices: {}}, {}, {}>}[]): () => string

However, if I use 'import {globalCss} from "@stitches/core"', the same code works.

To Reproduce
Steps to reproduce the behavior:

Expected behavior
A clear and concise description of what you expected to happen.

this works for hope ui.

By the way, what's the difference of between hopeUi-globalCss and stitches-globalCss?

[fabien-ml]

Hi, I'm not sure why TS complain, Hope UI globalCss is the same method exported by createStitches call :/

Does the font load even with the type error ?

[hhhxxjj]

Can I use {globalCss} of "@stitches/core" directly? Why do we need add this method in hope-ui?

[fabien-ml]

Hope UI use createStitches for creating its theme. This method return a globalCss method in which you can use theme tokens. I'm not sure if you can use the one from @stitches/core without conflict, but you won't be able to use Hope ui theme tokens in this one

[again7536]

There is a typo in the type definition.

// @hope-ui/solid/dist/styled-system/stitches.config.d.ts

{ [K in keyof Styles]: K extends "@@font-face" ? 
    import("@stitches/core/types/css").AtRule.FontFace | import("@stitches/core/types/css").AtRule.FontFace[] 
    : K extends `@keyframes ${string}` ? /* ... */

I think @@font-face should be @font-face and it worked when I fixed it.