CSS specificity and order of declaration

[knubie]

In some cases, the order of declaration matters, for example when applying :hover and :active pseudoselectors. Because an element can be in both a :hover and :active state at the same time, it's important to declare :active after :hover, so that it takes precedence. Cljss doesn't seem to take order of declaration into account, which can make it impossible to correctly apply certain pseudoselectors like the ones above on a single element.

[roman01la]

Happy to take a PR! I don't have time for this at the moment.

[MichaelStergianis]

I think the best way to go about this would be to add a new type of psuedo-selector to the syntax. As CSS supports cascading styles through order, and clojure maps do not guarantee their keywords will remain in the same order as definition. This leads us to a bit of a contradiction. This is what I propose.

(defstyles my-style []
  {:&:hover {#_"some style definition"}
   :&:active {#_"some other style"}
   :*:order [:&:hover :&:active]})

The idea being that anything you have added to the syntax is designated by a star instead of an ampersand.

Let me know what you think about the changes.

[knubie]

@MichaelStergianis Interesting proposal. I think if we take that approach it may make sense to use a "vendor prefix," something like

(defstyles my-style []
  {:&:hover {#_"some style definition"}
   :&:active {#_"some other style"}
   :-cljss-order [:&:hover :&:active]})

Another idea is to have defstyles and defstyled take a single map or a vector of styles:

(defstyles my-style []
  [{:font-size "12px"
    :color "black"}
   {:&:hover {#_"some style definition"}
   {:&:active {#_"some other style"}}])

This is similar to how Reactive Native works.