4 ms·

Brings TypeScript to Tailwind CSS

7 points by dvkndn3 7y ago

huydotnet 7y ago
Wow, interesting. Could you please share more insights about why and how did you implemented this? What is the most challenging problem you got? And why would you think a typed system over a CSS framework is a good idea?
- dvkndn3 7y ago
  I really enjoy the static typing TypeScript brings to JS, and it always annoys me that I can't have the same in CSS. When Tailwind makes utilities-first CSS great again, I see that's when I can fill the missing piece and finally bring types to CSS! The core functionality is not really hard, thank to PostCSS. The most challenging problem is to decide whether to go with run time or compile time implementation. I chose run time first because I think: - It's easier to prove the idea to others (can even make a website to do so: typed.tw) - It's easier to try (you can throw it into most existing build system) But at the end of the day compile time is still better so I'm actually working on a webpack loader right now.
- dvkndn3 7y ago
  > And why would you think a typed system over a CSS framework is a good idea? It's not just any CSS framework, but only utilities-based ones. In my opinion, CSS should not be complicated. They should only be tools to decorate things, like some kind of a library, not a programming language. That's "library" part is when I think a typed system could shine, because styles are now just a list of fixed, primitive values.
huydotnet 7y ago
By the way, what the hell is the $() thing? Why would we need that?
- dvkndn3 7y ago
  There are many reasons actually: First is because I don't want to return a string as soon as you apply a value like "textRed()", because it prevents chaining, or I need to add those methods to the String prototype (right?). Therefore, when you call "textRed()", it just updates the current instance. Second is that I actually wanted to use `[Symbol.toPrimitive]`, because it allows keeping the instance but still returns a string when expected (e.g. inside a `className` prop). However, TypeScript hasn't have good support for it yet (https://github.com/microsoft/TypeScript/issues/4538 https://github.com/microsoft/TypeScript/issues/4538) so we still need an explicit method to convert the instance to string.
  - huydotnet 7y ago
    Does $() a semantics requirement from TS/JS? Any chance for a better/meaningful name?
    - WorldMaker 7y ago
      $ is just an ordinary JS name. It almost, sort of makes sense here in the builder because $ is also the Regex symbol for "end of string". But other names could be possible, they just likely won't be as short to be meaningful. (`buildString()` or `toClassnames()` are two common forms of names I've seen in these sorts of "fluent" APIs for finalizers/builders.)
      - dvkndn3 7y ago
        `toString()` actually works here :D

7 points by dvkndn3 7y ago

Wow, interesting. Could you please share more insights about why and how did you implemented this? What is the most challenging problem you got? And why would you think a typed system over a CSS framework is a good idea?

dvkndn3 7y ago
I really enjoy the static typing TypeScript brings to JS, and it always annoys me that I can't have the same in CSS. When Tailwind makes utilities-first CSS great again, I see that's when I can fill the missing piece and finally bring types to CSS! The core functionality is not really hard, thank to PostCSS. The most challenging problem is to decide whether to go with run time or compile time implementation. I chose run time first because I think: - It's easier to prove the idea to others (can even make a website to do so: typed.tw) - It's easier to try (you can throw it into most existing build system) But at the end of the day compile time is still better so I'm actually working on a webpack loader right now.
dvkndn3 7y ago
> And why would you think a typed system over a CSS framework is a good idea? It's not just any CSS framework, but only utilities-based ones. In my opinion, CSS should not be complicated. They should only be tools to decorate things, like some kind of a library, not a programming language. That's "library" part is when I think a typed system could shine, because styles are now just a list of fixed, primitive values.

huydotnet 7y ago

By the way, what the hell is the $() thing? Why would we need that?

dvkndn3 7y ago
There are many reasons actually: First is because I don't want to return a string as soon as you apply a value like "textRed()", because it prevents chaining, or I need to add those methods to the String prototype (right?). Therefore, when you call "textRed()", it just updates the current instance. Second is that I actually wanted to use `[Symbol.toPrimitive]`, because it allows keeping the instance but still returns a string when expected (e.g. inside a `className` prop). However, TypeScript hasn't have good support for it yet (https://github.com/microsoft/TypeScript/issues/4538 https://github.com/microsoft/TypeScript/issues/4538) so we still need an explicit method to convert the instance to string.
- huydotnet 7y ago
  Does $() a semantics requirement from TS/JS? Any chance for a better/meaningful name?
  - WorldMaker 7y ago
    $ is just an ordinary JS name. It almost, sort of makes sense here in the builder because $ is also the Regex symbol for "end of string". But other names could be possible, they just likely won't be as short to be meaningful. (`buildString()` or `toClassnames()` are two common forms of names I've seen in these sorts of "fluent" APIs for finalizers/builders.)
    - dvkndn3 7y ago
      `toString()` actually works here :D