Wrong Highlighting and linting

[berkaytheunicorn]

as you can see above plugin doesn't correctly highlight inside calc() and raises wrong errors when prettier split them into multiple lines.

[mjbvz]

Please share the text of the code along with screenshots

[berkaytheunicorn]

here you go...

export const AlphaPicker = styled.div.attrs(({ rgb = {} }) => {
  return { style: { background: `rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})` } };
})`
  width: ${_`size.advanced.picker``px`};
  height: ${_`size.advanced.picker``px`};
  margin-left: calc(${_`size.advanced.picker``px`} / 2 * -1);
  margin-top: calc(
    ${_`size.advanced.picker``px`} / 2 * -1 + (${_`size.advanced.bar``px`} / 2)
  );
  border-radius: ${_`size.advanced.picker``px`};
  border: 2px solid #fff;
  cursor: default !important;
  user-select: none;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
`;

[mjbvz]

Closing as this package has been deprecated in favor of the official styled-components/typescript-styled-plugin fork

After updating to that fork, follow up in the styled-components repo if this is still an issue