Jss: styles typing (auto-completion, validation)

[HenriBeck]

_From @caub on March 29, 2018 9:25_

I think many of us would like to have syntax highlighting, validation, .. for the styles

I'll talk about VSCode, sorry about other editors, styled-components have https://github.com/styled-components/vscode-styled-components

It should be possible to do it, but more using React definitions:

And trigger it for a

const styles = {
  foo: {
    alignItems: '...'
  }
};

@visioncan did something interesting: https://github.com/visioncan/vscode-jss-snippets, but I think I'd prefer that it behaves like React inline styles

_Copied from original issue: cssinjs/react-jss#218_

[HenriBeck]

_From @kof on March 29, 2018 9:46_

Also having flow and/or typescript typings for styles would allow vscode and other editors to show the hints https://github.com/cssinjs/jss/issues/361 https://github.com/cssinjs/jss/issues/375

Types could be generated out of mdn database, we started a repo but
I still had to time https://github.com/cssinjs/style-type-generator

[HenriBeck]

I would also prefer adding types rather than specific plugins as types can work in all editor which support flow/typescript.

Also tracking down which object is a Jss stylesheet might be hard, especially when they are in different files.

[HenriBeck]

_From @caub on April 19, 2018 17:57_

The ones from Glamorous might be really close to what is needed (talk)

[HenriBeck]

_From @jeffal on April 23, 2018 21:37_

Would this idea include class name validation? For example, a no unused class name lint rule.

[HenriBeck]

_From @kof on April 24, 2018 11:6_

@jeffal I think its a separate issue, created one here https://github.com/cssinjs/jss/issues/705

[HenriBeck]

I have typed my styles like this, though that doesn't save you from unused rules.

Example:

const styles = {
  root: {
    display: 'flex',
  },
};

type Props = { classes: { [keys: $Keys<typeof styles>]: string } };

// or with a little helper type:
type ClassesProp<S> = { [keys: $Keys<S>]: string };

type Props = { classes: ClassesProp<typeof styles> };

[HenriBeck]

_From @olee on May 12, 2018 10:44_

I usually type my style definitions like this:

// helper definition
type WithStyles<K> = { [keys: K]: string };

const styles = {
  root: {
    display: 'flex',
  } as React.CSSProperties,
};
type StyleKeys = keyof typeof styles;

type Props = MyProps & WithStyles<StyleKeys>;

This allows proper type checking and autocomplete when writing styles and is quite easy to use.

[saevarb]

Hello. I was rather surprised to find out that this hasn't been implemented considering the claim that there is "first-class support for typescript."

It seems to me that this has already been solved by Material UI's createStyles which doesn't do anything except help the typechecker along. Is there a reason this hasn't been added to jss?

[goleary]

@HenriBeck curious if you have any plans to support a similar solution to the one within Material UI?

[didrip]

I use type JSSStyles = { [keys: string]: React.CSSProperties | JSSStyles };. ex:

const styles:JSSStyles = {

    content: {
        height: '100%',
        display: 'wrong',

        '&:hover': {
            display: 'flex',
        },
    },
};

// @ts-ignore
const useStyles = createUseStyles(styles);

This allows CSS properties and values auto-completion, however CSS values can still be anything (ex display: 'wrong'), I guess it is how React.CSSProperties works.

It would be nice to have it integrated in though, so I would not have to declare a variable in order to type it.

_(applies to react-jss)_

edit: unfortunately this does not work with dynamic/function properties such as borderStyle: ({ foo }) => foo ? 'solid': 'none'

[didrip]

Using the types StyleRules from material-ui i was able to get it working:

import type { StyleRules } from '@material-ui/styles/withStyles'; // can be installed as devDependency

const styles:StyleRules<{ foo: boolean }> = {

    content: {
        height: '100%',
        display: 'wrong',
        borderStyle: ({ foo }) => foo ? 'solid': 'none',

        '&:hover': {
            display: 'flex',
        },
    },
};

edit: there is however one caveat, the classes names are not mapped to the object returned by useStyles.

[didrip]

I ended up re-declaring the function createUseStyles using types from @material-ui/styles/withStyles. This allows to pass the styles object to createUseStyles without declaring a variable first.

// src/types/react-jss.d.ts

import type { StyleRules } from '@material-ui/styles/withStyles';
import type { Classes } from 'jss';

declare module 'react-jss' {

    // redeclare createUseStyles using StyleRules type from material-ui
    // @TODO: use partial inference if possible to allow classes inference (<C>) even when passing <Props>
    function createUseStyles<Props extends object = {}, C extends string = string>(
        styles: StyleRules<Props, C>): (data?: Props) => Classes<C>
}

Use:

// SomeComponent.tsx
import React from 'react';
import { createUseStyles } from 'react-jss';

const useStyles = createUseStyles<{ foo: boolean, bar: number }> = {

    content: {
        height: '100%',
        display: 'flex',
        borderStyle: ({ foo }) => foo ? 'solid': 'none',

        '&:hover': {
            borderWidth: ({ bar }) => bar,
        },
    },
};

const Component = ({ foo }) => {

    const bar = 4;
    const { content } = useStyles({ foo, bar  });

...

One caveat though: classes are not inferred when passing the generic type "argument" (here <{ foo: boolean, bar: number }>), which means if you do const { nonExistingClass } = useStyles({ foo, bar }); tsc will not complain.

If you do not pass the generic type argument (ex if you do not use functional CSS properties in your style object) then classes are correctly inferred and you will get the error.