Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.40.1

Current Behavior

When you use prettier for css and you have a long property that breaks in lines the output renders the new lines and breaks the css.
input
`
.my-component {
--theme-primary-color: #2c3e50;
--theme-primary-opacity: 10%;
--theme-secondary-color: #0a0a0a;
--theme-secondary-opacity: 20%;

display: block;
color: color-mix(
in srgb,
var(--theme-primary-color) var(--theme-primary-opacity),
var(--theme-secondary-color) var(--theme-secondary-opacity)
);
}
`

output
.my-component { --theme-primary-color: #2c3e50; --theme-primary-opacity: 10%; --theme-secondary-color: #0a0a0a; --theme-secondary-opacity: 20%; display: block; color: color-mix(\n in srgb, \n var(--theme-primary-color) var(--theme-primary-opacity), \n var(--theme-secondary-color) var(--theme-secondary-opacity) \n); }

Expected Behavior

css property should render in single line

`
.my-component {
--theme-primary-color: #2c3e50;
--theme-primary-opacity: 10%;
--theme-secondary-color: #0a0a0a;
--theme-secondary-opacity: 20%;

display: block;
color: color-mix(in srgb, var(--theme-primary-color) var(--theme-primary-opacity), var(--theme-secondary-color) var(--theme-secondary-opacity));
}
`

System Info

Steps to Reproduce

inspect rendered css on den tools

Code Reproduction URL

https://github.com/adoumas/stencil-css-bug

Additional Information

No response