test: repro issue with important styles and whitespace

packages/@lwc/integration-karma/test/rendering/important-styles/index.spec.js

@@ -0,0 +1,14 @@
+import { createElement } from 'lwc';
+import Component from 'x/component';
+
+it('should render !important styles correctly', async () => {
+    const elm = createElement('x-component', { is: Component });
+    document.body.appendChild(elm);
+
+    await Promise.resolve();
+
+    for (const div of elm.shadowRoot.querySelectorAll('div')) {
+        expect(div.style.getPropertyValue('color')).toBe('red');
+        expect(div.style.getPropertyPriority('color')).toBe('important');
+    }
+});

packages/@lwc/integration-karma/test/rendering/important-styles/x/component/component.html

@@ -0,0 +1,9 @@
+<template>
+    <div style="color: red !important "></div>
+    <div style="color: red !important ;"></div>
+    <div style="color: red  !important "></div>
+    <div style="color: red  !important ;"></div>
+    <div style="color: red ! important;"></div>
+    <div style="color: red ! important"></div>
+    <div style="  color  :  red  !  important  ;  "></div>
+</template>

packages/@lwc/integration-karma/test/rendering/important-styles/x/component/component.js

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