green-labs/res_tailwindcss

ReScript PPX which validates the tailwindcss class names

ReScript Tailwindcss

A ReScript PPX, which validates the tailwindcss class names

Motivation

The tailwind-ppx is the only ppx to validate the tailwindcss class names in compile time. But, it was archived, and written by ocaml-migrate-parsetree. My team considered taking over the repository and maintaining it but decided to rewrite it from the scratch with ppxlib and menhir. Additionally, we improve the logic to find the invalid class name with Spelling Corrector algorithm.

Plus, the arbitrary values in the JIT mode of Tailwindcss are supported!

<!-- arbitrary value examples -->
<div className=%twc("p-[75px]")> ... </div>
<div className=%twc("p-[calc(75px)]")> ... </div>
<div className=%twc("p-[calc(100%-40px)]")> ... </div>
<div className=%twc("bg-[#1da1f1]")> ... </div>
<div className=%twc("grid-cols-[1fr,700px,2fr]")> ... </div>
<div className=%twc("translate-x-[calc(-50%+27px)]")> ... </div>
<div className=%twc("!pb-[270px]")> ... </div>
<div className=%twc("after:content-['Hello_World']")> ... </div>
<div className=%twc("peer-checked:[&>svg]:rotate-180")> ... </div>

Install

yarn add -D @greenlabs/res-tailwindcss

<path_to_tailwindcss> should be replaced with the relative location of your generated tailwindcss file from your project root in which the bsconfig.json file is located.

// bsconfig.json

"ppx-flags": [
  ...,
  ["@greenlabs/res-tailwindcss/ppx", "--path <path_to_tailwindcss>"]
],

Example

<input type_="checkbox" className=%twc("peer") />
<div className=%twc("flex justify-center items-center after:content-['Hello_World'] peer-checked:[&>svg]:rotate-180")>
  ...
  <svg />
</div>

Development

1. Create a sandbox with opam

opam switch create tailwindcss 4.12.1

2. Install dependencies

opam install . --deps-only --with-test

3. Build

opam exec -- dune build

4. Test

cd rescript

(install dependencies)
yarn

(build --watch)
yarn res:clean && yarn res:watch

(run test --watch)
yarn test:watch

res_tailwindcss's Issues

update README

Using command line arg instead of config file

Having a command line arg to get a tailwind CSS file path instead of making the redundant config file.

// bsconfig.json
"ppx-flags": [
  ...,
  ["@greenlabs/ppx-tailwindcss/ppx", "--path <path_to_tailwindcss>"]
]

improve the parser

• more complicated than I thought regarding pseudo-classes, pseudo-elements, attribute-selectors
• also needs to distinguish to the tailwindcss arbitrary values against attribute-selectors
• currently, manipulating the string after parsed to get rid of pseudo-*, attribute-selectors 🙅

What to do

• parse the pseudo-*, attribute-selectors, arbitrary values instead of manipulating string after parsed.

Issue with Underscore Arbitrary Modifier in Tailwind CSS

I'm encountering an issue when trying to use the underscore arbitrary modifier to style the descending a of a div. Below is the code I'm using:

<div
  className={cx([
     %twc(
          "tw-overflow-hidden tw-transition-[padding-top] tw-ease-out tw-duration-[400ms] [&_a]:tw-mt-4"
      ),
      switch state {
      | true => %twc("tw-p-20")
      | false => %twc("tw-max-h-0")
      },
   ])}

However, it results in the following error:

 104 ┆ className={cx([
  105 ┆   %twc(
  106 ┆     "tw-overflow-hidden tw-transition-[padding-top] tw-ease-out tw-dur
      ┆ ation-[400ms] [&_a]:tw-mt-4"
  107 ┆   ),

  Class name not found: [&_a]:tw-mt-4

FAILED: cannot make progress due to previous errors.
>>>> Finish compiling(exit: 1)

Steps to Reproduce:

1. Add the above code to a res component. (remove the prefix tw- if not configured)
2. Ensure Tailwind CSS watcher is running to build the new classes.
3. Observe the error message during compilation.

Additional Information:

• Tailwind CSS reference: Tailwind CSS Documentation
• Other selectors like > are working as expected.
• Manually modifying the .bs.js output file with the underscore modifier works as expected.
• It appears the issue might be with the ppx not recognizing this modifier.

Any assistance or guidance on how to resolve this issue would be greatly appreciated. Thank you!

Prevent string with delimiter as payload

Align to the changes of ReScript compiler V10

issue when continuous space input between class names.

ex

%twc("fixed  w-full")

If there are two spaces between the class names, an error occurs that the class cannot be found.
It's an issue caused by a typo, but if you look at the error message, the user will try to find the problem in the wrong build of the tailwind.

Detach ppxlib

Remove the dependency to ppxlib

improve parser

Class of string option -> Class of string list

ci on windows

prepare to publish

• Build and publish github actions
• Publish to npm
• Publish to opam

fix to find the project root correctly in OCaml project

Currently, find_project_root func is working to find the project root with the location of bsconfig.json. It doesn't make sense in the OCaml project. It should be fixed to find *.opam, dune-project, or dune-workspace instead.

Class sorting

Are there plans to implement automatic sorting of classes, based on the convention followed by tw’s own prettier plugin?

add feature to find the closest missing class name

make docs with odoc

*.mli needed

Read stanza reference for usage in OCaml project

Regarding the usage in the OCaml project. It needs to know where the tailwind CSS file is. (In the ReScript project, the path of the tailwind CSS file is passed in command line args.)

In the OCaml project, the best way is getting the path from dune file as inline_tests ppx does such as below.

(library
 (res_tailwindcss
  (deps
   "src/styles/tailwind.css"))
 (name example)
 (public_name example)
 (libraries core str)
 (preprocess
  (pps res_tailwindcss)))