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.
146 lines
3.4 KiB
146 lines
3.4 KiB
'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;
|
|
|