fix(prefixer): improve flex css prefixes (#276)

angular · May 10, 2017 · beb5ed0 · beb5ed0
1 parent 5ebeb23
commit beb5ed0
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 10 deletions.
diff --git a/src/lib/flexbox/api/base.ts b/src/lib/flexbox/api/base.ts
@@ -104,6 +104,19 @@ export abstract class BaseFxDirective implements OnDestroy {
       return value ? value.trim() : "row";
   }
 
+  /**
+   * Applies the styles to the element. The styles object map may contain an array of values. Each
+   * value will be added as element style.
+   */
+  protected _applyMultiValueStyleToElement(styles: {}, element: any) {
+    Object.keys(styles).forEach(key => {
+      const values = Array.isArray(styles[key]) ? styles[key] : [styles[key]];
+      for (let value of values) {
+        this._renderer.setStyle(element, key, value);
+      }
+    });
+  }
+
   /**
    * Applies styles given via string pair or object map to the directive element.
    */
@@ -120,10 +133,7 @@ export abstract class BaseFxDirective implements OnDestroy {
 
     styles = applyCssPrefixes(style);
 
-    // Iterate all properties in hashMap and set styles
-    Object.keys(styles).forEach(key => {
-      this._renderer.setStyle(element, key, styles[key]);
-    });
+    this._applyMultiValueStyleToElement(styles, element);
   }
 
   /**
@@ -132,8 +142,8 @@ export abstract class BaseFxDirective implements OnDestroy {
   protected _applyStyleToElements(style: StyleDefinition, elements: HTMLElement[ ]) {
     let styles = applyCssPrefixes(style);
 
-    Object.keys(styles).forEach(key => {
-      elements.forEach(el => this._renderer.setStyle(el, key, styles[key]));
+    elements.forEach(el => {
+      this._applyMultiValueStyleToElement(styles, el);
     });
   }
 

diff --git a/src/lib/utils/auto-prefixer.spec.ts b/src/lib/utils/auto-prefixer.spec.ts
@@ -16,11 +16,19 @@ describe('auto-prefixer for ', () => {
   describe('css `display:<xxx>`', () => {
 
     it('should not apply a prefix', () => {
-      let input = {"display": "flex"};
-      let expected = {"display": "flex"};
+      let input = {"display": "block"};
+      let expected = {"display": "block"};
       let actual = applyCssPrefixes(input);
       checkCssPrefix("display", actual, expected);
     });
+
+    it('should apply prefixes for display', () => {
+      let input = {"display": "flex"};
+      let actual = applyCssPrefixes(input);
+      expect(Array.isArray(actual['display'])).toBeTruthy();
+      expect(actual['display'][0]).toEqual('-webkit-box');
+      expect(actual['display'][4]).toEqual('flex');
+    });
   });
 
   /**

diff --git a/src/lib/utils/auto-prefixer.ts b/src/lib/utils/auto-prefixer.ts
@@ -14,53 +14,100 @@ export function applyCssPrefixes(target) {
 
     switch (key) {
       case 'display':
-        target['display'] = value;
-        // also need 'display : -webkit-box' and 'display : -ms-flexbox;'
+        if (value === 'flex') {
+          target['display'] = [
+            '-webkit-box',
+            '-moz-box',
+            '-ms-flexbox',
+            '-webkit-flex',
+            'flex'
+          ];
+        } else if (value === 'inline-flex') {
+          target['display'] = [
+            '-webkit-inline-box',
+            '-moz-inline-box',
+            '-ms-inline-flexbox',
+            '-webkit-inline-flex',
+            'inline-flex'
+          ];
+        } else {
+          target['display'] = value;
+        }
         break;
 
       case 'flex':
         target['-ms-flex'] = value;
+        target['-webkit-flex'] = value;
         target['-webkit-box-flex'] = value.split(" ")[0];
+        target['-moz-box-flex'] = value.split(" ")[0];
         break;
 
       case 'flex-direction':
         value = value || "row";
         target['flex-direction'] = value;
         target['-ms-flex-direction'] = value;
+        target['-webkit-flex-direction'] = value;
         target['-webkit-box-orient'] = toBoxOrient(value);
+        target['-moz-box-orient'] = toBoxOrient(value);
         target['-webkit-box-direction'] = toBoxDirection(value);
+        target['-moz-box-direction'] = toBoxDirection(value);
         break;
 
       case 'flex-wrap':
         target['-ms-flex-wrap'] = value;
+        target['-webkit-flex-wrap'] = value;
+        break;
+
+      case 'flex-grow':
+        target['-webkit-flex-grow'] = value;
+        break;
+
+      case 'flex-shrink':
+        target['-webkit-flex-shrink'] = value;
+        break;
+
+      case 'flex-basis':
+        target['-webkit-flex-basis'] = value;
+        break;
+
+      case 'flex-flow':
+        target['-webkit-flex-flow'] = value;
         break;
 
       case 'order':
         if (isNaN(value)) {
           value = "0";
         }
         target['order'] = value;
+        target['-webkit-order'] = value;
         target['-ms-flex-order'] = value;
+        target['-moz-box-ordinal-group'] = toBoxOrdinal(value);
         target['-webkit-box-ordinal-group'] = toBoxOrdinal(value);
         break;
 
       case 'justify-content':
         target['-ms-flex-pack'] = toBoxValue(value);
         target['-webkit-box-pack'] = toBoxValue(value);
+        target['-moz-box-pack'] = toBoxValue(value);
+        target['-webkit-justify-content'] = value;
         break;
 
       case 'align-items':
         target['-ms-flex-align'] = toBoxValue(value);
         target['-webkit-box-align'] = toBoxValue(value);
+        target['-moz-box-align'] = toBoxValue(value);
+        target['-webkit-align-items'] = toBoxValue(value);
         break;
 
       case 'align-self':
         target['-ms-flex-item-align'] = toBoxValue(value);
+        target['-webkit-align-self'] = value;
         break;
 
       case 'align-content':
         target['-ms-align-content'] = toAlignContentValue(value);
         target['-ms-flex-line-pack'] = toAlignContentValue(value);
+        target['-webkit-align-content'] = value;
         break;
     }
   }