Queries in emotion css blocks have broken types

[filipnathanel]

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.

[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;
  }
`

[mg901]

@filipnathanel, hello. Thank you so much for discovering this issue. Yes, this is indeed a type bug. Since the css type from styled-components is not compatible with the type from @ emotion / styled. I'll be working on fixing this issue shortly.)

[mg901]

@filipnathanel Why are you using css function instead of styled?

[filipnathanel]

@mg901

I don't know how styled would satisfy my need. The need being: styles composition (sometimes dynamic) and from what I have gathered css is the way to go...

As per emotion docs:
https://emotion.sh/docs/styled#composing-dynamic-styles

[mg901]

@filipnathanel, now everything all right.)) Update styled-breakpoints to 10.0.1

[mg901]

@filipnathanel did I manage to solve your problem?

[filipnathanel]

@mg901 Thanks for keeping me in the loop.

The type error is no longer present however the breakpoint still doesn't work without props being explicitly passed to the breakpoint.

I have updated the code sandbox with styled-breakpoints version 10.0.1 and updated example to picture the problem
https://codesandbox.io/s/stupefied-hertz-0z2b6?file=/src/MyComponent.ts

I think it has something to do with this issue emotion-js/emotion#1085

[mg901]

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

[mg901]

@@filipnathanel, sorry for long answering you for a long time. I have researched the given question. The css function in @ react / emotion doesn't know anything from the theme, unlike styled-components. For this reason, you need to make atomic mixins that know nothing about breakpoints. In this issue describes a similar problem. If you have any problems in solving your problems, turn around. I am always happy to help you.)

[mg901]

@filipnathanel, bro I was able to help you in solving the problem?