> It's not the same as inline styles because it expresses things that inline styles fundamentally cannot. Inline styles don't have media queries or selectors.
Okay, it's as if you added media queries and selectors to inline styles. It's still a nightmare to read like inline styles. It's terse, but as a result it's also more cryptic. It leads to long strings of near gibberish until you carefully read it out.
> WTF? Is any other HTML class string typesafe?
My point is a className string is not typesafe, my styles are fully typed, because it's normal TypeScript. Shoving styles into a string would remove that feature.
I get autocomplete and type checking for the component styles, for example, if it's a view component then it only gets view styles, trying to apply "color" will result in a error.
It's incredibly useful to have autocomplete and type checking for your styles because there are so many combinations of properties. You don't want to supply a number when a string is expected for a font weight, you don't want to supply a value that isn't supported, you don't want to apply a text property that will have no effect on a view element.
Okay, it's as if you added media queries and selectors to inline styles. It's still a nightmare to read like inline styles. It's terse, but as a result it's also more cryptic. It leads to long strings of near gibberish until you carefully read it out.
> WTF? Is any other HTML class string typesafe?
My point is a className string is not typesafe, my styles are fully typed, because it's normal TypeScript. Shoving styles into a string would remove that feature.
I get autocomplete and type checking for the component styles, for example, if it's a view component then it only gets view styles, trying to apply "color" will result in a error.
It's incredibly useful to have autocomplete and type checking for your styles because there are so many combinations of properties. You don't want to supply a number when a string is expected for a font weight, you don't want to supply a value that isn't supported, you don't want to apply a text property that will have no effect on a view element.
Example: https://codesandbox.io/s/dazzling-leaf-rjv7v?file=/src/app/u...