Styled-jsx issue with lots of interpolation

[timneutkens]

Report: https://discordapp.com/channels/752553802359505017/752647196419031042/906556038113800223

Code:

import React from 'react';
import { MDGlobalSpec } from '../../../../Meeting/MeetingLayout/MDGlobal';
import { SMGlobalSpec } from '../../../../Meeting/MeetingLayout/SMGlobal';
const baseHeight = 70;
const spacing = 10;
const mobileSpacing = 7;
const mobileHeight = baseHeight * 0.8;
const LoubiButtonWrapper = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      {children}
      <style jsx global>{`
        .loubi-circle-button {
          position: fixed;
          /* height: ${baseHeight}px; */
          width: auto;
          cursor: pointer;
          user-select: none;
          filter: drop-shadow(0 0 2px #4d0006);
        }
        .loubi-circle-button.top-left {
          top: ${spacing}px;
          left: ${spacing}px;
        }
        .loubi-circle-button.top-center {
          top: ${spacing}px;
          left: 50%;
          margin-left: -${baseHeight / 2}px;
        }
        .loubi-circle-button.top-right {
          top: ${spacing}px;
          right: ${spacing}px;
        }
        .in-meeting.SM .loubi-circle-button.top-right {
          top: ${SMGlobalSpec.logoSectionHeight + spacing}px;
        }
        .in-meeting.MD .loubi-circle-button.top-right {
          top: ${MDGlobalSpec.logoSectionHeight + spacing}px;
        }
        .loubi-circle-button.top-second-right {
          top: ${baseHeight + spacing * 2}px;
          right: ${spacing}px;
        }
        .in-meeting.SM .loubi-circle-button.top-second-right {
          top: ${SMGlobalSpec.logoSectionHeight + baseHeight + spacing * 2}px;
        }
        .in-meeting.MD .loubi-circle-button.top-second-right {
          top: ${MDGlobalSpec.logoSectionHeight + baseHeight + spacing * 2}px;
        }
        .loubi-circle-button.top-third-right {
          top: ${baseHeight * 2 + spacing * 3}px;
          right: ${spacing}px;
        }
        .in-meeting.SM .loubi-circle-button.top-third-right {
          top: ${SMGlobalSpec.logoSectionHeight +
          baseHeight * 2 +
          spacing * 3}px;
        }
        .in-meeting.MD .loubi-circle-button.top-third-right {
          top: ${MDGlobalSpec.logoSectionHeight +
          baseHeight * 2 +
          spacing * 3}px;
        }
        .loubi-circle-button.bottom-left {
          bottom: ${spacing}px;
          left: ${spacing}px;
        }
        .loubi-circle-button.bottom-right {
          bottom: ${spacing}px;
          right: ${spacing}px;
        }
        .loubi-circle-button.bottom-second-right {
          bottom: ${baseHeight + spacing * 2}px;
          right: ${spacing}px;
        }
        .loubi-circle-button.bottom-third-right {
          bottom: ${baseHeight * 2 + spacing * 3}px;
          right: ${spacing}px;
        }
        .loubi-circle-button.bottom-fourth-right {
          bottom: ${baseHeight * 3 + spacing * 4}px;
          right: ${spacing}px;
        }
        @media (max-width: 768px) {
          .loubi-circle-button {
            height: ${mobileHeight}px;
          }
          .loubi-circle-button.top-left {
            top: ${mobileSpacing}px;
            left: ${mobileSpacing}px;
          }
          .loubi-circle-button.top-center {
            top: ${mobileSpacing}px;
            margin-left: -${mobileHeight / 2}px;
          }
          .loubi-circle-button.top-right {
            top: ${mobileSpacing}px;
            right: ${mobileSpacing}px;
          }
          .loubi-circle-button.top-second-right {
            top: ${mobileHeight + mobileSpacing * 2}px;
            right: ${mobileSpacing}px;
          }
          .loubi-circle-button.top-third-right {
            top: ${mobileHeight * 2 + mobileSpacing * 3}px;
            right: ${mobileSpacing}px;
          }
          .loubi-circle-button.bottom-left {
            bottom: ${mobileSpacing}px;
            left: ${mobileSpacing}px;
          }
          .loubi-circle-button.bottom-right {
            bottom: ${mobileSpacing}px;
            right: ${mobileSpacing}px;
          }
          .loubi-circle-button.bottom-right.spotify {
            bottom: ${mobileSpacing + 40}px;
          }
          .loubi-circle-button.bottom-second-right {
            bottom: ${mobileHeight + mobileSpacing * 2}px;
            right: ${mobileSpacing}px;
          }
          .loubi-circle-button.bottom-second-right.spotify {
            bottom: ${mobileHeight + mobileSpacing * 2 + 40}px;
          }
          .loubi-circle-button.bottom-third-right {
            bottom: ${mobileHeight * 2 + mobileSpacing * 3}px;
            right: ${mobileSpacing}px;
          }
          .loubi-circle-button.bottom-third-right.spotify {
            bottom: ${mobileHeight * 2 + mobileSpacing * 3 + 40}px;
          }
          .loubi-circle-button.bottom-fourth-right.spotify {
            bottom: ${mobileHeight * 3 + mobileSpacing * 4 + 40}px;
          }
          .loubi-circle-button.bottom-fourth-right {
            bottom: ${mobileHeight * 3 + mobileSpacing * 4}px;
            right: ${mobileSpacing}px;
          }
        }
      `}</style>
    </>
  );
};
export default LoubiButtonWrapper;

[padmaia]

This seems like it may be a two pronged issue. First there is an issue even without interpolation.

Input:

const LoubiButtonWrapper = ({ children }) => {
  return (
    <>
      {children}
      <style jsx global>{`
        .loubi-circle-button {
          filter: drop-shadow(0 0 2px #4d0006);
        }
      `}</style>
    </>
  );
};

Output:

const LoubiButtonWrapper = ({ children  })=>{
    return <>

      {children}

      <_JSXStyle id={"4dcad985f63a190a"}>{".loubi-circle-button {filter: drop-shadow(0 0 2px #\\34d0006)}"}</_JSXStyle>

    </>;
};

This doesn't cause a Module parse failed: Bad escape sequence in untagged template literal (21:27) error, but the css will be invalid. Secondly when there is some interpolation there is something that is removing one of the back slashes which causes the module parse error. It seems to be happening outside of the styled-jsx transform though. I'm not sure if this would cause any issues with valid input or if this is just a bad input scenario.

Input:

const LoubiButtonWrapper = ({ children }) => {
  return (
    <>
      {children}
      <style jsx global>{`
        .loubi-circle-button {
          filter: drop-shadow(0 0 2px #4d0006);
        }
        .loubi-circle-button.top-left {
          top: ${spacing}px;
          left: ${spacing}px;
        }
      `}</style>
    </>
  );
};

Output:

const LoubiButtonWrapper = ({ children  })=>{
    return <>

      {children}

      <_JSXStyle id={"a2a5515203b7180c"} dynamic={[
        spacing,
        spacing
    ]}>{`.loubi-circle-button {filter: drop-shadow(0 0 2px #\34d0006)}
.loubi-circle-button.top-left {top:${spacing}px;
left:${spacing}px}`}</_JSXStyle>

    </>;
};