Problems with syntax highlight when using css

[present-g]

When using css, the syntax highlighting breaks.

Example code:

const StylesWithCss = css`
  margin: 0;
  background: red;

  & > * {
    /* valid highlight */
    margin: 10px;
  }
`;

const StylesWithTopLevel = styled.div<{ $margin?: string; $isActive: boolean | undefined }>(
  ({ $margin, $isActive }) => css`
    display: flex;
    flex-direction: column;
    margin: ${$margin};
    width: 100%;
    overflow: hidden;
    position: relative;

    ${$isActive
      ? css`
          margin: 0;
          background: red;
        `
      : ''}
  `
);

const StylesWithCondition = styled.div<{ $isActive: boolean | undefined }>`
  /* valid highlight */
  overflow-x: auto;
  scroll-snap-type: x mandatory;

  ${({ $isActive }) =>
    $isActive
      ? css`
          overflow-x: unset;
          scroll-snap-type: unset;
        `
      : ''}
`;

Screenshot from VSCode: