Adding a script to integrate tailwind-ppx into codebase

dylanirlbeck commented 4 years ago

Fixes #81

This script would transform every existing instance (in a .re file) of className="..." into className=[%tw "..."] by calling ./node_modules/@dylanirlbeck/tailwind-ppx/use_ppx.exe.

I should making the path to the script easier to execute, but this might not be necessary.

TODO

[x] Corresponding README update with instructions, stress need for a root bsconfig.json (with a note that script could wrongly execute if bsconfig is found earlier than project root)
[x] ~Investigate adding CLI parameters like --files **/glob~ (just doing all .re files)
[x] Reconsider file structure and naming conventions of folders/modules/etc
[x] Add a test (or two)

tatchi commented 4 years ago

Nice addition! :)

From my understanding, all classnames are being wrapped in [%tw "..."]. That's probably too aggressive, what about other classnames (not from tailwind)? Let's say that one has created a classname .custom_classname and uses it alongside tailwind classnames:

<div className="custom_classname flex flex-col items-center" />

It gets transformed to:

className=[%tw "custom_classname flex flex-col items-center"]>

Which is wrong and will produce an error since the ppx will then detect that custom_classname is not a valid tailwind class.

Since we are already able to extract class names from the tailwindcss file, I think we should only transform these classes. So the example above should become something similar to:

className={"custom_classname " ++ [%tw "flex flex-col items-center"]}>

github-actions[bot] commented 4 years ago

I have updated your lock dirs and formatted the code. Please @dylanirlbeck pull the last commit before pushing any more changes.

dylanirlbeck / tailwind-ppx

Adding a script to integrate tailwind-ppx into codebase #83

TODO