fix(compiler): handle case-sensitive CSS custom properties (#41380)

Currently we normalize all CSS property names in the `StylingBuilder` which breaks custom properties, because they're case-sensitive. These changes add a check so that custom properties aren't normalized.

Fixes #41364.

PR Close #41380

packages/compiler/src/render3/view/styling_builder.ts

@@ -219,7 +219,11 @@ export class StylingBuilder {
     if (isEmptyExpression(value)) {
       return null;
     }
-    name = normalizePropName(name);
+    // CSS custom properties are case-sensitive so we shouldn't normalize them.
+    // See: https://www.w3.org/TR/css-variables-1/#defining-variables
+    if (!isCssCustomProperty(name)) {
+      name = hyphenate(name);
+    }
     const {property, hasOverrideFlag, suffix: bindingSuffix} = parseProperty(name);
     suffix = typeof suffix === 'string' && suffix.length !== 0 ? suffix : bindingSuffix;
     const entry:
@@ -607,6 +611,10 @@ function getStylePropInterpolationExpression(interpolation: Interpolation) {
   }
 }
 
-function normalizePropName(prop: string): string {
-  return hyphenate(prop);
+/**
+ * Checks whether property name is a custom CSS property.
+ * See: https://www.w3.org/TR/css-variables-1
+ */
+function isCssCustomProperty(name: string): boolean {
+  return name.startsWith('--');
 }