[lit-html] styleMap fails when update contains priority directive

.changeset/popular-shoes-carry.md

@@ -0,0 +1,6 @@
+---
+'lit-html': patch
+'lit': patch
+---
+
+[lit-html] styleMap fails when update contains priority directive

.eslintignore

@@ -10,6 +10,7 @@ node_modules/
 .vscode/
 .wireit
 /temp
+.idea
 
 packages/benchmarks/generated/
 packages/benchmarks/generator/build/

.gitignore

@@ -5,3 +5,4 @@ node_modules/
 .vscode/
 .wireit
 /temp
+.idea

.prettierignore

@@ -10,6 +10,7 @@ node_modules/
 .vscode/
 .wireit
 /temp
+.idea
 
 packages/benchmarks/generated/
 packages/benchmarks/generator/build/

packages/lit-html/src/directives/style-map.ts

@@ -24,6 +24,9 @@ export interface StyleInfo {
   [name: string]: string | undefined | null;
 }
 
+const IMPORTNAT_PRIORITY = 'important';
+const IMPORTANT_DIRECTIVE = '!important';
+
 class StyleMapDirective extends Directive {
   _previousStyleProperties?: Set<string>;
 
@@ -95,11 +98,13 @@ class StyleMapDirective extends Directive {
       const value = styleInfo[name];
       if (value != null) {
         this._previousStyleProperties.add(name);
-        if (name.includes('-')) {
-          style.setProperty(name, value);
+        const valueToUse = value.replace(IMPORTANT_DIRECTIVE, '');
+        const priority = valueToUse !== value ? IMPORTNAT_PRIORITY : '';
+        if (name.includes('-') || priority) {
+          style.setProperty(name, valueToUse, priority);
         } else {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          (style as any)[name] = value;
+          (style as any)[name] = valueToUse;
         }
       }
     }

packages/lit-html/src/test/directives/style-map_test.ts

@@ -133,6 +133,21 @@ suite('styleMap', () => {
     assert.equal(el.style.getPropertyValue('--size'), '');
   });
 
+  test('adds priority in updated properties', () => {
+    renderStyleMap({color: 'blue !important'});
+    const el = container.firstElementChild as HTMLElement;
+    assert.equal(el.style.getPropertyValue('color'), 'blue');
+    assert.equal(el.style.getPropertyPriority('color'), 'important');
+    renderStyleMap({color: 'green !important'});
+    assert.equal(el.style.getPropertyValue('color'), 'green');
+    assert.equal(el.style.getPropertyPriority('color'), 'important');
+    renderStyleMap({color: 'red'});
+    assert.equal(el.style.getPropertyValue('color'), 'red');
+    assert.equal(el.style.getPropertyPriority('color'), '');
+    renderStyleMap({});
+    assert.equal(el.style.getPropertyValue('color'), '');
+  });
+
   test('works when used with the same object', () => {
     const styleInfo: StyleInfo = {marginTop: '2px', 'padding-bottom': '4px'};
     renderStyleMap(styleInfo);