Closed cvle closed 5 years ago
I thought you are working on types for jss api, but you are working on it for the json dsl as well?
I might have misinterpret the other issue. I'm focusing on the API.
exactly!
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.
My thought was keeping this, so that:
Anyway I will ping you when they are ready to be discussed.
Ok, then reopening.
Is there any progress on this?
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
}
}),
}
@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?
It has to go over public interfaces, no special fn calls. In JSS core it is jss.createStyleSheet(), jss.createRule(), sheet.addRule(), sheet.addRules()
@Valbrand well, for plugins, we can do:
const style: JSSStyleCore & JSSStylePlugin1 & JSSStylePlugin2 = {
...
}
@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. :)
closing in favor of https://github.com/cssinjs/jss/issues/776
I'm already working on it. This can be assigned to me.