Incorrect CSS emitted for inner media queries

[vemv]

The Sass compiler supports "inner media queries" (for lack of a better name, that I know of):

I'm failing to replicate that feature with Garden.

This is my attempt:

[:img {:max-width "424px"}
   (at-media {:max-width (u/px 700)}
     {:max-width "100%"})]

But the output is incorrect:

img {
  max-width: 424px;
}

@media (max-width: 700px) {

  max-width: 100%;

}

...In the emitted CSS, the media query lacks the img qualifier.

The following works:

  [[:img {:max-width "424px"}]
   (at-media {:max-width (u/px 700)}
     [:img
      {:max-width "100%"}])]

...but that breaks DRY: the img selector is repeated. In real-world usage the selector may be more complex, with a higher cost for repetition.

Also for bigger stylesheets I find this construction a bit confusing. At least coming from Sass, I see the Sass-style nesting more intuitive.

WDYT?

Thanks - Victor

[noprompt]

I took a quick peek into it and it seems like it should be possible but I'd need to spend a little time investigating it.

[vemv]

Nice!

[noprompt]

@vemv I haven't had a chance to really get into this yet. Apologies.

[vemv]

No issue 🙌

[green-coder]

Instead of modifying the CSS generator, I suggest to solve the problem via a function pull-media-query-to-the-root which take a garden data as input and return a garden data as output.

[noprompt]

@green-coder can you submit a patch?