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.
159 lines
3.5 KiB
159 lines
3.5 KiB
2 years ago
|
'use strict';
|
||
|
const browserslist = require('browserslist');
|
||
|
const valueParser = require('postcss-value-parser');
|
||
|
const { getArguments } = require('cssnano-utils');
|
||
|
|
||
|
/**
|
||
|
* Return the greatest common divisor
|
||
|
* of two numbers.
|
||
|
*
|
||
|
* @param {number} a
|
||
|
* @param {number} b
|
||
|
* @return {number}
|
||
|
*/
|
||
|
function gcd(a, b) {
|
||
|
return b ? gcd(b, a % b) : a;
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* @param {number} a
|
||
|
* @param {number} b
|
||
|
* @return {[number, number]}
|
||
|
*/
|
||
|
function aspectRatio(a, b) {
|
||
|
const divisor = gcd(a, b);
|
||
|
|
||
|
return [a / divisor, b / divisor];
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* @param {valueParser.Node[]} args
|
||
|
* @return {string}
|
||
|
*/
|
||
|
function split(args) {
|
||
|
return args.map((arg) => valueParser.stringify(arg)).join('');
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* @param {valueParser.Node} node
|
||
|
* @return {void}
|
||
|
*/
|
||
|
function removeNode(node) {
|
||
|
node.value = '';
|
||
|
node.type = 'word';
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* @param {unknown[]} items
|
||
|
* @return {string}
|
||
|
*/
|
||
|
function sortAndDedupe(items) {
|
||
|
const a = [...new Set(items)];
|
||
|
a.sort();
|
||
|
return a.join();
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* @param {boolean} legacy
|
||
|
* @param {import('postcss').AtRule} rule
|
||
|
* @return {void}
|
||
|
*/
|
||
|
function transform(legacy, rule) {
|
||
|
const ruleName = rule.name.toLowerCase();
|
||
|
|
||
|
// We should re-arrange parameters only for `@media` and `@supports` at-rules
|
||
|
if (!rule.params || !['media', 'supports'].includes(ruleName)) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
const params = valueParser(rule.params);
|
||
|
|
||
|
params.walk((node, index) => {
|
||
|
if (node.type === 'div') {
|
||
|
node.before = node.after = '';
|
||
|
} else if (node.type === 'function') {
|
||
|
node.before = '';
|
||
|
if (
|
||
|
node.nodes[0] &&
|
||
|
node.nodes[0].type === 'word' &&
|
||
|
node.nodes[0].value.startsWith('--') &&
|
||
|
node.nodes[2] === undefined
|
||
|
) {
|
||
|
node.after = ' ';
|
||
|
} else {
|
||
|
node.after = '';
|
||
|
}
|
||
|
if (
|
||
|
node.nodes[4] &&
|
||
|
node.nodes[0].value.toLowerCase().indexOf('-aspect-ratio') === 3
|
||
|
) {
|
||
|
const [a, b] = aspectRatio(
|
||
|
Number(node.nodes[2].value),
|
||
|
Number(node.nodes[4].value)
|
||
|
);
|
||
|
|
||
|
node.nodes[2].value = a.toString();
|
||
|
node.nodes[4].value = b.toString();
|
||
|
}
|
||
|
} else if (node.type === 'space') {
|
||
|
node.value = ' ';
|
||
|
} else {
|
||
|
const prevWord = params.nodes[index - 2];
|
||
|
|
||
|
if (
|
||
|
node.value.toLowerCase() === 'all' &&
|
||
|
rule.name.toLowerCase() === 'media' &&
|
||
|
!prevWord
|
||
|
) {
|
||
|
const nextWord = params.nodes[index + 2];
|
||
|
|
||
|
if (!legacy || nextWord) {
|
||
|
removeNode(node);
|
||
|
}
|
||
|
|
||
|
if (nextWord && nextWord.value.toLowerCase() === 'and') {
|
||
|
const nextSpace = params.nodes[index + 1];
|
||
|
const secondSpace = params.nodes[index + 3];
|
||
|
|
||
|
removeNode(nextWord);
|
||
|
removeNode(nextSpace);
|
||
|
removeNode(secondSpace);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}, true);
|
||
|
|
||
|
rule.params = sortAndDedupe(getArguments(params).map(split));
|
||
|
|
||
|
if (!rule.params.length) {
|
||
|
rule.raws.afterName = '';
|
||
|
}
|
||
|
}
|
||
|
|
||
|
const allBugBrowers = new Set(['ie 10', 'ie 11']);
|
||
|
|
||
|
/**
|
||
|
* @type {import('postcss').PluginCreator<browserslist.Options>}
|
||
|
* @param {browserslist.Options} options
|
||
|
* @return {import('postcss').Plugin}
|
||
|
*/
|
||
|
function pluginCreator(options = {}) {
|
||
|
const browsers = browserslist(null, {
|
||
|
stats: options.stats,
|
||
|
path: __dirname,
|
||
|
env: options.env,
|
||
|
});
|
||
|
|
||
|
const hasAllBug = browsers.some((browser) => allBugBrowers.has(browser));
|
||
|
return {
|
||
|
postcssPlugin: 'postcss-minify-params',
|
||
|
|
||
|
OnceExit(css) {
|
||
|
css.walkAtRules((rule) => transform(hasAllBug, rule));
|
||
|
},
|
||
|
};
|
||
|
}
|
||
|
|
||
|
pluginCreator.postcss = true;
|
||
|
module.exports = pluginCreator;
|