search

noprompt / garden

Generate CSS with Clojure
1.35k stars 90 forks source link

Incorrect handling of selectors #198

Closed wbehrens-on-gh closed 2 years ago

wbehrens-on-gh commented 2 years ago

The clojure expression

 (css [:.nav-button {:transition-duration "0.4s"}
       :.nav-button:hover {:background-color (map2rgba (:foreground colors))
                           :color (map2rgba (:background colors))}])

evaluates to

.nav-button {
  transition-duration: 0.4s;
  background-color: rgba(217, 208, 242, 100);
  color: rgba(66, 59, 89, 100);
}

rather than

.nav-button {
  transition-duration: 0.4s;
}
.nav-button:hover {
  background-color: rgba(217, 208, 242, 100);
  color: rgba(66, 59, 89, 100);
}
harold commented 2 years ago

Perhaps something like this?

> (println
   (garden.core/css [:.nav-button {:transition-duration "0.4s"}
                     :.nav-button:hover {:background-color :#222
                                         :color :#f8f8f8}]))
.nav-button {
  transition-duration: 0.4s;
  background-color: #222;
  color: #f8f8f8;
}

> (println
   (garden.core/css [:.nav-button {:transition-duration "0.4s"}
                     [:&:hover {:background-color :#222
                                :color :#f8f8f8}]]))
.nav-button {
  transition-duration: 0.4s;
}

.nav-button:hover {
  background-color: #222;
  color: #f8f8f8;
}