v0.4 new formatting feature doesn't work inside CSS tags same like it does for JS tags

[its-anas]

Describe the bug A clear and concise description of what the bug is.

Unformatted source

Actual output

Debugging information

• OS [Windows, Mac]
• Version [0.4.0]

Additional information Where there is tags inside the CSS tags the formatter doesn't work

[charlespwd]

Yeah. That's expected behaviour unfortunately. We can't parse Liquid AND CSS. Only "valid" CSS will be pretty printed.

https://github.com/Shopify/prettier-plugin-liquid/pull/88#:~:text=A%20note%20about%20Liquid%2Din%2DJS/CSS/JSON%2Din%2DLiquid

What you can do here is have a "ugly" CSS+Liquid tag that defines CSS variables, and then use those CSS variables inside the other tags. A bit like what the Dawn theme does.

<style>
:root {
  --some-var: {{ section.settings.text }};
}
</style>
<style>
.class, #some-id { display: var(--some-var); }
</style>

Note that it will work in JS if you include your ~CSS~ Liquid inside strings. Since the JS parser will recognize those as strings and won't care about the {{ }} inside them.

[its-anas]

Thanks @charlespwd