From e4afb7f63e1ecf2f2cd30c5e1c034dbba0001f3d Mon Sep 17 00:00:00 2001 From: njleonzhang Date: Thu, 9 Aug 2018 10:37:00 +0800 Subject: [PATCH] support unitToConvert --- README.md | 7 +++++-- index.js | 23 ++++++++++++----------- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 5e8936a..21a16c5 100644 --- a/README.md +++ b/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 diff --git a/index.js b/index.js index d8be85e..3bd30bb 100755 --- a/index.js +++ b/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; }