Property order is different in output CSS, renders incorrectly in browser about garden

[Jarzka]

I solved this by using sorted-map.

[aisamu]

There's also ordered-map https://github.com/clj-commons/ordered, which stores things as they're inserted.

Also note that you can use multiple maps, per #67

[noprompt]

FYI you can also use more maps if the order of properties is relevant:

(garden.core/css
 [:body
  {:font-family "open_sans, Verdana, Helvetica, sans-serif"
   :color "#121212"}
  {:background "black url('/images/background2.jpg')"}
  {:background-repeat "no-repeat"}
  {:background-position "center"}
  {:background-attachment "fixed"}
  {:background-size "cover"}
  {:margin 0
   :padding 0}])

Compiles to

body {
  font-family: open_sans, Verdana, Helvetica, sans-serif;
  color: #121212;
  background: black url('/images/background2.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  margin: 0;
  padding: 0;
}

This used to be documented in the README but then all the stuff was moved from the README to the Wiki and then only partially back to the README. 🙄

[harold]

Interesting! Never thought about this (Clojure map keys are unordered, so this makes sense)

In this case sorted-map helps because alphabetical order happens to work. 😄

[Jarzka]

Yes, in this case it works. However, if at some point I would need to define property order fully manually, this might be a bit problematic.

[Jarzka]

Would it be possible to define style map as a vector in that case? Or... maybe the different order of properties causing problems is so rare that there is no need to add syntax support for defining properties in a vector. One can also use sorted-map-by to solve this.

[Jarzka]

I also noticed that this is probably a problem only when using shorthands, as:

As with all shorthand properties, any omitted sub-values will be set to their initial value.

So, if I use background-color and background-image instead of background, the order does not matter.