Jss: Typescript type definitions for the API

[cvle]

I'm already working on it. This can be assigned to me.

[kof]

I thought you are working on types for jss api, but you are working on it for the json dsl as well?

[cvle]

I might have misinterpret the other issue. I'm focusing on the API.

[kof]

exactly!

[kof]

Ping me when typescript annotations are usable, I will make an announcement on twitter! Closing this issue as I don't see why we need it.

[cvle]

My thought was keeping this, so that:

• the community can see that we are working on it
• can track the progress

Anyway I will ping you when they are ready to be discussed.

[kof]

Ok, then reopening.

[Truedrog]

Is there any progress on this?

[devdoomari]

I'm not sure how we can coax typescript to check JSS's current JSON-format.
How about having 'extra-helper' methods for creating JSON format?

e.g.

const styles = {
  button: {
    fontSize: 12,
    '&:hover': {
      background: 'blue'
    }
  },
  ctaButton: {
    extend: 'button',
    '&:hover': {
      background: color('blue').darken(0.3).hex()
    }
  },
  '@media (min-width: 1024px)': {
    button: {
      width: 200
    }
  }
}

would be:

const styles: JSSStyle = {
  button: Style({
    fontSize: 12,
    on(JSSEvents.HOVER): Style({
      background: 'blue'
    })
  }),
  ctaButton: Style({
    extend: 'button',
    on(JSSEvents.HOVER): Style({
      background: color('blue').darken(0.3).hex()
    }),
  }),
  forScreens({ minWidth: 1024 }): Style({
    button: {
      width: 200
    }
  }),
}

[Valbrand]

@devdoomari I understand the reason behind what you've proposed, but I also think it hurts what's beautiful about JSS. The signal-noise ratio is too low IMO, although I can't think of any better solution from the top of my head. I think some type definitions may not even be possible, since plugins may define what's allowed and what's not. Am I right?

[kof]

It has to go over public interfaces, no special fn calls. In JSS core it is jss.createStyleSheet(), jss.createRule(), sheet.addRule(), sheet.addRules()

[devdoomari]

@Valbrand
well, for plugins, we can do:

const style: JSSStyleCore & JSSStylePlugin1 & JSSStylePlugin2 = {
    ...
}

[vyrotek]

@devdoomari If I understood you right you're talking about using TypeScript Intersection Types like in this TSX React example? You'd basically just add & JSSStyleCore to CounterProps and now your props has styles typing on it. Sounds straightforward to me.

FWIW, I ended up here while looking for typings for jss since the latest React material-ui project is replacing their current style system with jss in their next version. I hope this effort can get some much needed attention. :)

[appsforartists]

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/21851

[kof]

closing in favor of https://github.com/cssinjs/jss/issues/776