fix(template-compiler): styles containing newlines (#4580)

Fixes #4579

packages/@lwc/integration-karma/test/regression/style-newline/index.spec.js

@@ -0,0 +1,16 @@
+import { createElement } from 'lwc';
+import Component from 'x/component';
+
+it('should render style containing newline - issue #4579', async () => {
+    const elm = createElement('x-component', { is: Component });
+    document.body.appendChild(elm);
+
+    await Promise.resolve();
+
+    const div = elm.shadowRoot.querySelector('div');
+    expect(div.style.color).toBe('yellow');
+
+    const span = elm.shadowRoot.querySelector('span');
+    expect(span.style.color).toBe('purple');
+    expect(span.style.backgroundColor).toBe('orange');
+});

packages/@lwc/integration-karma/test/regression/style-newline/x/component/component.html

@@ -0,0 +1,9 @@
+<template>
+    <div style="color:
+    yellow"></div>
+
+    <span style="color:
+    purple;
+    background-color:
+    orange;"></span>
+</template>

packages/@lwc/integration-karma/test/regression/style-newline/x/component/component.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}

packages/@lwc/template-compiler/src/codegen/helpers.ts

@@ -217,7 +217,7 @@ function generateStylesheetTokens(codeGen: CodeGen): t.ExpressionStatement[] {
 }
 
 const DECLARATION_DELIMITER = /;(?![^(]*\))/g;
-const PROPERTY_DELIMITER = /:(.+)/;
+const PROPERTY_DELIMITER = /:(.+)/s; // `/s` (dotAll) required to match styles across newlines, e.g. `color: \n red;`
 
 // Borrowed from Vue template compiler.
 // https://github.com/vuejs/vue/blob/531371b818b0e31a989a06df43789728f23dc4e8/src/platforms/web/util/style.js#L5-L16