[lit-html] Fix styleMap initial render of mixed-case custom props (#3766

)

.changeset/pink-teachers-brush.md

@@ -0,0 +1,7 @@
+---
+'lit-html': patch
+'lit': patch
+'lit-element': patch
+---
+
+Fix styleMap initial render of mixed-case custom props

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

@@ -60,9 +60,11 @@ class StyleMapDirective extends Directive {
       // Exception is any property name containing a dash, including
       // custom properties; we assume these are already dash-cased i.e.:
       //  `--my-button-color` --> `--my-button-color`
-      prop = prop
-        .replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, '-$&')
-        .toLowerCase();
+      prop = prop.includes('-')
+        ? prop
+        : prop
+            .replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, '-$&')
+            .toLowerCase();
       return style + `${prop}:${value};`;
     }, '');
   }
@@ -126,8 +128,10 @@ class StyleMapDirective extends Directive {
  *
  * `styleMap` can only be used in the `style` attribute and must be the only
  * expression in the attribute. It takes the property names in the
- * {@link StyleInfo styleInfo} object and adds the property values as CSS
- * properties. Property names with dashes (`-`) are assumed to be valid CSS
+ * {@link StyleInfo styleInfo} object and adds the properties to the inline
+ * style of the element.
+ *
+ * Property names with dashes (`-`) are assumed to be valid CSS
  * property names and set on the element's style object using `setProperty()`.
  * Names without dashes are assumed to be camelCased JavaScript property names
  * and set on the element's style object using property assignment, allowing the

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

@@ -12,8 +12,9 @@ import {assert} from '@esm-bundle/chai';
 const ua = window.navigator.userAgent;
 const isChrome41 = ua.indexOf('Chrome/41') > 0;
 const isIE = ua.indexOf('Trident/') > 0;
+const supportsCSSVariables = isIE || isChrome41;
 const testIfSupportsCSSVariables = (test: any) =>
-  isIE || isChrome41 ? test.skip : test;
+  supportsCSSVariables ? test.skip : test;
 
 suite('styleMap', () => {
   let container: HTMLDivElement;
@@ -56,6 +57,7 @@ suite('styleMap', () => {
           backgroundColor: 'blue',
           webkitAppearance: 'none',
           ['padding-left']: '4px',
+          '--fooBar': 'red',
         })}
       ></div>`,
       container
@@ -66,6 +68,10 @@ suite('styleMap', () => {
     assert.equal(style.backgroundColor, 'blue');
     assert.include(['none', undefined], style.webkitAppearance);
     assert.equal(style.paddingLeft, '4px');
+    if (supportsCSSVariables) {
+      assert.equal(style.getPropertyValue('--fooBar'), 'red');
+      assert.equal(style.getPropertyValue('--foobar'), '');
+    }
   });
 
   test('first render skips undefined properties', () => {