If a standalone Styled Components interpolation is following by a CSS comment, the CSS comment is duplicated in the resulting output.

Prettier 1.15.1

Playground link

# Options (if any): none / defaults

Input:

const StyledComponent = styled.div`
  ${anInterpolation}

  /* a comment */

  .aRule {
    color: red
  }
`;

Output:

const StyledComponent = styled.div`
  ${anInterpolation}

  /* a comment */

  /* a comment */

  .aRule {
    color: red;
  }
`;

Each subsequent format will continue to duplicate all comments, for example formatting that output again results in the following (playground link):

const StyledComponent = styled.div`
  ${anInterpolation}

  /* a comment */

  /* a comment */

  /* a comment */

  /* a comment */

  .aRule {
    color: red;
  }
`;

Expected behavior:

const StyledComponent = styled.div`
  ${anInterpolation}

  /* a comment */

  .aRule {
    color: red;
  }
`;

Adding a semicolon to the end of the interpolation results in the expected behavior:

-  ${anInterpolation}
+  ${anInterpolation};

However I don't believe a semicolon should be required in this case, given that the interpolation could be the result of a call to css or other similar multi-rule mixins.