\t chapter in copy-pasted code

[volos-st]

• IDE name and version: WebStorm 2020.1.1 Build #WS-201.7223.93, built on April 30, 2020 Licensed to WebStorm Evaluator Expiration date: June 12, 2020 Runtime version: 11.0.6+8-b765.40 x86_64 VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o macOS 10.15.4 GC: ParNew, ConcurrentMarkSweep Memory: 2014M Cores: 4 Non-Bundled Plugins: com.jetbrains.plugins.ini4idea, org.intellij.plugins.postcss, org.intellij.plugins.hcl, com.deadlock.scsyntax, com.intellij.lang.jsgraphql
• Styled-components plugin version:

  1.1.2

  Problem description:

  When you copy-paste some code, it show with additional symbols \t\t\t\t. Please check gif file with problem. How I can fix it, thank you.

  

[vladsholokhov]

Hello @volos-st ! I see that you have a red line in your code example before @media, is that an error from some linter? Could you also tell does this happen only inside styled components or you can observe the same behavior in plain *.css? Thanks!

[volos-st]

Hy @vladsholokhov yes, it's an error from eslint, but I can reproduce the error with disabled eslint. It does only inside styled-components. All other css files (.css, and especially .scss) works as expected.

I have investigated deeply this problem and found how you can reproduce it

1. create a simple project with create react app
2. add styled-components to the project
3. VERY IMPORTANT - convert all indents to tabs
4. create new components for example

   const Div = styled.div`
   width: 1000px;
   .App-header {
       background-color: red;
       @media (max-width: 100px) {
           background-color: green;
       }
       @media (max-width: ${breakpoints.mobile}px) {
           background-color: green;
       }
   `;

   you must use tabs as indents symbols inside template string

5. copy-paste @media (max-width: ${breakpoints.mobile}px) {... block and you will have this problem
6. without js variable in template strings ${...} all works as expected

[vladsholokhov]

Thank you very much for the details! Reproduced.

Build #WS-202.4884, built on May 28, 2020
Non-Bundled Plugins: com.deadlock.scsyntax (1.1.2)

[denofevil]

This seems to be the problem in JavaScript language support, I've filed WEB-45802 with potential fix.