fix: allow expression to be used as key-value pair or block in embedded css #712
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
We currently use the pattern
dpr1nt_00_d
(number part incremented by occurrence) for placeholder for expression occurrence in template literals. This causes a problem when the expression used as key-value pair (or block) replacement in embedded CSS template literals. This happens becausedpr1nt_00_d
only works as key or value of property in CSS, and it doesn't work as key-value pair replacement.This PR tries to fix it by using the pattern
@dpr1nt_00_d
in CSS template literals, and changing the css syntax to LESS. In LESS@var
can be both values and mixins (mixin works as replacement of key-value pair).Note: prettier uses
@prettier-placeholder-0-id
for placeholder. ref https://github.com/prettier/prettier/blob/d75b21f4b6e86f5751738f51083d685bb4a97965/src/language-js/embed/css.js#L18-L20related denoland/deno#29337