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

)

.changeset/popular-shoes-carry.md

@@ -0,0 +1,6 @@
+---
+'lit-html': patch
+'lit': patch
+---
+
+Fix styleMap's handling of important flags

.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,12 @@ export interface StyleInfo {
   [name: string]: string | undefined | null;
 }
 
+const important = 'important';
+// The leading space is important
+const importantFlag = ' !' + important;
+// How many characters to remove from a value, as a negative number
+const flagTrim = 0 - importantFlag.length;
+
 class StyleMapDirective extends Directive {
   _previousStyleProperties?: Set<string>;
 
@@ -95,8 +101,13 @@ class StyleMapDirective extends Directive {
       const value = styleInfo[name];
       if (value != null) {
         this._previousStyleProperties.add(name);
-        if (name.includes('-')) {
-          style.setProperty(name, value);
+        const isImportant = value.endsWith(importantFlag);
+        if (name.includes('-') || isImportant) {
+          style.setProperty(
+            name,
+            isImportant ? value.slice(0, flagTrim) : value,
+            isImportant ? important : ''
+          );
         } else {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           (style as any)[name] = value;

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);