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

crisbeto · alxhub · commit e112e320bf6c · 2021-03-30T16:57:44.000-07:00
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
diff --git a/packages/compiler/src/render3/view/styling_builder.ts b/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('--');
 }
diff --git a/packages/core/test/acceptance/styling_spec.ts b/packages/core/test/acceptance/styling_spec.ts
@@ -294,6 +294,29 @@ describe('styling', () => {
       const header = fixture.nativeElement.querySelector('h1') as HTMLElement;
       expect(getComputedStyle(header).getPropertyValue('width')).toEqual('100px');
     });
+
+    it('should support case-sensitive css variables', () => {
+      // This test only works in browsers which support CSS variables.
+      if (!supportsCssVariables) {
+        return;
+      }
+
+      @Component({
+        template: `
+          <div [style.--MyVar]="'100px'">
+            <span style="width: var(--MyVar)">CONTENT</span>
+          </div>
+        `
+      })
+      class Cmp {
+      }
+      TestBed.configureTestingModule({declarations: [Cmp]});
+      const fixture = TestBed.createComponent(Cmp);
+      fixture.detectChanges();
+
+      const span = fixture.nativeElement.querySelector('span') as HTMLElement;
+      expect(getComputedStyle(span).getPropertyValue('width')).toEqual('100px');
+    });
   });
 
   modifiedInIvy('shadow bindings include static portion')

Original file line number	Diff line number	Diff line change
`@@ -219,7 +219,11 @@ export class StylingBuilder {`
`219`	`219`	`if (isEmptyExpression(value)) {`
`220`	`220`	`return null;`
`221`	`221`	`}`
`222`		`- name = normalizePropName(name);`
	`222`	`+ // CSS custom properties are case-sensitive so we shouldn't normalize them.`
	`223`	`+ // See: https://www.w3.org/TR/css-variables-1/#defining-variables`
	`224`	`+ if (!isCssCustomProperty(name)) {`
	`225`	`+ name = hyphenate(name);`
	`226`	`+ }`
`223`	`227`	`const {property, hasOverrideFlag, suffix: bindingSuffix} = parseProperty(name);`
`224`	`228`	`suffix = typeof suffix === 'string' && suffix.length !== 0 ? suffix : bindingSuffix;`
`225`	`229`	`const entry:`
`@@ -607,6 +611,10 @@ function getStylePropInterpolationExpression(interpolation: Interpolation) {`
`607`	`611`	`}`
`608`	`612`	`}`
`609`	`613`
`610`		`-function normalizePropName(prop: string): string {`
`611`		`- return hyphenate(prop);`
	`614`	`+/**`
	`615`	`+ * Checks whether property name is a custom CSS property.`
	`616`	`+ * See: https://www.w3.org/TR/css-variables-1`
	`617`	`+ */`
	`618`	`+function isCssCustomProperty(name: string): boolean {`
	`619`	`+ return name.startsWith('--');`
`612`	`620`	`}`