Add fallback only for font and pseudo-element when IE9 is in scope

robwierzbowski · Jun 30, 2015 · ff4c0d2 · ff4c0d2
1 parent e3fd6f3
commit ff4c0d2
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/lib/pixrem.js b/lib/pixrem.js
@@ -34,8 +34,16 @@ Pixrem.prototype.postcss = function (css) {
   var vendor = require('postcss/lib/vendor');
   var browsers = browserslist(_options.browsers);
 
-  // if not minimum IE 8, skip
-  if (!detectIE(browsers, 'ie <= 8')) { return; }
+  // if IE9+
+  if (detectBrowser(browsers, 'ie >= 9')) {
+    // if IE9 or IE10
+    var specialCaseIE = false;
+    if (detectBrowser(browsers, 'ie 9, ie 10')) {
+      specialCaseIE = true;
+    } else {
+      return;
+    }
+  }
 
   if (_options.html) {
     // First, check root font-size
@@ -61,14 +69,20 @@ Pixrem.prototype.postcss = function (css) {
       if (rule.type === 'atrule' || (rule.parent && rule.parent.type === 'atrule')) { return; }
     }
 
+    var isPseudoElement = (rule.selector.search(/:(after|before)/gi) !== -1);
+
     rule.eachDecl(function (decl, i) {
       var value = decl.value;
 
       if (value.indexOf('rem') !== -1) {
 
         var prop = vendor.unprefixed(decl.prop);
         // replace rems only if needed
-        if (!(_VALUES.test(value) || _PROPS.test(prop))) {
+        var isFontShorthand = (prop === 'font');
+        var isSpecialCaseIE9 = (specialCaseIE && (isPseudoElement || isFontShorthand));
+        var isUseless = (!specialCaseIE && !(_VALUES.test(value) || _PROPS.test(prop)));
+
+        if ( isSpecialCaseIE9 || isUseless ) {
 
           value = value.replace(_remgex, function ($1) {
             // Round decimal pixels down to match webkit and opera behavior:
@@ -88,26 +102,29 @@ Pixrem.prototype.postcss = function (css) {
           }
 
         }
+
       }
+
     });
 
   });
 
 };
 
-function detectIE (browsers, browserQuery) {
-  var ie = false;
+// Detect if one browser from the browserQuery is in browsers
+function detectBrowser (browsers, browserQuery) {
+  var b = false;
   browserQuery = browserslist(browserQuery);
   for (var i = 0; i < browsers.length; i++) {
     for (var j = 0; j < browserQuery.length; j++) {
       if (browsers[i] === browserQuery[j]) {
-        ie = true;
+        b = true;
         break;
       }
     }
-    if (ie) { break; }
+    if (b) { break; }
   }
-  return ie;
+  return b;
 }
 
 // Reduce line breaks

diff --git a/spec/pixrem-spec.js b/spec/pixrem-spec.js
@@ -236,4 +236,11 @@ describe('pixrem', function () {
     expect(processed).toBe(expected);
   });
 
+  it('should add fallback only for font and pseudo-element when IE9 is in scope', function () {
+    var css = '.rule{width: 2rem;font: bold 2rem sans-serif}.rule::after{width: 2rem}';
+    var expected = '.rule{width: 2rem;font: bold 32px sans-serif;font: bold 2rem sans-serif}.rule::after{width: 32px;width: 2rem}';
+    var processed = pixrem.process(css, undefined, {browsers: 'ie 9'});
+    expect(processed).toBe(expected);
+  });
+
 });