@eneroth Can you see if the checkbox to allow maintainers to edit the PR is checked? I've got a few tweaks I want to make.

Also could use a changelog entry

Sorry @thecrypticace, from what I can see on Github docs, there's supposed to be a checkbox for me to check here:

But I can't see any. In lieu of that, rebased on main and amended with your changes, and added a change log entry.

Huh that's super weird. I wonder why it's missing. Thanks for making the changes!

Ah weird | b'#' being gone makes the tests fail. I guess we can keep it in for the time being then. 🤔

edit: I know why. It's a bit annoying. We need to read whole keywords then split them into utilities. I wonder if this means we need an expanded character set no matter what.

Can do that as a followup bug fix if we turn out to need that.

I'm gonna go head and merge this so I can get it in. Will fix the failing # test in a followup commit.

@thecrypticace Ah yeah, because of the syntax <elem>#<id>.<class-1>.<class-2>…<class-n>. This is unfortunately a requirement for Clojure for the Hiccup DSL to work.

Yeah, it makes sense. We just can't be quite as selective about certain characters during the pre-processing stage which is fine.

Ironically in v4.1.12 extraction of classes in symbol lists were broken. I'm not 💯 sure it's due to this PR but something to keep in mind.

[:div {:class '[class-1 class-2
                class-3 class-4]}]

@yannvanhalewyn Goodness, I wasn't even aware that classes as symbols were a thing, sorry if that was due to my intervention.

Doesn't symbols in that manner make conditional logic etc. tricky?

@eneroth no worries it happens :). We've pinned back to 4.1.11 until this works again.

It composes pretty well for conditional logic:

(def hl-class-names '[ring ring-blue-500])

[:div
 {:class (cond-> '[input w-full]
           textarea? (conj 'textarea)
           (seq errors) (concat '[border-red-500 bg-red-100])
           highlight? (concat hl-class-names))}]

Another benefit is it allows splitting long classlists over multiple lines, and introducing logical grouping:

[:div
 {:class '[h-100 lg:h-200 max-w-32 mx-auto py-60
           flex flex-col justify-end items-center
           lg:flex-row lg:justify-between
           bg-cover bg-center bg-no-repeat rounded-3xl overflow-hidden
           font-semibold text-gray-900]}]

Note: slashes make them invalid tokens, those need to be explicit strings: '[p-32 "text-black/50"]