Fixed incorrect parsing/stringifying for nested tagged template literals

[ota-meshi]

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

refs gucong3000#53

Is there anything in the PR that needs further explanation?

I solved the nested template problem by making the nested template literal a child node.

[hudochenkov]

That's a tremendous work! Thank you for fixing this!

[hudochenkov]

I noticed that in every test there is css function before nested template literal. Will this work without it? E. g.

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

Could you add a test for this, please?

[ota-meshi]

Hi @hudochenkov.

I have added your requested test case.
https://github.com/stylelint/postcss-css-in-js/pull/17/files#diff-afcadaa7a1aaa2ea2d86507936d47fba

But this case doesn't parse the template literal inside as CSS. The inside template literal is converted to a literal node with no child nodes.

TaggedTemplateExpression is required to parse as CSS.

[hudochenkov]

Thank you!

I think it's totally ok, because it impossible to know what inside template literal without the tag.

[hudochenkov]

Amazing work!

[jeddy3]

Excellent stuff. Am I right in thinking that this will fix stylelint/stylelint#4119, and therefore we'll need to remove the corresponding workaround?

Once #19 is merged, let's rebase this pull request.

[jeddy3]

Fantastic.

[ota-meshi]

In my opinion, there is no need for a workaround, as it fixes the problem that toString breaks. However, changes to the AST might cause unexpected and incorrect reports.