styled-container-query icon indicating copy to clipboard operation
styled-container-query copied to clipboard

Props inside a container-query doesn't work

Open nicholasmaddren opened this issue 6 years ago • 1 comments

Hey, I'd just like to say that this add-on is awesome and saved me so much pain.

I am having one issue with it though, I want to be able to set the container query by using passed props like the following example:

https://codesandbox.io/s/6wn8pvw673

When I add the minWidth prop to the :container like so:

&:container(min-width: ${props => props.minWidth}) {}

This error occurs: Invalid attempt to destructure non-iterable instance.

nicholasmaddren avatar Dec 11 '18 15:12 nicholasmaddren

Hi @nicholasmaddren , I'm glad it helps you. 😄

This error occurs because styled-container-query parses just the strings of the template-string [without expressions] and than it passes all down to styled-components and let styled-components do the rest.

Currently i have no idea how to solve this, without rebuilding parts of styled-components. But there should be a better error handling.

Maybe you have an idea how to solve it?

FreddyFY avatar Dec 11 '18 18:12 FreddyFY