'use strict'; var postcss = require('postcss'); var objectAssign = require('object-assign'); var { createPropListMatcher } = require('./src/prop-list-matcher'); var defaults = { unitToConvert: 'px', viewportWidth: 320, 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: [], propList: ['*'], minPixelValue: 1, mediaQuery: false }; 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'); var satisfyPropList = createPropListMatcher(opts.propList); return function (css) { css.walkDecls(function (decl, i) { // Add exlclude option to ignore some files like 'node_modules' if (opts.exclude && decl.source.input.file) { if (Object.prototype.toString.call(opts.exclude) === '[object RegExp]') { if (!handleExclude(opts.exclude, decl.source.input.file)) return; } else if (Object.prototype.toString.call(opts.exclude) === '[object Array]') { for (let i = 0; i < opts.exclude.length; ++i) { if (!handleExclude(opts.exclude[i], decl.source.input.file)) return; } } else { throw new Error('options.exclude should be RegExp or Array!'); } } if ( decl.value.indexOf(opts.unitToConvert) === -1 || !satisfyPropList(decl.prop) || blacklistedSelector(opts.selectorBlackList, decl.parent.selector) ) return; var unit = getUnit(decl.prop, opts) decl.value = decl.value.replace(pxRegex, createPxReplace(opts.viewportWidth, opts.minPixelValue, opts.unitPrecision, unit)); }); if (opts.mediaQuery) { css.walkAtRules('media', function (rule) { if (rule.params.indexOf(opts.unitToConvert) === -1) return; rule.params = rule.params.replace(pxRegex, pxReplace); }); } }; }); function handleExclude (reg, file) { if (Object.prototype.toString.call(reg) !== '[object RegExp]') { throw new Error('options.exclude should be RegExp!'); } if (file.match(reg) !== null) return false; return true; } function getUnit(prop, opts) { return prop.indexOf('font') === -1 ? opts.viewportUnit : opts.fontViewportUnit; } function createPxReplace(viewportSize, minPixelValue, unitPrecision, viewportUnit) { return function (m, $1) { if (!$1) return m; var pixels = parseFloat($1); if (pixels <= minPixelValue) return m; var parsedVal = toFixed((pixels / viewportSize * 100), unitPrecision); return parsedVal === 0 ? '0' : parsedVal + viewportUnit; }; } function toFixed(number, precision) { var multiplier = Math.pow(10, precision + 1), wholeNumber = Math.floor(number * multiplier); return Math.round(wholeNumber / 10) * 10 / multiplier; } function blacklistedSelector(blacklist, selector) { if (typeof selector !== 'string') return; return blacklist.some(function (regex) { if (typeof regex === 'string') return selector.indexOf(regex) !== -1; return selector.match(regex); }); }