Add cssnano
The CSS minifier we currently use (clean-css) is not maintained and
lacks support for new CSS features. CSSNano is a replacement that
supports features we need (primarily container queries).
This CL only adds the relevant dependencies, and does not use it. I will
do that (and remove clean-css) in a follow-up.
Bug: 1399763
Change-Id: I899ecc4482164404dd5ac2fd13f92fb797978e29
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4092305
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
diff --git a/node_modules/postcss-normalize-timing-functions/src/index.js b/node_modules/postcss-normalize-timing-functions/src/index.js
new file mode 100644
index 0000000..cfe0dda
--- /dev/null
+++ b/node_modules/postcss-normalize-timing-functions/src/index.js
@@ -0,0 +1,146 @@
+'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;