[jss] feature request: font-face types

[trusktr]

@appsforartists, @kof, @pelotom, @eps1lon

A typing for font face rules could be convenient.

[eps1lon]

Please include code that currently fails the type checker and a link to the documentation for that runtime behavior.

[trusktr]

Here's a link to the @font-face JSS format: https://cssinjs.org/jss-syntax/?v=v10.0.0-alpha.16#font-face

There's no occurrence of font-face or fontFace in the css.d.ts file, so I guess it is missing.

In practice, I'm using @material-ui/core (http://material-ui.com) to apply the styles, but in that case all rules are typed as CSSProperties, which does include things like fontFamily, etc.

Where it trips is when I try to pass an array, so I have to cast it to trick it. For example:

    // avenirFont is an array of font rules, as per JSS docs.
    '@global': {
      '@font-face': ([...avenirFont] as unknown) as CSSProperties,
    },

What I've done in my local code to give the font faces a type is

export type FontFaceRule = {
  fontFamily: string
  src: string
  fallbacks: { src: string }[]
  fontStyle: string
  fontWeight: 0
}

and I'm using FontFaceRule[] as the type of avenirFont to aid in that part, before finally casting it.

Material-ui is typing CSSProperties like this:

import * as CSS from 'csstype';
import * as JSS from 'jss';

export interface CSSProperties extends CSS.Properties<number | string> {
  // Allow pseudo selectors and media queries
  [k: string]: CSS.Properties<number | string>[keyof CSS.Properties] | CSSProperties;
}

/**
 * This is basically the API of JSS. It defines a Map<string, CSS>,
 * where
 *
 * - the `keys` are the class (names) that will be created
 * - the `values` are objects that represent CSS rules (`React.CSSProperties`).
 */
export type StyleRules<ClassKey extends string = string> = Record<ClassKey, CSSProperties>;

export type StyleRulesCallback<ClassKey extends string = string> = (
  theme: Theme,
) => StyleRules<ClassKey>;

Seems like material-ui is making some custom styles on top of csstype and jss.

If the @font-face format is specified by JSS, maybe the typings for that should be in @types/jss.

[eps1lon]

I'm asking because I need some code to test this on. It's not apparent to me how this code would look in isolation.

[appsforartists]

I believe @kof and company are maintaining a d.ts in the primary repo now. Should we even still have an @types/jss?

[orta]

Hi thread, we're moving DefinitelyTyped to use GitHub Discussions for conversations the @types modules in DefinitelyTyped.

To help with the transition, we're closing all issues which haven't had activity in the last 6 months, which includes this issue. If you think closing this issue is a mistake, please pop into the TypeScript Community Discord and mention the issue in the definitely-typed channel.