search

styled-components / babel-plugin-styled-components

Improve the debugging experience and add server-side rendering support to styled-components
MIT License
1.08k stars 141 forks source link

Problem with js style comments (//) #314

Open mhsattarian opened 3 years ago

mhsattarian commented 3 years ago

Hi, I'm facing this issue with using JS-style comments. this happens when I comment on a line just at the end of a CSS property, in the same line right after ; this would break styles below it after building the project.

background-color: hsl(
      0,
      0%,
      95%
    ); // this comment would break all styles below it

It's working fine in development mode as probably babel-plugin-styled-components wouldn't be used in the development mode, I tested using both in CRA and Snowpack.

and also it would work fine if the comment is on a new line or at the end of a css decleration scope, like this:

.some-class {
    background-color: hsl(
      0,
      0%,
      95%
    );
  }// from react-select disabled state background

I provided a reproducible example here: https://github.com/mhsattarian/babel-plugin-styled-components-comment-issue

build the project and see how text on the screens have no color assigned.