Jarzka / stylefy

Clojure(Script) library for styling user interface components with ease.
MIT License
317 stars 11 forks source link

Bug: How to use 3rd party classes in custom named classes? #52

Open MaskyS opened 3 years ago

MaskyS commented 3 years ago

Hi @Jarzka, thanks for creating stylefy! I've been trying it out and very impressed so far.

I was trying to throw in some 3rd party classes in a custom named class with stylefy, but I can't get it to work:

(stylefy/class "big-text"
               {:transition "background-color 1s"
                ::stylefy/with-classes ["p-4 text-center rounded-lg"]})
(defn simple-example []
  [:main
   [:h1.flex.space-x-2
    [:div.flex-1.bg-red-200.big-text  "hello"]
    [:div.flex-2.bg-green-200.big-text  "the"]]])

It does work when I just use 3rd party classes though. Can you help me figure out what I am/stylefy is doing wrong?

Jarzka commented 3 years ago

Hi

Unfortunately ::stylefy/with-classes is not supported in style map created via stylefy/class. It only works when a style map is used via stylefy/use-style. So in this case, you need to include p-4 text-center rounded-lg classes manually with big-text class

[:div.flex-1.bg-red-200.big-text.p-4.text-center.rounded-lg "hello"]

Or perhaps create a helper function which returns all these class names if they are commonly used together?