green-labs / res_tailwindcss Goto Github PK

Class of string option -> Class of string list

Align to the changes of ReScript compiler V10

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!

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

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.

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

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

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

*.mli needed

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.

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

Remove the dependency to ppxlib