Proposal: refactor css placeholder for TemplateLiteral

CSS in template literals is first added in #2102 @prettier-placeholder is choosed to be a placeholder for template quasis.

Now problem is TemplateLiteral could be anywhere of the css code

as tag

${as-tag}{}
@prettier-placeholder{}

tag selector became a at-rule, but we handled in at-rule

as part of tag

foo${as-part-of-tag}{}
foo@prettier-placeholder{}

foo[${as-part-of-selector}]{}
foo[@prettier-placeholder]{}

foo@prettier-placeholder is not a legal tag,postcss-selector-parser can parse currectly, but might cause problem in future,

bug1 bug2

as value

div{
  font: bar${as-part-of-selector}
}
div{
  font: bar@prettier-placeholder
}

bar@prettier-placeholder will be to values, a word and a at-word,

bug

will comment more details

[fisker]

@yveslange turns out, it’s kind related, template literal in css prop, will be lowercased and not get restored. If i use the same placeholder logic for html, the issues will got fixed.

your issue template literal as css delc is more complicated, but I already come up a possible solution, html placeholders in css can be replaced with css placeholders to parse and then restore to html placeholders, need test later. first I’m going to finish this proposal.

[thorn0]

will be lowercased and not get restored

Sounds like a manifestation of #4090, which will be fixed by #6778.