
Brings TypeScript to Tailwind CSS - dvkndn3
https://github.com/dvkndn/typed-tailwind
======
huydotnet
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
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.

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

~~~
dvkndn3
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
Does $() a semantics requirement from TS/JS? Any chance for a
better/meaningful name?

~~~
WorldMaker
$ 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
`toString()` actually works here :D

