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 #361 #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 #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?