search

thysultan / stylis

light – weight css preprocessor
https://stylis.js.org
MIT License
1.71k stars 82 forks source link

`@supports not` is not supported #308

Closed grabbou closed 1 year ago

grabbou commented 1 year ago

Hey,

Playing around with Styled Components I've noticed that while @supports syntax is supported, @supports not is not. For example, @supports not (container-type: inline-size) will not have any effect.

Andarist commented 1 year ago

Could you share a repro case? The current major version of Styled-Components (v5) is using the old version of Stylis (v3). However, I've tested it with that old version and it seems to work:

const res = stylis('.user', `

@supports not (container-type: inline-size) {
  display: block;
}

`)

res // '@supports not (container-type:inline-size){.user{display:block;}}'

The more recent version of Stylis (v4) can be tested on our homepage and as far as I could test this particular example it also seems to work fine with it.

grabbou commented 1 year ago

Thank you! I was planning to work on that feature, so I am super happy to see you respond really quick! Apologies for the very short description yesterday, but it was getting really late - now that I look at it, it feels like I was really concise 😅

That particular syntax wasn't working for me yesterday, but now that I look at it, I can confirm that your example works in my environment too.

I think it had to do with some other selectors / features of CSS that I was using, @container in particular. Since this is not yet supported in Styled Components 5.x (but it is as of 6.x), I think I got confused.

Either way, thank you for your time, appreciate swift response! Looks like my first contribution will need to wait!