123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- 'use strict';
- var postcss = require('postcss');
- var objectAssign = require('object-assign');
- var { createPropListMatcher } = require('./src/prop-list-matcher');
- var { getUnitRegexp } = require('./src/pixel-unit-regexp');
- 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,
- replace: true,
- landscape: false,
- landscapeUnit: 'vw',
- landscapeWidth: 568
- };
- module.exports = postcss.plugin('postcss-px-to-viewport', function (options) {
-
- var opts = objectAssign({}, defaults, options);
- var pxRegex = getUnitRegexp(opts.unitToConvert);
- var satisfyPropList = createPropListMatcher(opts.propList);
- var landscapeRules = [];
-
- return function (css) {
- css.walkRules(function (rule) {
- // Add exclude option to ignore some files like 'node_modules'
- var file = rule.source && rule.source.input.file;
- if (opts.exclude && file) {
- if (Object.prototype.toString.call(opts.exclude) === '[object RegExp]') {
- if (isExclude(opts.exclude, file)) return;
- } else if (Object.prototype.toString.call(opts.exclude) === '[object Array]') {
- for (let i = 0; i < opts.exclude.length; i++) {
- if (isExclude(opts.exclude[i], file)) return;
- }
- } else {
- throw new Error('options.exclude should be RegExp or Array.');
- }
- }
-
- if (blacklistedSelector(opts.selectorBlackList, rule.selector)) return;
- if (opts.landscape && !rule.parent.params) {
- var landscapeRule = rule.clone().removeAll();
- rule.walkDecls(function(decl) {
- if (decl.value.indexOf(opts.unitToConvert) === -1) return;
- if (!satisfyPropList(decl.prop)) return;
-
- landscapeRule.append(decl.clone({
- value: decl.value.replace(pxRegex, createPxReplace(opts, opts.landscapeUnit, opts.landscapeWidth))
- }));
- });
-
- if (landscapeRule.nodes.length > 0) {
- landscapeRules.push(landscapeRule);
- }
- }
- if (!validateParams(rule.parent.params, opts.mediaQuery)) return;
-
- rule.walkDecls(function(decl, i) {
- if (decl.value.indexOf(opts.unitToConvert) === -1) return;
- if (!satisfyPropList(decl.prop)) return;
- var unit;
- var size;
- var params = rule.parent.params;
-
- if (opts.landscape && params && params.indexOf('landscape') !== -1) {
- unit = opts.landscapeUnit;
- size = opts.landscapeWidth;
- } else {
- unit = getUnit(decl.prop, opts);
- size = opts.viewportWidth;
- }
-
- var value = decl.value.replace(pxRegex, createPxReplace(opts, unit, size));
-
- if (declarationExists(decl.parent, decl.prop, value)) return;
-
- if (opts.replace) {
- decl.value = value;
- } else {
- decl.parent.insertAfter(i, decl.clone({ value: value }));
- }
- });
- });
-
- if (landscapeRules.length > 0) {
- var landscapeRoot = new postcss.atRule({ params: '(orientation: landscape)', name: 'media' });
-
- landscapeRules.forEach(function(rule) {
- landscapeRoot.append(rule);
- });
- css.append(landscapeRoot);
- }
- };
- });
- function getUnit(prop, opts) {
- return prop.indexOf('font') === -1 ? opts.viewportUnit : opts.fontViewportUnit;
- }
- function createPxReplace(opts, viewportUnit, viewportSize) {
- return function (m, $1) {
- if (!$1) return m;
- var pixels = parseFloat($1);
- if (pixels <= opts.minPixelValue) return m;
- var parsedVal = toFixed((pixels / viewportSize * 100), opts.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);
- });
- }
- function isExclude(reg, file) {
- if (Object.prototype.toString.call(reg) !== '[object RegExp]') {
- throw new Error('options.exclude should be RegExp.');
- }
- return file.match(reg) !== null;
- }
- function declarationExists(decls, prop, value) {
- return decls.some(function (decl) {
- return (decl.prop === prop && decl.value === value);
- });
- }
- function validateParams(params, mediaQuery) {
- return !params || (params && mediaQuery);
- }
|