Semi-colon expected after Prettier format

[leo-petrucci]

I use Prettier to make my styled components look nice. Unfortunately sometimes Prettier wraps certain lines and that causes issue with the plugin which marks them as errors.

For example:

    padding: ${({ theme }) => theme.spacing.xxs} ${({ theme }) => theme.spacing.xs};

Gets formatted to:

    padding: ${({ theme }) => theme.spacing.xxs}
      ${({ theme }) => theme.spacing.xs};

Which the plugin marks as error:

semi-colon expectedts-styled-plugin(9999)

I'm aware I can start typing them like this to avoid Prettier's formatting:

    padding: ${({ theme }) => `${theme.spacing.xxs} ${theme.spacing.xs}`};

But I'm wondering if there's a better way to fix this?

[stelladraco27]

Any updates on fixing this? I am also getting the following errors due to the same problem: at-rule or selector expected, semi-colon expected, ) expected For the following snippet:

&.editField {
      background-image: url(${({ theme }) =>
         base_icon_URL + // ") expected" error shows here.
         theme.tintedGlassHex(theme.foreground, theme.background).slice(1) +
         '/pencil--v1.png'}); // "semi-colon expected" error shows here.
} // "at-rule or selector expected" error shows here.