Closed haotan19 closed 1 year ago
We should be clearer that we have no intention of supporting this (since this is a LiquidHTML prettier plugin).
Our recommendation is the following:
.css
files that refer to those custom CSS propertiesExample:
theme.liquid
<style>
:root {
--accent-colour: {{ some_setting }};
}
</style>
styles.css
button.accent {
color: var(--accent-colour);
}
You can see this pattern used in the Dawn repo.
Pros of this approach:
I see that the solve here is "don't put CSS in liquid files" so I'll refactor away, but I just wanted to document my problem here.
If I put
// Comment
.mobile-menu {
display: block;
}
// Longer comment to force a line break
.page-faqs
.name-long-enough-to-force-a-line-break-from-the-linter {
display: block;
}
into a custom.scss.liquid file, this plugin transforms it to
// Comment .mobile-menu { display: block; }
// Longer comment to force a line break .page-faqs .name-long-enough-to-force-a-line-break-from-the-linter { display:
block; }
which caused a transformation error and a bunch of styles to go missing.
I'm not around Shopify enough to know why someone did a custom.scss.liquid file in the first place; I'm hoping that I'll move this to a scss file and be able to move on. But if someone has to use a file like that, seems like it'll be very hard to make it work.
Describe the bug A clear and concise description of what the bug is.
Unformatted source
Expected output
Actual output
Debugging information