[lit-html] Allow numbers to be used as values in styleMap() (#3788)

lit · Apr 5, 2023 · 88fe039 · 88fe039
1 parent ab4e9c9
commit 88fe039
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git a/.changeset/slimy-clouds-roll.md b/.changeset/slimy-clouds-roll.md
@@ -0,0 +1,6 @@
+---
+'lit-html': patch
+'lit': patch
+---
+
+Allow numbers to be used as values in styleMap()
diff --git a/packages/lit-html/src/directives/style-map.ts b/packages/lit-html/src/directives/style-map.ts
@@ -21,7 +21,7 @@ import {
  * for CSSStyleDeclaration like `backgroundColor`.
  */
 export interface StyleInfo {
-  [name: string]: string | undefined | null;
+  [name: string]: string | number | undefined | null;
 }
 
 const important = 'important';
@@ -101,11 +101,14 @@ class StyleMapDirective extends Directive {
       const value = styleInfo[name];
       if (value != null) {
         this._previousStyleProperties.add(name);
-        const isImportant = value.endsWith(importantFlag);
+        const isImportant =
+          typeof value === 'string' && value.endsWith(importantFlag);
         if (name.includes('-') || isImportant) {
           style.setProperty(
             name,
-            isImportant ? value.slice(0, flagTrim) : value,
+            isImportant
+              ? (value as string).slice(0, flagTrim)
+              : (value as string),
             isImportant ? important : ''
           );
         } else {

diff --git a/packages/lit-html/src/test/directives/style-map_test.ts b/packages/lit-html/src/test/directives/style-map_test.ts
@@ -79,15 +79,27 @@ suite('styleMap', () => {
   });
 
   test('adds and updates properties', () => {
-    renderStyleMap({marginTop: '2px', 'padding-bottom': '4px', opacity: '0.5'});
+    renderStyleMap({
+      marginTop: '2px',
+      'padding-bottom': '4px',
+      opacity: '0.5',
+      'z-index': 10,
+    });
     const el = container.firstElementChild as HTMLElement;
     assert.equal(el.style.marginTop, '2px');
     assert.equal(el.style.paddingBottom, '4px');
     assert.equal(el.style.opacity, '0.5');
-    renderStyleMap({marginTop: '4px', paddingBottom: '8px', opacity: '0.55'});
+    assert.equal(el.style.zIndex, '10');
+    renderStyleMap({
+      marginTop: '4px',
+      paddingBottom: '8px',
+      opacity: '0.55',
+      'z-index': 1,
+    });
     assert.equal(el.style.marginTop, '4px');
     assert.equal(el.style.paddingBottom, '8px');
     assert.equal(el.style.opacity, '0.55');
+    assert.equal(el.style.zIndex, '1');
   });
 
   test('removes properties', () => {