mirror of
https://github.com/Sevichecc/Urara-Blog.git
synced 2025-05-02 22:49:29 +08:00
146 lines
3.4 KiB
Text
146 lines
3.4 KiB
Text
'use strict';
|
|
const valueParser = require('postcss-value-parser');
|
|
|
|
/** @type {(node: valueParser.Node) => number} */
|
|
const getValue = (node) => parseFloat(node.value);
|
|
|
|
/* Works because toString() normalizes the formatting,
|
|
so comparing the string forms behaves the same as number equality*/
|
|
const conversions = new Map([
|
|
[[0.25, 0.1, 0.25, 1].toString(), 'ease'],
|
|
[[0, 0, 1, 1].toString(), 'linear'],
|
|
[[0.42, 0, 1, 1].toString(), 'ease-in'],
|
|
[[0, 0, 0.58, 1].toString(), 'ease-out'],
|
|
[[0.42, 0, 0.58, 1].toString(), 'ease-in-out'],
|
|
]);
|
|
/**
|
|
* @param {valueParser.Node} node
|
|
* @return {void | false}
|
|
*/
|
|
function reduce(node) {
|
|
if (node.type !== 'function') {
|
|
return false;
|
|
}
|
|
|
|
if (!node.value) {
|
|
return;
|
|
}
|
|
|
|
const lowerCasedValue = node.value.toLowerCase();
|
|
|
|
if (lowerCasedValue === 'steps') {
|
|
// Don't bother checking the step-end case as it has the same length
|
|
// as steps(1)
|
|
if (
|
|
node.nodes[0].type === 'word' &&
|
|
getValue(node.nodes[0]) === 1 &&
|
|
node.nodes[2] &&
|
|
node.nodes[2].type === 'word' &&
|
|
(node.nodes[2].value.toLowerCase() === 'start' ||
|
|
node.nodes[2].value.toLowerCase() === 'jump-start')
|
|
) {
|
|
/** @type string */ (node.type) = 'word';
|
|
node.value = 'step-start';
|
|
|
|
delete (/** @type Partial<valueParser.FunctionNode> */ (node).nodes);
|
|
|
|
return;
|
|
}
|
|
|
|
if (
|
|
node.nodes[0].type === 'word' &&
|
|
getValue(node.nodes[0]) === 1 &&
|
|
node.nodes[2] &&
|
|
node.nodes[2].type === 'word' &&
|
|
(node.nodes[2].value.toLowerCase() === 'end' ||
|
|
node.nodes[2].value.toLowerCase() === 'jump-end')
|
|
) {
|
|
/** @type string */ (node.type) = 'word';
|
|
node.value = 'step-end';
|
|
|
|
delete (/** @type Partial<valueParser.FunctionNode> */ (node).nodes);
|
|
|
|
return;
|
|
}
|
|
|
|
// The end case is actually the browser default, so it isn't required.
|
|
if (
|
|
node.nodes[2] &&
|
|
node.nodes[2].type === 'word' &&
|
|
(node.nodes[2].value.toLowerCase() === 'end' ||
|
|
node.nodes[2].value.toLowerCase() === 'jump-end')
|
|
) {
|
|
node.nodes = [node.nodes[0]];
|
|
|
|
return;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
if (lowerCasedValue === 'cubic-bezier') {
|
|
const values = node.nodes
|
|
.filter((list, index) => {
|
|
return index % 2 === 0;
|
|
})
|
|
.map(getValue);
|
|
|
|
if (values.length !== 4) {
|
|
return;
|
|
}
|
|
|
|
const match = conversions.get(values.toString());
|
|
|
|
if (match) {
|
|
/** @type string */ (node.type) = 'word';
|
|
node.value = match;
|
|
|
|
delete (/** @type Partial<valueParser.FunctionNode> */ (node).nodes);
|
|
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {string} value
|
|
* @return {string}
|
|
*/
|
|
function transform(value) {
|
|
return valueParser(value).walk(reduce).toString();
|
|
}
|
|
|
|
/**
|
|
* @type {import('postcss').PluginCreator<void>}
|
|
* @return {import('postcss').Plugin}
|
|
*/
|
|
function pluginCreator() {
|
|
return {
|
|
postcssPlugin: 'postcss-normalize-timing-functions',
|
|
|
|
OnceExit(css) {
|
|
const cache = new Map();
|
|
|
|
css.walkDecls(
|
|
/^(-\w+-)?(animation|transition)(-timing-function)?$/i,
|
|
(decl) => {
|
|
const value = decl.value;
|
|
|
|
if (cache.has(value)) {
|
|
decl.value = cache.get(value);
|
|
|
|
return;
|
|
}
|
|
|
|
const result = transform(value);
|
|
|
|
decl.value = result;
|
|
cache.set(value, result);
|
|
}
|
|
);
|
|
},
|
|
};
|
|
}
|
|
|
|
pluginCreator.postcss = true;
|
|
module.exports = pluginCreator;
|