search

thheller / shadow-css

CSS-in-CLJ(S)
https://github.com/thheller/shadow-css
Eclipse Public License 1.0
108 stars 10 forks source link

Media query combiner produces invalid css #22

Closed Ramblurr closed 8 months ago

Ramblurr commented 8 months ago

Description

I have some aliases like this:

:dark                            "@media (prefers-color-scheme: dark)"
:hover-mouse                     "@media(hover: hover) and (pointer: fine)"

(these are media queries for targeting hover states on non-touch devices. more info

With hiccup like this:

[:dark [:hover-mouse [:hover :bg-white]]]

shadow-css produces css like this, which has mismatching parens:

@media (prefers-color-scheme: dark) and hover: hover) and (pointer: fine){
  .fairy_box_web_views_home__L361_C16:hover {
    background-color: #fff;
  }
}

Relevant shadow-css code:

https://github.com/thheller/shadow-css/blob/b3c97fe3caf16fab1a90fb93a7baad76fe15aa46/src/main/shadow/css/analyzer.cljc#L106-L112

Ramblurr commented 8 months ago

Ee gads, seems to be a simple matter of the space after @media. Fixing my aliases to @media (hover: hover) and (pointer: fine) seems to work fine. Sorry for the noise.

thheller commented 8 months ago

Yeah the parsing is a bit simplistic. Should probably be smarter. :P