Fix autofix for nested tagged template literals

[hudochenkov]

Clearly describe the bug

Incorrect output with --fix when CSS-in-JS has tagged template literal inside tagged template literal. It's a bug with postcss-jsx. I've opened issue in related repository. But it won't be fixed any time soon, because @gucong3000 currently is not available, and the fix will require a lot of time invested.

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

None.

What CSS is needed to reproduce the bug?

import styled, { css } from 'styled-components';
const Message = styled.p`
	padding: 10px;
	${(props) => css`
		color: #b02d00;
	`}
	${(props2) => css`
		border-color: red;
	`}
`;

What stylelint configuration is needed to reproduce the bug?

Any config as it's related to parser only.

{
  "rules": {
  }
}

Which version of stylelint are you using?

10.1.0

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

stylelint "**/*.js" --fix

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

Yes, CSS-in-JS.

What did you expect to happen?

Output is the same as input, because no rules were run.

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

Output code is broken JavaScript:

import styled, { css } from 'styled-components';
const Message = styled.p`
	padding: 10px;
	${(props) => css`
		color: #b02d00;
	`}
	${(props2) => css`
		border-color: red;
	`}

		color: #b02d00;
	`}
	${(props2) => css`
		border-color: red;
	`}
`;

Temporary solution is to refactor input code to not have nested tagged template literals:

// Before
const Message = styled.p`
	padding: 10px;

	${(props) => css`
		color: #b02d00;
	`}
`;

// After
const Message = styled.p`
	padding: 10px;

	${variant}
`;

const variant = (props) => css`
	color: #b02d00;
`;

[jeddy3]

We've forked the parser we use for CSS-in-JS into stylelint organisation, and we're looking for help to fix our fork to close this issue.

See #4574.

[jeddy3]

Since 13.2.0 stylelint will no longer attempt to autofix sources containing this pattern, making the autofix feature safer to use.

However, the underlying issue remains in the parser that stylelint uses to support this syntax. Please consider contributing to the parser if you'd like to see this issue resolved fully.

[row248-hola]

I don't get it. Was it fixed or just closed?

[isellsoap]

@row248-hola See #4119 (comment). It’s just closed, not fixed.