prop passed to styled component used in an after pseudo class not working

[aderchox]

I'm using Emotion.js and its styled syntax. Can you find where this is wrong?

    &::after {
      content: ${(props) => {
        console.log({ props });
        if (props.direction === "ltr") {
          return "ltr";
        } else {
          return "rtl";
        }
      }};
    }

(direction is passed correctly, I've checked using the console.log you see above the if statement.)
(also the &::after {} is fine because when I check with content: "foo" it shows up correctly.)
(I expect either content: "ltr" or content: "rtl", but neither shows up. Even the after pseudo class doesn't show up on the inspect element.

[aderchox]

Oh I've got it, I had to wrap ${...} in double quotes. So:

    &::after {
      content: "${(props) => {
        console.log({ props });
        if (props.direction === "ltr") {
          return "ltr";
        } else {
          return "rtl";
        }
      }}";
    }

Of course now TS is throwing a fit, the }"; towards the bottom is red-underlined saying "semi-colon expected ts-styled-plugin(9999)", but it's working and TS seems to be wrong on this one.
🙏

[Andarist]

Of course now TS is throwing a fit, the }"; towards the bottom is red-underlined saying "semi-colon expected ts-styled-plugin(9999)", but it's working and TS seems to be wrong on this one.

It's not TS' fault - it's a bug~ in ts-styled-plugin.

[aderchox]

Yeah thank you that's right, after I made this comment here I made an issue there too: microsoft/typescript-styled-plugin#162