green-labs / res_tailwindcss Goto Github PK

View Code? Open in Web Editor NEW

27.0 8.0 4.0 223 KB

ReScript PPX which validates the tailwindcss class names

License: MIT License

Shell 3.41% OCaml 81.84% Standard ML 1.70% JavaScript 12.29% Batchfile 0.75%

rescript ppx tailwindcss

res_tailwindcss's Introduction

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

Create a sandbox with opam

opam switch create tailwindcss 4.12.1

Install dependencies

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

Build

opam exec -- dune build

Test

cd rescript

(install dependencies)
yarn

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

(run test --watch)
yarn test:watch

res_tailwindcss's People

Contributors

Stargazers

Watchers

Forkers

kit-ty-kate mununki gyeop minuukang

res_tailwindcss's Issues

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.

add feature to find the closest missing class name

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)))

prepare to publish

Build and publish github actions
Publish to npm
Publish to opam

Prevent string with delimiter as payload

Align to the changes of ReScript compiler V10

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>"]
]

Detach ppxlib

Remove the dependency to ppxlib

improve parser

Class of string option -> Class of string list

ci on windows

make docs with odoc

*.mli needed

issue when continuous space input between class names.

%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.

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.

update README

Class sorting

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