styles typing (auto-completion, validation)

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

[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?

[xididri]

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.