Fix autofix for switch statements within literals

[Newbie012]

Clearly describe the bug

When I try to write a nested switch case inside a react component with styled-components while using the literal css, it duplicates a lot of lines that shouldn't be appended.

const Button = styled.button<Props>`
  border: 2px solid var(--border-color);
  background-color: var(--background-color);

  ${(props) => {
    switch (props.variant) {
      case "filled":
        return css`
          --background-color: #ffca28;
          --foreground-color: #000;
        `;
      case "outlined":
        return css`
          --background-color: transparent;
          --foreground-color: #fff;
          --border-color: #fff;
        `;
      case "soft":
        return css`
          --background-color: rgba(255, 255, 255, 0.12);
          --foreground-color: #fff;
        `;
    }
  }}

  :disabled {
    opacity: 0.5;
  }

  :hover:not(:disabled) {
    opacity: 0.8;
  }
`;

Which rule, if any, is the bug related to?

I'm not sure if it's related to "stylelint-config-recommended" or stylelint-config-styled-components.

What code is needed to reproduce the bug?

Given the code above, on a fix, it will be saved as:

const Button = styled.button<Props>`
  border: 2px solid var(--border-color);
  background-color: var(--background-color);


  ${(props) => {
    switch (props.variant) {
      case "filled":
        return css`
          --background-color: #ffca28;
          --foreground-color: #000;
        `;
      case "outlined":
        return css`
          --background-color: transparent;
          --foreground-color: #fff;
          --border-color: #fff;
        `;
      case "soft":
        return css`
          --background-color: rgba(255, 255, 255, 0.12);
          --foreground-color: #fff;
        `;
    }
  }}

  :disabled {
    opacity: 0.5;
  }

  :hover:not(:disabled) {
    opacity: 0.8;
  }
+
+          --background-color: #ffca28;
+          --foreground-color: #000;
+        `;
+      case "outlined":
+        return css`
+          --background-color: transparent;
+          --foreground-color: #fff;
+          --border-color: #fff;
+        `;
+      case "soft":
+        return css`
+          --background-color: rgba(255, 255, 255, 0.12);
+          --foreground-color: #fff;
+        `;
+    }
+  }}
+
+  :disabled {
+    opacity: 0.5;
+  }
+
+  :hover:not(:disabled) {
+    opacity: 0.8;
+  }
`;

What stylelint configuration is needed to reproduce the bug?

{
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components",
    "stylelint-config-idiomatic-order"
  ]
}

Which version of stylelint are you using?

    "stylelint": "^13.7.2",
    "stylelint-config-idiomatic-order": "^8.1.0",
    "stylelint-config-recommended": "^3.0.0",
    "stylelint-config-styled-components": "^0.1.1",

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

npm script "lint:css:fix": "stylelint src --fix"

Does the bug relate to non-standard syntax (e.g. SCSS, Less etc.)?

Yes, it's related to styled-components

What did you expect to happen?

Not to duplicate the code mentioned above

What actually happened (e.g. what warnings or errors did you get)?

It has duplicated almost all of my switch case code and what came below.

[jeddy3]

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

It's likely a problem with the parser stylelint uses to support CSS-in-JS. I've added this issue to #4574, which is a growing list of the problems with the syntax that we need help to fix.

Please consider contributing to the parser if you have time.

As this is a corruption caused by autofix, we can add a temporary workaround that would turn off autofix for files that contain the switch construct.

[jeddy3]

Closing as the syntax option was removed for the 14.0.0 release. (See the migration guide.)

We'll also be deprecating our forked CSS-in-JS package, in favour of leaner custom syntaxes.

Please consider writing a custom syntax specific to the CSS-in-JS library in this issue and fixing the bug there.