Skip to content

styled-components: Line comments are not supported in multiline style declarations #615

@nora-heydecker-axa

Description

@nora-heydecker-axa

Describe the bug

A line comment after a multiline style declaration is not stripped properly.

This is the equivalent of styled-components/styled-components#5613:

const MyStyledComponent = styled.div`
  max-height: calc(
    ${someVariable1} + ${someVariable2} + ${someVariable3}
  ); // This comment causes a parsing error
`;

URL to minimal reproduction

I don't have a project, but I have added a failing test to the codebase that reproduces the behavior:

https://github.com/nora-heydecker-axa/plugins/pull/new/failing-test-issue-line-comment

Expected behavior

The line comment is stripped.

Additional context

styled-components rewrote its line comment stripper in styled-components/styled-components#5635, which broke our styles because we have closing braces after a line comment. it used to be that everything was ignored and kind of worked, but now styled-components strips our line comment, including the closing braces (because this plugin minifies them onto the same line), completely breaking the syntax.
we were able to work around it easily of course by just using a normal CSS comment or moving the line comment.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions