Regression in extracting classes from symbol list in Clojure

[RobinMalfait]

What version of Tailwind CSS are you using?

For example: v4.1.12

Reproduction URL

#18345 (comment)

Describe your issue

We introduced a regression while fixing another Clojure issue in the Oxide candidate extractor that was released in v4.1.12. Extracting classes from a symbol list doesn't work as expected anymore.

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

See:

• Fix trailing ) from interfering with extraction in Clojure keywords #18345 (comment)
• Fix trailing ) from interfering with extraction in Clojure keywords #18345 (comment)

[RobinMalfait]

Hey @yannvanhalewyn

I'm working on a fix for this and created this new issue to track everything. I have a question related to this snippet:

(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))}]

Is the 'textarea considered a class or how should I interpret this? Currently I'm handling everything in '[…] but not sure about just 'textarea 🤔

Even after reading this part of the docs, I'm not even sure if you would consider this a spot where a Tailwind class could exist:

Quoting is used to indicate that the next form should be read but not evaluated

— https://clojure.org/guides/weird_characters#_quote

[RobinMalfait]

Ok I think this is just a shorthand for a string with essentially 1 word in it, I think?

(print 'foo)

Is equivalent to

(print "foo")

[RobinMalfait]

Alright so this should be fixed now. I believe the 'foo is working as expected now. But more than happy to adjust it more if I have this all wrong /cc @yannvanhalewyn

[yannvanhalewyn]

Hi @RobinMalfait, thanks so much for picking this up so quickly!

Is the 'textarea considered a class or how should I interpret this?

Yes the 'textarea in the example represented a (non tailwind) class .textarea. Overall, Hiccup transforms Clojure 'symbols (and "strings" and :keywords) into HTML classes.

Even after reading this part of the docs, I'm not even sure if you would consider this a spot where a Tailwind class could exist:

A quoted list in Clojure indeed does not execute the list but instead evaluates into a list containing the literal elements. In this case they're symbols which can be turned into classes by Hiccup. A 'quoted-word like 'textarea is a symbol also.

Here's an example for completeness:

(str
  (hiccup2.core/html
    [:h1 {:class '(foo bar)}
     "hello"])) 
;; => "<h1 class=\"foo bar\">hello</h1>"

Ok I think this is just a shorthand for a string with essentially 1 word in it, I think?

These evaluate to different types:

(type "foo") ;; => java.lang.String
(type 'foo)  ;; => clojure.lang.Symbol

Alright so this should be fixed now. I believe the 'foo is working as expected now. But more than happy to adjust it more

Great thanks so much! Would you like me to test it out? If so how should I do so?

[RobinMalfait]

@yannvanhalewyn Thanks for your additional clarifications! With that info I think I got everything related to the ' (as far as I can tell).

To test this, you can install the insiders version, depending on which client tool you are using:

• npm install @tailwindcss/vite@insiders
• npm install @tailwindcss/cli@insiders
• npm install @tailwindcss/postcss@insiders

However, I might have a suspicion that you might be using the standalone CLI which we unfortunately don't ship for insider builds.

If you happen to have node installed, you could use npx @tailwindcss/cli@insiders instead of the path to the standalone CLI which should do the trick as well.

[yannvanhalewyn]

@RobinMalfait perfect, confirmed that v0.0.0-insiders.77b3cb5 works on all these cases 👍

I diffed the output on our codebase against v4.1.11. It contained no regressions, even some improvements: a few classes missed by v11 are now extracted, other classes in comments only are now even skipped.

Thank you! And greetings from Brussels 🙂