Interpolation into template literals (responsive)

[flavio-ever]

Hi, I saw recently that I can't do interpolation.
Is there any way to get around this problem? I think I'll need to give up the elegance of the code.
The only solution I found was through "css" where I can pass the parameters, but I will also need to define a "media" and so on.

Interpolation into template literals #393

Obs: i'm making a responsive tab component

Does not work with interpolation

export const JobsTabNavItemSelected = styled.nav(
  ({ activeTabId }: JobsTabNavItemSelected) => {

    console.log(activeTabId)
    //sm:translate-y-[calc(${String(activeTabId)} * 3rem)]

    return [
      tw`
      bg-orange-1
      absolute
      z-50
      top-auto
      left-0
      w-2
      h-12
      translate-x-[calc(${String(activeTabId)}  * 10rem)]
    `,
      tw`
      sm:translate-x-0
      sm:translate-y-[calc(${String(activeTabId)}  * 3rem)]
    `,
      css`
        transition: transform 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition-delay: 0.1s;
      `
    ]
  }
)

Working with css

export const JobsTabNavItemSelected = styled.nav(
  ({ activeTabId }: JobsTabNavItemSelected) => [
    tw`
      bg-orange-1
      absolute
      z-50
      top-auto
      left-0
      w-2
      h-12
    `,
    css`
      transition: transform 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
      transition-delay: 0.1s;

      transform: translateY(calc(${activeTabId} * 3rem));

      @media (max-width: 640px) {
        transform: translateX(calc(${activeTabId} * 10rem));
      }
    `
  ]
)

If there's no way to improve it, fine, I'll stick with the current code.

Thanks!

[ben-rogerson]

Yeah, the limitation means we need to drop back into plain old css for this stuff.
What you have shown above is a good solution.

[ben-rogerson]

One tweak would be to import the 640px breakpoint from your theme with the theme import.

@media (max-width: ${theme`screens.sm`}) {