garden

aisamu 2019-02-26T05:08:59.004200Z

Hey! Is there a less-hacky way to achieve this?

.parent {
  color: red;
}
.parent > .child {
  margin: 0;
}
The best I could get was:
(garden.core/css
 [:.parent {:color 'red}
  [(gs/& :> :.child)
   {:margin 0}]])

.parent {
  color: red;
}
.parent>.child {
  margin: 0;
}
Also, I'd love some pointers on what's wrong with my mental model on the initial attempt:
(garden.core/css
 [:.parent {:color 'red}
  [(gs/> (gs/&) :.child)
   {:margin 0}]])

.parent {
  color: red;
}
.parent & > .child {
  margin: 0;
}

niamu 2019-02-26T05:35:22.005600Z

@aisamu Does this feel less “hacky” to you?

[:.parent {:color :red}
 [:&> [:.child {:margin 0}]]]

1
aisamu 2019-02-26T05:46:19.008200Z

It's definitely prettier and fixes half of the whitespace weirdness, thanks! (`.parent> .child`)

aisamu 2019-02-26T05:47:20.009Z

It's still a bit conceptually hazy, though.

niamu 2019-02-26T05:56:20.009200Z

which part is hazy for you?

aisamu 2019-02-26T13:58:06.012500Z

I was expecting something more explicit (e.g. (gs/> :& :.child)) Your solution definitely profits from garden's execution model and CSS whitespace behavior, but that can also be seen as conceptual "overhead" for newcomers!

noprompt 2019-02-26T22:27:19.013700Z

I’d be interested to hear alternative approaches or ways that’d help reduce that overhead. Keep in mind that Garden is not a priority for me currently and I’m pretty much open to working with anyone on any PR that’d improve the landscape.