) expected ts-styled-plugin(9999)

[AaronMcCloskey]

Describe the bug (including copyable syntax) Getting the following error from ts-styled-plugin on the 2nd line

@media screen and (max-width: ${({ theme }) =>
    theme.DynamicTheme.mobXLargeMax - 20}px) {

Screenshot

To Reproduce I believe this occurs due toprintWidth setting in my prettier options

.prettierrc.js

module.exports = {
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "all"
}

For good measure, I'll add my eslint settings to

module.exports = {
  extends: ['airbnb', 'plugin:prettier/recommended', 'prettier/react'],
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    jest: true,
    node: true,
  },
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module',
    allowImportExportEverywhere: true,
  },
  rules: {
    'jsx-a11y/href-no-hash': ['off'],
    'react/jsx-filename-extension': ['warn', { extensions: ['.js', '.jsx'] }],
    'max-len': [
      'warn',
      {
        code: 80,
        tabWidth: 2,
        comments: 80,
        ignoreComments: false,
        ignoreTrailingComments: true,
        ignoreUrls: true,
        ignoreStrings: true,
        ignoreTemplateLiterals: true,
        ignoreRegExpLiterals: true,
      },
    ],
    'react/forbid-prop-types': 'off',
    'react/prop-types': [2, { ignore: ['children'] }],
    'react/jsx-props-no-spreading': 'off',
    'prettier/prettier': ['error'],
  },
};

Expected behavior Don't believe the error should appear as it is valid css

Build environment (please complete the following information):

• OS: macOS Cataline v10.15.7
• VSCode Version: 1.68.1
• Extension Version v1.7.4

Additional context Add any other context about the problem here.

[MatthiasDh]

I think I got a similar issue: { expected ts-styled-plugin(9999)

[stanislawdera]

I'm getting similar issue: semi-colon expected ts-styled-plugin(9999) Is that related?

export const Wrapper = styled.div`
  background-color: red;

  div {
    padding: ${({ theme }) => theme.spacing.md}
      ${({ theme }) => theme.spacing.sm};
  }
`

When I remove the newline everything starts working:

// produces error
padding: ${({ theme }) => theme.spacing.md}
  ${({ theme }) => theme.spacing.sm};

padding: ${({ theme }) => theme.spacing.md} ${({ theme }) => theme.spacing.sm}; // works

[mariorodeghiero]

I am also getting } expectedts-styled-plugin(9999) but I am using emotion

code:

 &: hover { <====== issue in "&" symbol
       text-decoration: underline;
   }

[alexei-petru]

Getting same error on v1.7.4

*working

### *not working on formatting

Temporary solution -- downgrade to v1.7.0

[dkyuho]

Experiencing a similar error on v1.7.5 using emotion with valid CSS :has selector

[zuehler]

Same for me v1.7.5 using emotion with forced line breakes

[johnhult]

I got exactly the same issue. Forced line break and autoformat. Anyone that has found a way around this?

[jasonwilliams]

Are you getting this with 1.7.8?

[AaronMcCloskey]

Are you getting this with 1.7.8?

@jasonwilliams Yes, the { expected ts-styled-plugin(9999) no longer appears on1.7.8 on any of the instance I had before 🙌

[jasonwilliams]

Thanks for confirming

[ajkl2533]

@jasonwilliams I'm still getting { expected ts-styled-plugin(9999) on 1.7.8 among two more:

• semi-colon expected ts-styled-plugin(9999)
• at-rule or selector expected ts-styled-plugin(9999)

Link to repository https://github.com/securityscorecard/design-system/blob/next-major/src/components/Spinner/Spinner.tsx#L26-L43

[MauricioRobayo]

I'm on version 1.7.8 and getting:

[johnninja]

Are you getting this with 1.7.8?

@jasonwilliams Yes, the { expected ts-styled-plugin(9999) no longer appears on1.7.8 on any of the instance I had before 🙌

Still happens!!!

[elektronik2k5]

Edit: it seems like this is actually another bug: https://github.com/styled-components/vscode-styled-components/issues/369

I'm leaving my comment here so anyone who lands here will find the right issue (and workaround) when the offending code is an interpolation in a media query.

~I am also experiencing this issue in versions from 1.7.0 up to the current 1.7.8. My setup is latest Emotion (11.11.0) and TS (5.1.3).~

~Can we please reopen the issue?~

[sacru2red]

Similar Issue,

prettier fixed my file with new lines, when using ternary operator. and ext warn

when all line in same line, no warn

[Vikeo]

Same issue here. Prettier formatting on save gives me this error.

When I merge line 35 and 36 it's fine:

[JGabriel12]

Similar Issue