support unitToConvert

README.md

@@ -87,19 +87,23 @@ fs.writeFile('main-viewport.css', processedCss, function (err) {
 Default:
 ```js
 {
+  unitToConvert: 'px',
   viewportWidth: 320,
-  viewportHeight: 568,
+  viewportHeight: 568, // not now used; TODO: need for different units and math for different properties
   unitPrecision: 5,
   viewportUnit: 'vw',
+  fontViewportUnit: 'vw',  // vmin is more suitable.
   selectorBlackList: [],
   minPixelValue: 1,
   mediaQuery: false
 }
 ```
+- `unitToConvert` (String) unit to convert, by default, it is px.
 - `viewportWidth` (Number) The width of the viewport.
 - `viewportHeight` (Number) The height of the viewport.
 - `unitPrecision` (Number) The decimal numbers to allow the REM units to grow to.
 - `viewportUnit` (String) Expected units.
+- `fontViewportUnit` (String) Expected units for font.
 - `selectorBlackList` (Array) The selectors to ignore and leave as px.
     - If value is string, it checks to see if selector contains the string.
         - `['body']` will match `.body-class`
@@ -108,7 +112,6 @@ Default:
 - `minPixelValue` (Number) Set the minimum pixel value to replace.
 - `mediaQuery` (Boolean) Allow px to be converted in media queries.
 
-
 ### Use with gulp-postcss
 
 ```js

index.js

@@ -3,15 +3,8 @@
 var postcss = require('postcss');
 var objectAssign = require('object-assign');
 
-// excluding regex trick: http://www.rexegg.com/regex-best-trick.html
-// Not anything inside double quotes
-// Not anything inside single quotes
-// Not anything inside url()
-// Any digit followed by px
-// !singlequotes|!doublequotes|!url()|pixelunit
-var pxRegex = /"[^"]+"|'[^']+'|url\([^\)]+\)|(\d*\.?\d+)px/ig;
-
 var defaults = {
+  unitToConvert: 'px',
   viewportWidth: 320,
   viewportHeight: 568, // not now used; TODO: need for different units and math for different properties
   unitPrecision: 5,
@@ -27,11 +20,19 @@ module.exports = postcss.plugin('postcss-px-to-viewport', function (options) {
   var opts = objectAssign({}, defaults, options);
   var pxReplace = createPxReplace(opts.viewportWidth, opts.minPixelValue, opts.unitPrecision, opts.viewportUnit);
 
+  // excluding regex trick: http://www.rexegg.com/regex-best-trick.html
+  // Not anything inside double quotes
+  // Not anything inside single quotes
+  // Not anything inside url()
+  // Any digit followed by px
+  // !singlequotes|!doublequotes|!url()|pixelunit
+  var pxRegex = new RegExp('"[^"]+"|\'[^\']+\'|url\\([^\\)]+\\)|(\\d*\\.?\\d+)' + opts.unitToConvert, 'ig')
+
   return function (css) {
 
     css.walkDecls(function (decl, i) {
       // This should be the fastest test and will remove most declarations
-      if (decl.value.indexOf('px') === -1) return;
+      if (decl.value.indexOf(opts.unitToConvert) === -1) return;
 
       if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return;
 
@@ -42,7 +43,7 @@ module.exports = postcss.plugin('postcss-px-to-viewport', function (options) {
 
     if (opts.mediaQuery) {
       css.walkAtRules('media', function (rule) {
-        if (rule.params.indexOf('px') === -1) return;
+        if (rule.params.indexOf(opts.unitToConvert) === -1) return;
         rule.params = rule.params.replace(pxRegex, pxReplace);
       });
     }
@@ -50,7 +51,7 @@ module.exports = postcss.plugin('postcss-px-to-viewport', function (options) {
   };
 });
 
-function getUnit (prop, opts) { 
+function getUnit (prop, opts) {
   return prop.indexOf('font') === -1 ? opts.viewportUnit : opts.fontViewportUnit;
 }