Closed its-anas closed 1 year ago
Yeah. That's expected behaviour unfortunately. We can't parse Liquid AND CSS. Only "valid" CSS will be pretty printed.
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.
Thanks @charlespwd
Describe the bug A clear and concise description of what the bug is.
Unformatted source![image](https://user-images.githubusercontent.com/84609280/189484466-8f938b1b-dedf-4d18-aab7-7109099eb1b8.png)
Actual output![image](https://user-images.githubusercontent.com/84609280/189484493-333ca777-5d73-45fd-8d9a-54448256378f.png)
Debugging information
Additional information Where there is tags inside the CSS tags the formatter doesn't work