Incorrect Tailwind classes produced

[Andreas Pehnack]

When converting a TailwindUI module I noticed three problems.

The HTML
<button type="button" class="dark:md:bg-slate-800/75 dark:md:hover:bg-slate-700/40 dark:md:hover:ring-slate-500 [.dark[data-theme=system]_&amp;]:block [[data-theme=light]_&amp;]:block"></button>
produces

    button
        [ Attr.type_ "button"
        , css
            [ Tw.
            , Tw.
            , Bp.[.dark[data-theme=system]_&]
                [ Tw.block
                ]
            , Bp.[[data-theme=light]_&]
                [ Tw.block
                ]
            , Bp.dark
                [ Bp.dark
                    [ Tw.bg_slate_800over75
                    ]
                ]
            ]
        ]
        []

There are three issues:

• missing Tailwind classes
• Bp.dark twice instead of Bp.dark and Bp.md
• [[data-theme=light]_&] can't be processed to valid Elm code

[Andreas Pehnack]

Here's a case that produces invalid Elm code (found in https://tailwindui.com/components/marketing/sections/content-sections):
<div class="lg:[overflow-anchor:none]"/>
results in

    div
        [ css
            [ Bp.lg
                [ Bp.lg
                    [ Tw.none]
                    ]
                ]
            ]
        ]
        []

[Dillon Kearns]

Hey @synalysis, thanks for reporting the issue. I've been pairing with @matheus23 on some changes to make elm-tailwind-modules more Tailwind V3-friendly (matheus23/elm-tailwind-modules#16).

That will make the API generate a module for the color and opacity theme. That will change the generated code here. I'll have to update this codebase to support generating code for that new design (parameterized color and opacity values). I thin that will be a good opportunity to also add in support for generating Tailwind V3-style arbitrary values (this is a new tailwind feature).

[Andreas Pehnack]

Hey @synalysis, thanks for reporting the issue. I've been pairing with @matheus23 on some changes to make elm-tailwind-modules more Tailwind V3-friendly (matheus23/elm-tailwind-modules#16).

That will make the API generate a module for the color and opacity theme. That will change the generated code here. I'll have to update this codebase to support generating code for that new design (parameterized color and opacity values). I thin that will be a good opportunity to also add in support for generating Tailwind V3-style arbitrary values (this is a new tailwind feature).

Great, just wanted to provide you some potential input for unit tests...

[Andreas Pehnack]

Here's a case with the most recent version:
<div class="space-x-12"/>
is transformed to

    div
        [ css
            [ Tw.space_color Theme.x_12
            ]
        ]
        []    

However, there's no such thing as a space_color.

Here the "auto" attribute is transformed incorrectly:
<img class="h-8" src="x.svg" alt="" width="auto"/>

  img
        [ css
            [ Tw.h_8
            ]
        , Attr.src "x.svg"
        , Attr.alt ""
        , Attr.width auto
        ]
        []