How do you use css media queries in choo ?

[Daniel Varvara]

Hi,

Please can someone make some suggestions on how to use css media queries in choo ?
I'm using sheetify for my css but can't quite see how to use media queries with or without sheetify in choo

Many thanks!

[Daniel Varvara]

in case someone was wondering
you install sheetify in your project.
npm ex:
npm install sheetify
then within your choo component

const html = require('choo/html')
const css = require('sheetify')

const yourVariable = css`
  :host {
    color: red;
  }

@media screen and (min-width: 768px) {
    :host {
      color: blue;
    }
  }

`
const yourComponent = () => {
 return html`
         <h1 class=${yourVariable}>This text is styled</h1>
 `
}
module.exports = yourComponent