garden
garden copied to clipboard
noprompt
Incorrect CSS emitted for inner media queries
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
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.
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.
