Add `DISPLAY_NAME` tag to styles

[Blake Embrey]

This would make it easier for CSS utilities to export objects and include a human readable name at the same time in development.

[Blake Embrey]

cc @basarat Does this help anything in typestyle? Is it an issue you've noticed at all? For my own uses it's mostly to improve utility libraries that export object that typically do a single style.

[Basarat Ali Syed]

Add DISPLAY_NAME tag to styles

Are you are suggesting <style DISPLAY_NAME>stylesfromfreestyle</style>? Probably not, sorry if its something obvious ❤️

PS: I miss working with you (I've been a bit OSS absent compared to what I used to be) 🌹

[Blake Embrey]

My bad, I should have provided an example. Everywhere I have a second argument for displayName today (for https://github.com/blakeembrey/free-style#debug) would also allow the styles themselves to have a name on the object instead. E.g.

freeStyle.registerStyle({ alignSelf: 'center', [DISPLAY_NAME]: 'alignSelfCenter' })

Running into this being a nice to have with a UI I've been building based on Tachyons/Tailwind CSS which is a lot of small utility classes. If it's not helpful, I'll probably put it into react-free-style instead of core.

[Blake Embrey]

PS: I miss working with you (I've been a bit OSS absent compared to what I used to be) 🌹

I've been largely offline since Typings was deprecated so it's no big deal. I really want to get back into doing some interesting OSS work again though. But this time I should write more blog posts alongside what I'm playing around with 😄

Maybe we can chat some time? I'd love to hear about what you're interested in working on and what you're up to nowadays.

[Basarat Ali Syed]

If it's not helpful, I'll probably put it into react-free-style instead of core.

Not helpful (nor disruptive). TypeStyle uses $debugName on the object already https://typestyle.github.io/#/advanced/-debugname i.e. your example becomes

style({ alignSelf: 'center', $debugName: 'alignSelfCenter' });

(Sidenote: $ is not going to be a part of a valid css prop name so its safe there, however if CSS gets new syntax features it might be an issue, but I don't see it going there soon)

Its done in the style function internally : https://github.com/typestyle/typestyle/blob/b04a126d341875d65d7a9d9cfbe515c473a3b3ef/src/internal/typestyle.ts#L206 ,

If you add this feature to FreeStyle, I would have to move some code to follow what we already do for FreeStyle.IS_UNIQUE so no biggie. Do whatever is easy for you 🌹 : https://github.com/typestyle/typestyle/blob/0f49c3e1eeb233282ec688498148cafeb45e00b7/src/internal/formatting.ts#L24

[Blake Embrey]

If you add this feature to FreeStyle, I would have to move some code to follow what we already do

Definitely not making a break change, so you don't need to move anything 😄 This would be additive.

[Blake Embrey]

Mostly was curious if this is a helpful pattern to add into core, but I think the existing availability of $debugName may answer this as "yes".

[Basarat Ali Syed]

Agree. Yes. And thank you 🙏🏻 🌹❤️

[Blake Embrey]

Released with https://github.com/blakeembrey/free-style/releases/tag/v2.7.0 (commit abd4e1d). Unfortunately this added around 20 bytes overhead but I worked on shaving it off elsewhere and it appears min zipped size overall went down as a result 🎉

[Blake Embrey]

@basarat Ended up releasing a version with $unique and $displayName, and automatic support for process.env.NODE_ENV as https://github.com/blakeembrey/free-style/releases/tag/v3.0.0. It's definitely a major breaking change but found locally using size-limit that it reduced bundle size by 0.7kB (BundlePhobia shows a 0.2kB saving).

Edit: I may enjoy trying to optimize the package size a bit too much. This will be the last change for at least another year now since it ended up being pretty big (mainly because of killing displayName as an optional property) 😄