Saving duplicates lines of code in Styled Component css literal object

[jonchoukroun]

Describe the issue. Is it a bug or a feature request (new rule, new option, etc.)?

I ran into a bug when saving a typescript file containing a css object, where the css block was duplicated.

Which rule, if any, is this issue related to?

This doesn't seem related to any specific rule, as far as I can tell.

What CSS is needed to reproduce this issue?

import { createGlobalStyle, css } from 'styled-components';

export default createGlobalStyle`
  ${props => css`
    html {
      height: 100%;

      body {
        display: flex;
        flex-direction: column;
        height: 100%;
        margin: 0;

        #root {
          background: radial-gradient(#282c34cc, #282c34);
          color: #e9e9e9;
          display: flex;
          font-family: sans-serif;
          height: 100%;
          justify-content: center;
          padding: 15px;
        }
      }
    }
  `}
`;

What stylelint configuration is needed to reproduce this issue?

I haven't configured stylelint so the default should reproduce this bug.

Which version of stylelint are you using?

0.81.0

How are you running stylelint: CLI, PostCSS plugin, Node API?

I just installed the extension - no config, not running it.

Does your issue relate to non-standard syntax (e.g. SCSS, nesting, etc.)?

I don't think so (see above).

What did you expect to happen?

I expected the file to save.

What actually happened (e.g. what warnings or errors you are getting)?

The file saved, but duplicated the html block above.

[jeddy3]

@jonchoukroun Thanks for the report and for using the template.

This is an issue with stylelint itself, or rather in the CSS-in-JS parser that stylelint users to support styled-components. We recently added a workaround so that sources with nested template literals are no longer corrupted. You can track the underlying issue at stylelint/stylelint#4119.