inline-style-prefixer - npm Package Compare versions

Comparing version 5.0.1 to 5.0.2

CHANGELOG.md

 # Changelog
 
-
 ## 5.0
 
+### 5.0.2
+* expanding flexbox shorthands for IE10 ( [#166](https://github.com/rofrischmann/inline-style-prefixer/issues/166) )
+
 ### 5.0.1
@@ -7,0 +9,0 @@ * added a plugin that adds a `-webkit-` prefix if `background-clip` is set to `text` ( [#159](https://github.com/rofrischmann/inline-style-prefixer/issues/159) )

es/plugins/flexboxIE.js

@@ -16,8 +16,53 @@ var alternativeValues = {
   flexBasis: 'msFlexPreferredSize'
+  // Full expanded syntax is flex-grow | flex-shrink | flex-basis.
+};var flexShorthandMappings = {
+  auto: '1 1 auto',
+  inherit: 'inherit',
+  initial: '0 1 auto',
+  none: '0 0 auto',
+  unset: 'unset'
 };
+var isUnitlessNumber = /^\d+(\.\d+)?$/;
 
 export default function flexboxIE(property, value, style) {
-  if (alternativeProps.hasOwnProperty(property)) {
+  if (Object.prototype.hasOwnProperty.call(alternativeProps, property)) {
     style[alternativeProps[property]] = alternativeValues[value] || value;
   }
+  if (property === 'flex') {
+    // For certain values we can do straight mappings based on the spec
+    // for the expansions.
+    if (Object.prototype.hasOwnProperty.call(flexShorthandMappings, value)) {
+      style.msFlex = flexShorthandMappings[value];
+      return;
+    }
+    // Here we have no direct mapping, so we favor looking for a
+    // unitless positive number as that will be the most common use-case.
+    if (isUnitlessNumber.test(value)) {
+      style.msFlex = value + ' 1 0%';
+      return;
+    }
+
+    // The next thing we can look for is if there are multiple values.
+    var flexValues = value.split(/\s/);
+    // If we only have a single value that wasn't a positive unitless
+    // or a pre-mapped value, then we can assume it is a unit value.
+    switch (flexValues.length) {
+      case 1:
+        style.msFlex = '1 1 ' + value;
+        return;
+      case 2:
+        // If we have 2 units, then we expect that the first will
+        // always be a unitless number and represents flex-grow.
+        // The second unit will represent flex-shrink for a unitless
+        // value, or flex-basis otherwise.
+        if (isUnitlessNumber.test(flexValues[1])) {
+          style.msFlex = flexValues[0] + ' ' + flexValues[1] + ' 0%';
+        } else {
+          style.msFlex = flexValues[0] + ' 1 ' + flexValues[1];
+        }
+        return;
+      default:
+        style.msFlex = value;
+    }
+  }
 }

lib/plugins/flexboxIE.js

@@ -22,8 +22,53 @@ 'use strict';
   flexBasis: 'msFlexPreferredSize'
+  // Full expanded syntax is flex-grow | flex-shrink | flex-basis.
+};var flexShorthandMappings = {
+  auto: '1 1 auto',
+  inherit: 'inherit',
+  initial: '0 1 auto',
+  none: '0 0 auto',
+  unset: 'unset'
 };
+var isUnitlessNumber = /^\d+(\.\d+)?$/;
 
 function flexboxIE(property, value, style) {
-  if (alternativeProps.hasOwnProperty(property)) {
+  if (Object.prototype.hasOwnProperty.call(alternativeProps, property)) {
     style[alternativeProps[property]] = alternativeValues[value] || value;
   }
+  if (property === 'flex') {
+    // For certain values we can do straight mappings based on the spec
+    // for the expansions.
+    if (Object.prototype.hasOwnProperty.call(flexShorthandMappings, value)) {
+      style.msFlex = flexShorthandMappings[value];
+      return;
+    }
+    // Here we have no direct mapping, so we favor looking for a
+    // unitless positive number as that will be the most common use-case.
+    if (isUnitlessNumber.test(value)) {
+      style.msFlex = value + ' 1 0%';
+      return;
+    }
+
+    // The next thing we can look for is if there are multiple values.
+    var flexValues = value.split(/\s/);
+    // If we only have a single value that wasn't a positive unitless
+    // or a pre-mapped value, then we can assume it is a unit value.
+    switch (flexValues.length) {
+      case 1:
+        style.msFlex = '1 1 ' + value;
+        return;
+      case 2:
+        // If we have 2 units, then we expect that the first will
+        // always be a unitless number and represents flex-grow.
+        // The second unit will represent flex-shrink for a unitless
+        // value, or flex-basis otherwise.
+        if (isUnitlessNumber.test(flexValues[1])) {
+          style.msFlex = flexValues[0] + ' ' + flexValues[1] + ' 0%';
+        } else {
+          style.msFlex = flexValues[0] + ' 1 ' + flexValues[1];
+        }
+        return;
+      default:
+        style.msFlex = value;
+    }
+  }
 }

package.json

 {
   "name": "inline-style-prefixer",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "Run-time Autoprefixer for JavaScript style objects",
@@ -20,3 +20,3 @@ "module": "es/index.js",
     "check": "yarn clear && yarn format && yarn lint && yarn coverage && yarn flow",
-    "clear": "rimraf lib coverage",
+    "clear": "rimraf lib es coverage _book",
     "docs": "gitbook install && gitbook build && gh-pages -d _book",
@@ -23,0 +23,0 @@ "flow": "flow",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

73805

decreased by-46.58%

Number of package files

58

decreased by-13.43%

Lines of code

1476

decreased by-57.44%

No dependency changes