fix lit#3767 [lit-html] styleMap fails when update contains priority …

…directive
regevbr · Mar 28, 2023 · 2743734 · 2743734
1 parent 36feb9e
commit 2743734
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/.changeset/popular-shoes-carry.md b/.changeset/popular-shoes-carry.md
@@ -3,4 +3,4 @@
 'lit': patch
 ---
 
-[lit-html] styleMap fails when update contains priority directive
+Fix styleMap's handling of important flags
diff --git a/packages/lit-html/src/directives/style-map.ts b/packages/lit-html/src/directives/style-map.ts
@@ -24,8 +24,11 @@ export interface StyleInfo {
   [name: string]: string | undefined | null;
 }
 
-const IMPORTNAT_PRIORITY = 'important';
-const IMPORTANT_DIRECTIVE = '!important';
+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>;
@@ -98,13 +101,16 @@ class StyleMapDirective extends Directive {
       const value = styleInfo[name];
       if (value != null) {
         this._previousStyleProperties.add(name);
-        const valueToUse = value.replace(IMPORTANT_DIRECTIVE, '');
-        const priority = valueToUse !== value ? IMPORTNAT_PRIORITY : '';
-        if (name.includes('-') || priority) {
-          style.setProperty(name, valueToUse, priority);
+        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] = valueToUse;
+          (style as any)[name] = value;
         }
       }
     }