From 36feb9eb65561e32e2d93bad8e321dd9424aa25f Mon Sep 17 00:00:00 2001
From: regevbr <regevbr@gmail.com>
Date: Tue, 28 Mar 2023 16:51:10 +0300
Subject: [PATCH] fix #3767 [lit-html] styleMap fails when update contains
 priority directive

---
 .changeset/popular-shoes-carry.md                 |  6 ++++++
 .eslintignore                                     |  1 +
 .gitignore                                        |  1 +
 .prettierignore                                   |  1 +
 packages/lit-html/src/directives/style-map.ts     | 11 ++++++++---
 .../src/test/directives/style-map_test.ts         | 15 +++++++++++++++
 6 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/popular-shoes-carry.md

diff --git a/.changeset/popular-shoes-carry.md b/.changeset/popular-shoes-carry.md
new file mode 100644
index 0000000000..3197a2ee53
--- /dev/null
+++ b/.changeset/popular-shoes-carry.md
@@ -0,0 +1,6 @@
+---
+'lit-html': patch
+'lit': patch
+---
+
+[lit-html] styleMap fails when update contains priority directive
diff --git a/.eslintignore b/.eslintignore
index 6a45bbf03f..65091ffbf2 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -10,6 +10,7 @@ node_modules/
 .vscode/
 .wireit
 /temp
+.idea
 
 packages/benchmarks/generated/
 packages/benchmarks/generator/build/
diff --git a/.gitignore b/.gitignore
index 69dc66460c..37ef98302e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ node_modules/
 .vscode/
 .wireit
 /temp
+.idea
diff --git a/.prettierignore b/.prettierignore
index 6fde3fa83c..3ad2cb103c 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -10,6 +10,7 @@ node_modules/
 .vscode/
 .wireit
 /temp
+.idea
 
 packages/benchmarks/generated/
 packages/benchmarks/generator/build/
diff --git a/packages/lit-html/src/directives/style-map.ts b/packages/lit-html/src/directives/style-map.ts
index 5a77c67605..3370521b54 100644
--- a/packages/lit-html/src/directives/style-map.ts
+++ b/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;
         }
       }
     }
diff --git a/packages/lit-html/src/test/directives/style-map_test.ts b/packages/lit-html/src/test/directives/style-map_test.ts
index 6f607e883f..eceef044da 100644
--- a/packages/lit-html/src/test/directives/style-map_test.ts
+++ b/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);