Queries in emotion css blocks have broken types

Hi Maxim!

First of all: many thanks for such a great library 😃

I am writing as I have stumbled upon a potential bug that relates to Typescript.

the following line of code will result in a Type Error

import { css } from "@emotion/react";
import { down } from "styled-breakpoints";

const myReusableCss = css`
  ${down("xs")}{
    background: red;
  }
`

you can check the reproduction in a Code Sandbox:

https://codesandbox.io/s/stupefied-hertz-0z2b6?file=/src/MyComponent.ts

I might take a deeper look into code later on in the week to see whether I could come up with a solution.

[mg901]

@filipnathanel In the near future I will investigate this issue and try to solve your problem.

[filipnathanel]

Or maybe I just don’t understand emotion’s API 🤷‍♂️ …

I made it work by explicitly passing props from the outer scope, which I assumed would be done automatically for string interpolations within css blocks

import { css } from "@emotion/react";
import { down } from "styled-breakpoints";

const myReusableCss = (props) => css`
  ${down("xs")(props)}{
    background: red;
  }
`