renderStatic doesn't render media query from a style object

[isymchych]

Type: Bug

Packages	Version
fela	6.0.x

---

Description

renderer.renderStatic doesn't render media query from a style object

Steps to reproduce

renderer.renderStatic({
  '@media (max-width: 9999px)': {
    display: 'none',
  },
}, 'html');

Expected Behavior

Page content should be hidden

Actual Behavior

Page content is visible

<style data-fela-type="STATIC" type="text/css">html{}</style>

[robinweser]

Hmm, yeah. Actually this is not supported at the moment. But @supports and @media seem like valid rule extensions for static styles as well. I will perhaps write an enhancer for it, because I don't want to bloat the APIs.

Thanks for reporting, never "needed" this functionality by now!

[isymchych]

I assumed it was a bug cause media queries work in renderStatic if style is a string, also they work fine inside rules, so I had a feeling that they should also work in style objects ¯\_(ツ)_/¯

[robinweser]

yeah thats true. maybe I can refactor the logic of rule rendering to reuse it for static rendering as well.

[oschade]

It's the same with pseudo classes like ":selection" or ":before". It's an unexpected behaviour, that they work with "renderRule" bot not with "renderStatic".

[milesj]

Just ran into this. It would be nice if renderStatic supported full nested objects (pseudos, media, etc) like other rules do.

[IgorBabkin]

@robinweser Any news? How to add media queries for html?

[robinweser]

I'm still not sure if I want to add that at all. Fela is not about static styles and thus adding more complexity just for the sake of some DX/readability improvements is not really worth it in my eyes.

If you need some special media query styles you can always just pass a string e.g.

renderer.renderStatic(`
body {
  margin: 10px
}

@media (min-width: 320px) {
  body {
    margin: 20px
  }
}`)

[robinweser]

I'm actually going to close this as I want to keep it simple.