Handle CSS pseudoclasses

[dillonkearns]

I believe elm-tailwind-modules uses elm-css functions for the pseudo classes listed here: https://github.com/matheus23/elm-tailwind-modules/blob/cd5809505934ff72c9b54fd1e181f67b53af8186/src/helpers.ts#L11-L14.

Right now, anything that looks like a breakpoint, like lg:px-2, is turned into a breakpoint helper.

Example:

It currently turns this HTML

<div class="hover:bg-red-700"></div>

Into this Elm:

div [ css [ Bp.hover [ Tw.bg_red_700 ] ] ] []

But it should instead generate:

div [ css [ Css.hover [ Tw.bg_red_700 ] ] ] []

[matheus23]

There's some difficulty in the translation of pseudo-classes in this tool.

1. Usually, you'd want to group pseudo selectors. So

   Turn this

   <div class="bg-gray-100 hover:bg-gray-900 hover:border-gray-800">

   Into this

   div
      [ css
          [ Css.hover
              [ Tw.border_gray_800
              , Tw.bg_gray_900
              ]
          , Tw.bg_gray_100
          ]
      ]
   []

2. You need to handle breakpoints and pseudo classes at the same time

   So, turn this:

   <div class="bg-gray-100 lg:bg-white lg:hover:bg-gray-100">

   Into this:

   div
      [ css
          [ Bp.lg
              [ Css.hover [ Tw.bg_gray_100 ]
              , Tw.bg_white
              ]
          , Tw.bg_gray_100
          ]
      ]
      []

[dillonkearns]

Ah yes, good point I hadn't considered 2. I'm actually handling the grouping (1) already by grouping things in a Dict.

https://github.com/dillonkearns/html-to-elm-tailwind-modules/blob/d2d0781af062681499f348a0616e38cf262e18e7/src/HtmlToTailwind.elm#L71-L77

So I'll just need to handle pseudo classes as well as pseudo classes nested under breakpoints now 👍

[dillonkearns]

This is now working, including nested pseudoclasses under breakpoints 🙌 🎉