vscode-styled-components

vscode-styled-components copied to clipboard

Describe the bug (including copyable syntax) When a CSS property has multiple long string interpolations, a code formatted like Prettier wants to put a line break in the middle to keep the max line length appropriate. However, this seems to break the error-checking and cause multiple incorrect errors to be highlighted - but only when using the string interpolation expressions. Ordinary CSS plays fine with the line break.

Code

const WorksFine = styled.div`
  margin: 1
    1;
  display: inline;
  position: relative;
`;

const RaisesErrors = styled.div`
  margin: ${'really long interpolation number 1' && 1}
    ${'really long interpolation number 2' && 1};
  display: inline;
  position: relative;
`;

Screenshot

• semi-colon expected ts-styled-plugin(9999) at the first mark,
• at-rule or selector expected ts-styled-plugin(9999) on the last mark and
• { expected ts-styled-plugin(9999) on any marks in the middle (which appear on every subsequent CSS property colon).

To Reproduce Open a typescript styled-components React project in VSCode with this plugin, past in the code above and observe the errors.

Expected behavior No errors to be raised in either of the code blocks

Build environment (please complete the following information):

• OS: Ubuntu 20.04
• VSCode Version: 1.57.1
• Extension Version 1.6.4

@finnmerlett would you be willing to investigate further? We have a computer guide for debugging these issues https://github.com/styled-components/vscode-styled-components/blob/master/CONTRIBUTING.md

In my case I'm getting this issue when prettier breaks the line with the column printWidth set to 120.

export const CarouselCardsWrapper2 = styled.div`
  @media only screen and (min-width: ${({ theme }) => theme.breakpoints.md}px) and (max-width: ${({ theme }) =>
      theme.breakpoints.lg - 1}px) {
    [class*='SimpleGridstyle__SimpleGrid-sc'] {
      [class*='SimpleGridColumn'] {
        img {
          width: -webkit-fill-available;
          margin: 1rem 1.75rem 1.25rem;
          min-height: auto;
        }
      }
    }
  }
`;

Do we have some status about this?

This wasn't happening at the version 1.5.2.