You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
154 lines
4.7 KiB
154 lines
4.7 KiB
5 months ago
|
'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);
|
||
|
}
|