Media query string interpolation error, "( expectedts-styled-plugin(9999)"

[mnogiec]

Describe the bug (including copyable syntax) I have a breakpoints object with such structure in my code:

export const breakpoints = {
  iphoneSE: { query: '(max-width: 320px)' },
  mobile: { query: '(max-width: 576px)' },
  small: { query: '(max-width: 768px)' },
  smallLaptop: { query: '(max-width: 1024px)' },
  medium: { query: '(max-width: 1280px)' },
};

And I use it with media queries inside Styled Component just like that:

export const Container = styled.div`
  padding-bottom: 5px;
  
  @media screen and ${breakpoints?.mobile.query} {
    padding-bottom: 10px;
  }
`;

Unfortunately each time there appears to be an error with such message: ( expectedts-styled-plugin(9999)

Screenshot

To Reproduce A very basic app created using CRA, install styled-components and try to use above breakpoints object inside string interpolation of media query.

Expected behavior Don't throw such error, as strings in given object do have "(" in them. After disabling this extension the problem disappears.

Build environment (please complete the following information):

• OS: macOS Monterey 12.3.1
• VSCode Version: 1.66.1
• Extension Version 1.7.4

[Slowl]

More than a year that I have the same issue and it appears that nobody want to fix / add flexibility to disable tslint, crazy

[jasonwilliams]

@Slowl whats stopping you from having a go and fixing it yourself? We have a whole guide on contributing https://github.com/styled-components/vscode-styled-components/blob/master/CONTRIBUTING.md

[Slowl]

Sorry if I seemed rude with my comment, I was just surprised to see the same issue still popping up after a year.

As soon as I have free time I will, but it's the same problem for everyone I guess :)

[elzup]

Alternative code

const errorCase1 = css`
-	@media screen and ${val} {
+	${`@media screen and ${val}`} {
		padding-bottom: 10px;
	}
`



const errorCase2 = keyframes`
-	${50}% {
+	${`${50}%`} {
		padding-bottom: 10px;
	}
`