search

dylanirlbeck / tailwind-ppx

A Reason/OCaml Pre-Processor eXtension (PPX) that validates your Tailwind classes at compile-time.
MIT License
152 stars 15 forks source link

Returning CSS as object to use with React's style prop (feature request) #134

Open d4h0 opened 3 years ago

d4h0 commented 3 years ago

Hi,

would it be possible to add a second PPX that – instead of returning class names – returns an object in the format that React's style prop accepts?

Using style wouldn't just be a bit shorter than className but also eliminate the need for PurgeCSS (I believe). Additionally, this might make it possible to extend styles of other CSS-in-JS libraries with tailwind-ppx, which would be fantastic :)

As name – if tw can't be re-used – I propose twi ("TailWind Inlined").

dylanirlbeck commented 3 years ago

Hey @d4h0, sorry for the massive delay on this. Can you give me an example of what this new PPX would look like? My current understanding of Tailwind CSS is that it necessarily must be used with the className prop, so if you could help me understand how one would use the style prop I can have a more fruitful discussion with you.

Thanks!

d4h0 commented 3 years ago

Basically, I'm proposing something like twin.macro for Reason.

This means, this PPX would need to parse the CSS file into a structure that returns the CSS of a class as "CSS-in-JS" / "CSS-in-ReasonML".

This "CSS-in-JS" then could be passed to the style prop.

Ideally this also would be compatible with other "CSS-in-JS" libraries for Reason.

Does this make sense now?

dylanirlbeck commented 3 years ago

I think I understand you a bit more now -- the difficulty is that I, perhaps surprisingly, have never used CSS-in-JS.

I want to understand the value of including such a feature inside tailwind-ppx, rather than creating a separate PPX entirely. From my limited PPX development, I believe it'd be possible to re-use the same tw syntax for the PPX, but pass in a different data structure that is not a string literal inside the [%tw ...].

In short, you would want to PPX to validate the tailwind CSS inside and return an object that React's style prop expects? You mentioned that this feature should be compatible with other "CSS-in-JS" libraries -- can you give me some examples?

One more thing: If you could comment a code snippet with this hypothetical feature in action, it would help me better understand where you're coming from.

Maybe unrelated, but do take a look at styled-ppx to see if that might help.

d4h0 commented 3 years ago

I want to understand the value of including such a feature inside tailwind-ppx, rather than creating a separate PPX entirely.

The value mostly would be that this functionality is available from one package, and I guess it would be a bit easier to develop (some code/setup could be shared).

it'd be possible to re-use the same tw syntax for the PPX, but pass in a different data structure that is not a string literal inside the [%tw ...]. In short, you would want to PPX to validate the tailwind CSS inside and return an object that React's style prop expects?

I think I didn't explain the use case good enough... 😅

Let's say, we have the following code:

<Component style=[%twi "flex flex-row"] />

[%twi "flex flex-row"] would return something like {display: "flex", flexDirection: "row"} (I'm not 100% sure if that's the correct format for the style property).

Because most CSS-in-JS-solutions support dynamic styles / interpolation / composition, the output of [%twi "flex flex-row"] could be (hopefully easily) integrated with them.

In JavaScript some CSS-in-JS libs support to directly "embed" an object similar to what [%twi "flex flex-row"] would return (this page has an example at the bottom). CSS-in-ReScript libs, however, maybe would need some glue code.