Quote CSS property names to avoid renaming.

Author: Sepand Parhami

src/img-dimensions.ts

@@ -106,7 +106,7 @@ function getDimensionsForScaleDown(
  */
 export function getRenderedDimensions(
     img: HTMLImageElement, containerSize: Size): Size {
-  const {objectFit} = getComputedStyle(img);
+  const objectFit = getComputedStyle(img).getPropertyValue('object-fit');
   const naturalSize = {
     width: img.naturalWidth,
     height: img.naturalHeight,

src/imitation-img.ts

@@ -52,18 +52,18 @@ export function createImitationImg(
   translateElement.appendChild(scaleElement);
 
   Object.assign(scaleElement.style, {
-    display: 'flex',
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: `${srcImgRect.width}px`,
-    height: `${srcImgRect.height}px`,
+    'display': 'flex',
+    'overflow': 'hidden',
+    'alignItems': 'center',
+    'justifyContent': 'center',
+    'width': `${srcImgRect.width}px`,
+    'height': `${srcImgRect.height}px`,
   });
 
   Object.assign(img.style, {
-    display: 'block',
-    width: `${imageDimensions.width}px`,
-    height: `${imageDimensions.height}px`,
+    'display': 'block',
+    'width': `${imageDimensions.width}px`,
+    'height': `${imageDimensions.height}px`,
   });
 
   return {

src/transform-img/crop-animation.ts

@@ -167,17 +167,17 @@ export function prepareCropAnimation({
   const endScale = toLarger ? neutralScale : scaleDown;
 
   Object.assign(scaleElement.style, styles, {
-    willChange: 'transform',
-    animationName: scaleKeyframesName,
-    animationTimingFunction: 'linear',
-    animationFillMode: 'forwards',
+    'willChange': 'transform',
+    'animationName': scaleKeyframesName,
+    'animationTimingFunction': 'linear',
+    'animationFillMode': 'forwards',
   });
 
   Object.assign(counterScaleElement.style, styles, {
-    willChange: 'transform',
-    animationName: counterScaleKeyframesName,
-    animationTimingFunction: 'linear',
-    animationFillMode: 'forwards',
+    'willChange': 'transform',
+    'animationName': counterScaleKeyframesName,
+    'animationTimingFunction': 'linear',
+    'animationFillMode': 'forwards',
   });
 
   return generateCropKeyframes({

src/transform-img/scale-animation.ts

@@ -61,10 +61,10 @@ export function prepareScaleAnimation({
   const endImgScale = toLarger ? neutralScale : scaleImgDown;
 
   Object.assign(element.style, styles, {
-    willChange: 'transform',
-    animationName: keyframesName,
-    animationTimingFunction: curveToString(curve),
-    animationFillMode: 'forwards',
+    'willChange': 'transform',
+    'animationName': keyframesName,
+    'animationTimingFunction': curveToString(curve),
+    'animationFillMode': 'forwards',
   });
 
   return `

src/transform-img/test-transform-img.ts

@@ -34,8 +34,8 @@ describe('prepareImageAnimation', () => {
   const curve = {x1: 0.8, y1: 0, x2: 0.2, y2: 1};
   const head = document.head!;
   const styles = {
-    animationFillMode: 'forwards',
-    animationDuration: '1000ms',
+    'animationFillMode': 'forwards',
+    'animationDuration': '1000ms',
   };
 
   function getReplacement() {

src/transform-img/translate-animation.ts

@@ -70,13 +70,13 @@ export function prepareTranslateAnimation({
   const deltaTop = startTop - endTop;
 
   Object.assign(element.style, styles, {
-    position: 'fixed',
-    top: `${endTop}px`,
-    left: `${endLeft}px`,
-    willChange: 'transform',
-    animationName: keyframesName,
-    animationTimingFunction: curveToString(curve),
-    animationFillMode: 'forwards',
+    'position': 'fixed',
+    'top': `${endTop}px`,
+    'left': `${endLeft}px`,
+    'willChange': 'transform',
+    'animationName': keyframesName,
+    'animationTimingFunction': curveToString(curve),
+    'animationFillMode': 'forwards',
   });
 
   return `