Add unitPrecision option (fix #44)

robwierzbowski · Sep 23, 2015 · 5dc93d0 · 5dc93d0
1 parent d511f85
commit 5dc93d0
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 * Follow PostCSS plugin guidelines
 * Removed `rootValue` parameter, now defined in options (#40)
 * Removed old API. Always use pixrem with PostCSS API.
+* Added: `unitPrecision` for rounded values
 
 2.0.1, Sep 17, 2015
 

diff --git a/README.md b/README.md
@@ -67,13 +67,14 @@ And returns this:
 ### Options
 
 Type: `Object | Null`
-Default: `{ rootValue: 16, replace: false, atrules: false, html: true, browsers: 'ie <= 8' }`
-
-- `rootValue` the root element font size. Can be `px`, `rem`, `em`, `%`, or unitless pixel value. Pixrem also tries to get the root font-size from CSS (`html` or `:root`) and overrides this option. Use `html` option to disable this behaviour.
-- `replace`   replaces rules containing `rem`s instead of adding fallbacks.
-- `atrules`   generates fallback in at-rules too (media-queries)
-- `html`      overrides root font-size from CSS `html {}` or `:root {}`
-- `browsers`  sets browser's range you want to target, based on [browserslist](https://github.com/ai/browserslist)
+Default: `{rootValue: 16, replace: false, atrules: false, html: true, browsers: 'ie <= 8', unitPrecision: 3}`
+
+- `rootValue`     the root element font size. Can be `px`, `rem`, `em`, `%`, or unitless pixel value. Pixrem also tries to get the root font-size from CSS (`html` or `:root`) and overrides this option. Use `html` option to disable this behaviour.
+- `replace`       replaces rules containing `rem`s instead of adding fallbacks.
+- `atrules`       generates fallback in at-rules too (media-queries)
+- `html`          overrides root font-size from CSS `html {}` or `:root {}`
+- `browsers`      sets browser's range you want to target, based on [browserslist](https://github.com/ai/browserslist)
+- `unitPrecision` control the significant digits after the decimal point
 
 ## Contribute
 

diff --git a/lib/pixrem.js b/lib/pixrem.js
@@ -15,12 +15,13 @@ module.exports = postcss.plugin('pixrem', function (opts) {
   return function (css, result) {
 
     var options = {};
-    options.rootValue = (opts.rootValue !== undefined) ? opts.rootValue : BASE_FONT_SIZE;
-    options.replace   = (opts.replace   !== undefined) ? opts.replace   : false;
-    options.atrules   = (opts.atrules   !== undefined) ? opts.atrules   : false;
-    options.html      = (opts.html      !== undefined) ? opts.html      : true;
-    options.browsers  = (opts.browsers  !== undefined) ? opts.browsers  : 'ie <= 8';
-    options.browsers  = browserslist(options.browsers);
+    options.rootValue     = (opts.rootValue     !== undefined) ? opts.rootValue     : BASE_FONT_SIZE;
+    options.replace       = (opts.replace       !== undefined) ? opts.replace       : false;
+    options.atrules       = (opts.atrules       !== undefined) ? opts.atrules       : false;
+    options.html          = (opts.html          !== undefined) ? opts.html          : true;
+    options.unitPrecision = (opts.unitPrecision !== undefined) ? opts.unitPrecision : 3;
+    options.browsers      = (opts.browsers      !== undefined) ? opts.browsers      : 'ie <= 8';
+    options.browsers      = browserslist(options.browsers);
 
     var isIElte8, isIEgte9, isIE9_10;
     if (detectBrowser(options.browsers, 'ie <= 8')) {
@@ -77,9 +78,7 @@ module.exports = postcss.plugin('pixrem', function (opts) {
           if ( isSpecialCaseIE9_10 || isNotUseless ) {
 
             value = value.replace(REGEX, function ($1) {
-              // Round decimal pixels down to match webkit and opera behavior:
-              // http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
-              return Math.floor(parseFloat($1) * toPx(options.rootValue, decl, result)) + 'px';
+              return rounded(parseFloat($1) * toPx(options.rootValue, decl, result), options.unitPrecision) + 'px';
             });
 
             if (options.replace) {
@@ -150,4 +149,12 @@ function toPx (value, decl, result) {
 // Reduce line breaks
 function reduceLineBreaks (value) {
   return value.replace(/(\r*\n|\r)+/g, '$1');
+}
+
+// Round values based on precision
+// rounded down to match webkit and opera behavior:
+// http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
+function rounded (value, precision) {
+  precision = Math.pow(10, precision);
+  return Math.floor(value * precision) / precision;
 }
diff --git a/test/test.js b/test/test.js
@@ -78,9 +78,21 @@ describe('pixrem', function () {
     assert.equal(processed, expected);
   });
 
-  it('should generate integer fallbacks, rounded down', function () {
-    var expected = '.rule { font-size: 49px; font-size: 2rem }';
-    var processed = postcss([pixrem({rootValue: '155%'})]).process(css).css;
+  it('should round values based on default precision', function () {
+    var expected = '.rule { font-size: 36.032px; font-size: 2rem }';
+    var processed = postcss([pixrem({rootValue: '1.126em'})]).process(css).css;
+    assert.equal(processed, expected);
+  });
+
+  it('should return integer when precision is 0', function () {
+    var expected = '.rule { font-size: 36px; font-size: 2rem }';
+    var processed = postcss([pixrem({rootValue: '1.126em', unitPrecision: 0})]).process(css).css;
+    assert.equal(processed, expected);
+  });
+
+  it('should return integer rounded down', function () {
+    var expected = '.rule { font-size: 36px; font-size: 2rem }';
+    var processed = postcss([pixrem({rootValue: '1.156em', unitPrecision: 0})]).process(css).css;
     assert.equal(processed, expected);
   });