search

noprompt / garden

Generate CSS with Clojure
1.35k stars 90 forks source link

Incorrect CSS emitted for "&" parent selector #187

Open green-coder opened 3 years ago

green-coder commented 3 years ago

As mentioned in https://github.com/green-coder/girouette/pull/74#issuecomment-974616150, the problem is:

(garden/css [".space-x-2" [#garden.selectors.CSSSelector{:selector "& > * + *"} {:margin-left "0.5rem"}]])
=> ".space-x-2 & > * + * {\n  margin-left: 0.5rem;\n}"

The expected output was more like .space-x-2 > * + * {\n margin-left: 0.5rem;\n} (without the &)

This bug happens because "& > * + *" is not matched by parent-selector-re in https://github.com/noprompt/garden/blob/31066ed2d7d769819c2d1d95460bd20818bc9561/src/garden/compiler.cljc#L176-L189

This workaround is working:

(garden/css [".space-x-2" [#garden.selectors.CSSSelector{:selector "&>*+*"} {:margin-left "0.5rem"}]])
=> ".space-x-2>*+* {\n  margin-left: 0.5rem;\n}"