I am working a webpage with some CSS variables, but when I press Ctrl + Shift + F (same as Source > Format) it breaks my CSS variables. For example, this is my style element before a format:
<style>
:root {
--btn-width: 48%;
}
.apply-background {
background-image: url([[@{/brand-icons/banner.png}]]);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.card {
width: 22%;
background-color: lightsteelblue;
}
.btn {
width: var(--btn-width);
}
.btn-right {
float: right;
}
</style>
And this is after a format:
:root { -
-btn-width: 48%;
}
.apply-background {
background-image: url([[@{/brand-icons/banner.png}]]);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.card {
width: 22%;
background-color: lightsteelblue;
}
.btn {
width: var(- -btn-width);
}
.btn-right {
float: right;
}
You can see that the autoformat is creating a newline between the two hyphens that precede CSS variables, which is breaking the code.
Is there a fix for this?