Nested tagged template literals aren't being ignored by --fix

[ekfuhrmann]

Clearly Describe the Bug

When using Styled Componenets and saving the following, the stylelint autofix results in broken code:

const Text= styled.p`
  ${props => props.size === "xl" && css`
    font-size: 32rem;
  `}
`

// Saves to

const Text= styled.p`
   ${props => props.size === "xl" && css`
    font-size: 32rem;
  `
`

It is omitting the final } causing the code to break. Is there some way I can audit what rules run on save to perhaps identify the conflicting styelint rule?

---

What code is needed to reproduce this issue?

e.g.

const Text= styled.p`
  ${props => props.size === "xl" && css`
    font-size: 32rem;
  `}
`

What vscode-stylelint configuration is needed to reproduce the bug?

{
  "plugins": [
    "stylelint-order",
    "stylelint-prettier"
  ],
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-styled-components",
    "stylelint-config-rational-order"
  ],
  "rules": {
    "prettier/prettier": true,
    "order/order": [
      "custom-properties",
      "declarations"
    ],
    "no-eol-whitespace": null
  }
}

Is this issue related to autofix? (editor.codeActionsOnSave)

Yes

Which version of vscode-stylelint are you using?

0.86.0

Which version of stylelint are you using?

13.13.1

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

Yes, it's related to passing props into a Styled Componenet

What did you expect to happen?

For the stylelint to not format away my closing bracket.

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

No warnings or errors.

[ekfuhrmann]

This seems to have been a prettier issue rather than a stylelint issue. I'm still trying to get to the root of it, but once I ran Format Document With... in vscode, and selected a different formatter it worked. Oddly enough now I can't get this behavior to happen again.

[ekfuhrmann]

Reopening this issue as it has started to act up again. I've identified that this is related to this issue.

I'm using stylelint 13.13.1, so it seems like the parser isn't always ignoring the pattern. I did manage to get it to ignore the pattern for a bit, but after another day or so and it's acting up again with no clear path to satisfying it.

Is there a safe way for me to tell stylelint parser to ignore this pattern in this instance?

/* stylelint-disable */ is not working, nor is .stylelintignore. Which probably explains why this is getting "fixed" when it should not!

[adalinesimonian]

vscode-stylelint doesn't contribute any fixes itself, Stylelint does all of the fixing/formatting. I know that there is an umbrella issue over at the main Stylelint repository tracking CSS-in-JS issues: stylelint/stylelint#4574. If this issue can be reliably reproduced only in vscode-stylelint and not Stylelint itself, feel free to reopen this issue. Otherwise, I think the linked Stylelint issue may be a good starting point to see if this is a problem that's already been noted or if a new issue needs to be opened at the Stylelint repository. I saw another issue there about nested tagged template literals, but I'm not certain it's the same issue you're experiencing: stylelint/stylelint#4119.

[ekfuhrmann]

Just wanted to leave an update here that it seems like the latest update has resolved this issue with no special action taken on my part.