css.resolve :global selectors error ts-styled-plugin

[Adam-Collier]

Hi guys,

I have the below in VS code:

import css from 'styled-jsx/css';
import Row from '../Row';

const getStackStyles = ({ direction, justify, align, gap }) => css.resolve`
  .stack {
    display: flex;
    flex-direction: ${direction};
    justify-content: ${justify};
    align-items: ${align};
  }

  .stack :global(> *) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .row :global(> * + *) {
    margin-left: calc(${gap} * 1rem);
  }

  .column :global(> * + *) {
    margin-top: calc(${gap} * 1rem);
  }

  .page {
    padding-top: 68px;
  }

  @media (max-width: 767px) {
    .row :global(> * + *) {
      margin-left: calc(${gap} * 0.75rem);
    }

    .column :global(> * + *) {
      margin-top: calc(${gap} * 0.75rem);
    }
  }
`;

The problem is even though everything is valid vs code gives us some red squiggles:

with the error:

Now after playing around it looks like this is down to the :global() selectors being used in the template literal. Any idea how this can be fixed?