search

lukejacksonn / oceanwind

Compiles tailwind shorthand into css at runtime. Succeeded by Twind.
https://twind.dev
264 stars 12 forks source link

Allow generating user readable classes during development #11

Open bebraw opened 3 years ago

bebraw commented 3 years ago

Instead of garbled class names, maybe it would be possible to generate something that's more useful during development? Maybe adding -'s between the class names would be enough.

It's possible this would have to be changed at Otion or somehow implemented on top of it.

lukejacksonn commented 3 years ago

It's funny you mention this! Only the other day @kripod (the creator of otion) was talking about this kind of thing for otion generally. I too have found myself looking at the DOM in dev tools and thinking that if the class names have to be there (which they do due to the nature of atomic css) then they could at least be descriptive.

It's a bit tricky though.. oceanwind just passes otion an CSS-in-JS object.. it has no knowledge of which directives generated that rule set. A reverse lookup of rules to directives is probably possible in some capacity. Not sure this is the smartest way to go about it though, it seems cumbersome.

One way might be to modify otion to accept something like:

otion({
  atomic: {
    'bg-red-500': { background: '#f56565' }
  }
})

Whereby it doesn't treat the children of atomic as CSS property:value pairs but rather as className:ruleset pairs and using the keys provided (instead of hashes) when appending the rules to the stylesheet.

I'm still unsure how beneficial this would be exactly so it might not be worth the effort. It sure is an interesting problem though!

bebraw commented 3 years ago

Yeah, it's starting to feel like we should push this issue upstream and we cannot solve it here. It's cool to hear he already thought about it. 😄