[v3] Missing spread for interpolations

[patibugaj]

I've noticed that template literal doesn't work properly with the breakpoint method.

My source code, that leads me to the problem:

 ${breakpoint('md')`
    &:hover {
      color: ${({ theme }) => theme.colors.green};
      background-color: ${({ theme }) => theme.colors.darkGrey_2};
    }  
  `};

As a result, the dynamic values are concatenated into one string. Dev tools result:

Probably the issue is caused by missing spread operator on interpolations here: https://github.com/jameslnewell/styled-components-breakpoint/blob/2204a873760e6e95c3d368143ec41c04e321b2e2/src/breakpoint.ts#L30

[dcorb]

It seems a similar bug, and similar fix (missing spread operator) happened before

https://github.com/jameslnewell/styled-components-breakpoint/commit/9b0819c2b20b7d4278d547817f2bfcc34ace7fe0

[sprad]

@patibugaj Not a great solution, but as a temporary workaround until the bug is fixed, you can define multiple breakpoint blocks at the same screen size for each of your dynamic template items. For example, the following code should work:

 ${breakpoint('md')`
    &:hover {
      color: ${({ theme }) => theme.colors.green};
    }  
`};

 ${breakpoint('md')`
    &:hover {
      background-color: ${({ theme }) => theme.colors.darkGrey_2};
    }  
`};

[leads]

Confirming this is still a bug.

I have switched to this approach: https://jsramblings.com/how-to-use-media-queries-with-styled-components/