Support typings for jss-plugin-nested

Is your feature request related to a problem? Please describe.

jss.createStyleSheet({
 foo: {
  "&:hover": {
    background: "blue"
  },
 }
});

this code can’t pass type check.

Describe the solution you’d like https://github.com/cssinjs/jss/issues/795 I’d thought the first item in this issue(Add typings to the extend plugin and preset default) is about the typings for plugin-nested, but I checked the v10.0.0-alpha.10 and it seems not. Is there any reason that the typings for nested rule is not included in the next release?

Are you willing to implement it? Yes

[worudso]

@HenriBeck I think the current type definition is little helpful. It passes type checkings for any style with any possible plugin, but at the same time, it can’t autocomplete any property at all.

The first problem is that this type-definitions doesn’t support function values, observables (though they are not that often used), expandable values, array values.

I don’t know about function values, observables well. But array value, maybe it’s something like

const styles = {
  container: {
    transition: [['opacity', '200ms'], ['width', '300ms']]
  }
}

Is this what you mean? Then I think it can be solved by just introducing JssValue.

export type JssValue =
  | string
  | number
  | Array<string | number | Array<string | number> | '!important'>
  | null
  | false;
export type Style = { [key: string]: Style | JssValue } | CSSProperties

It’s just a draft. I didn’t check it worked, But I’m willing to make it better. I think that JssValue should contain every type vanilla jss allows e.g, function, array.

So ideally the type would only allow nested rules when you have the nested plugin installed, though this isn’t possible because the plugins are applied at runtime.

I totally agree with you. But, how about making Style generic variable? Honestly, I think it’s the only option we have.

jss.createStyleSheet<NestedStyle>({
  // ...
})

Of course, we can offer default Style for vanilla js.

And as far as I know, Observable is plugin-supported just like nested style which I’m asking. But I found they are defined in vanilla jss.

import { ObservableProperties } from "jss/css";

export type CSSProperties =
	& ObservableProperties<csstype.Properties<Length>>
	& ObservableProperties<csstype.PropertiesHyphen<Length>>;

Why isn’t there typing for plugin-nested? It seems just a simple inconsistency. If putting every type into vanilla js is hard(I think you considered it not only hard but also wrong, and I agree with you), then seperating into each plugin would be better.

[HenriBeck]

Because the types are now inside jss, you should be able to remove @types/jss