From e8098e1cfd1a30999d151ea275971f8b5bd4bf8e Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Fri, 27 Sep 2024 10:57:19 -0700 Subject: [PATCH] fix(template-compiler): styles containing newlines (#4580) Fixes #4579 --- .../test/regression/style-newline/index.spec.js | 16 ++++++++++++++++ .../style-newline/x/component/component.html | 9 +++++++++ .../style-newline/x/component/component.js | 3 +++ .../template-compiler/src/codegen/helpers.ts | 2 +- 4 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 packages/@lwc/integration-karma/test/regression/style-newline/index.spec.js create mode 100644 packages/@lwc/integration-karma/test/regression/style-newline/x/component/component.html create mode 100644 packages/@lwc/integration-karma/test/regression/style-newline/x/component/component.js diff --git a/packages/@lwc/integration-karma/test/regression/style-newline/index.spec.js b/packages/@lwc/integration-karma/test/regression/style-newline/index.spec.js new file mode 100644 index 0000000000..0726aa0fc3 --- /dev/null +++ b/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'); +}); diff --git a/packages/@lwc/integration-karma/test/regression/style-newline/x/component/component.html b/packages/@lwc/integration-karma/test/regression/style-newline/x/component/component.html new file mode 100644 index 0000000000..b021a2147e --- /dev/null +++ b/packages/@lwc/integration-karma/test/regression/style-newline/x/component/component.html @@ -0,0 +1,9 @@ + diff --git a/packages/@lwc/integration-karma/test/regression/style-newline/x/component/component.js b/packages/@lwc/integration-karma/test/regression/style-newline/x/component/component.js new file mode 100644 index 0000000000..ca8dce94e0 --- /dev/null +++ b/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 {} diff --git a/packages/@lwc/template-compiler/src/codegen/helpers.ts b/packages/@lwc/template-compiler/src/codegen/helpers.ts index 47ada2f26a..40323de6e9 100644 --- a/packages/@lwc/template-compiler/src/codegen/helpers.ts +++ b/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