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/LICENSE-MIT b/node_modules/postcss-normalize-timing-functions/LICENSE-MIT
new file mode 100644
index 0000000..fd0e863
--- /dev/null
+++ b/node_modules/postcss-normalize-timing-functions/LICENSE-MIT
@@ -0,0 +1,22 @@
+Copyright (c) Ben Briggs <beneb.info@gmail.com> (http://beneb.info)
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
diff --git a/node_modules/postcss-normalize-timing-functions/README.md b/node_modules/postcss-normalize-timing-functions/README.md
new file mode 100644
index 0000000..171d1de
--- /dev/null
+++ b/node_modules/postcss-normalize-timing-functions/README.md
@@ -0,0 +1,44 @@
+# [postcss][postcss]-normalize-timing-functions
+
+> Normalize timing functions with PostCSS.
+
+## Install
+
+With [npm](https://npmjs.org/package/postcss-normalize-timing-functions) do:
+
+```
+npm install postcss-normalize-timing-functions --save
+```
+
+## Example
+
+### Input
+
+```css
+div {
+ animate: fade 3s cubic-bezier(0.42, 0, 1, 1)
+}
+```
+
+### Output
+
+```css
+div {
+ animate: fade 3s ease-in
+}
+```
+
+## Usage
+
+See the [PostCSS documentation](https://github.com/postcss/postcss#usage) for
+examples for your environment.
+
+## Contributors
+
+See [CONTRIBUTORS.md](https://github.com/cssnano/cssnano/blob/master/CONTRIBUTORS.md).
+
+## License
+
+MIT © [Ben Briggs](http://beneb.info)
+
+[postcss]: https://github.com/postcss/postcss
diff --git a/node_modules/postcss-normalize-timing-functions/package.json b/node_modules/postcss-normalize-timing-functions/package.json
new file mode 100644
index 0000000..b76ffe5
--- /dev/null
+++ b/node_modules/postcss-normalize-timing-functions/package.json
@@ -0,0 +1,36 @@
+{
+ "name": "postcss-normalize-timing-functions",
+ "version": "5.1.0",
+ "description": "Normalize CSS animation/transition timing functions.",
+ "main": "src/index.js",
+ "types": "types/index.d.ts",
+ "files": [
+ "LICENSE-MIT",
+ "src",
+ "types"
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "postcss-value-parser": "^4.2.0"
+ },
+ "author": {
+ "name": "Ben Briggs",
+ "email": "beneb.info@gmail.com",
+ "url": "http://beneb.info"
+ },
+ "repository": "cssnano/cssnano",
+ "bugs": {
+ "url": "https://github.com/cssnano/cssnano/issues"
+ },
+ "homepage": "https://github.com/cssnano/cssnano",
+ "engines": {
+ "node": "^10 || ^12 || >=14.0"
+ },
+ "devDependencies": {
+ "postcss": "^8.2.15"
+ },
+ "peerDependencies": {
+ "postcss": "^8.2.15"
+ },
+ "readme": "# [postcss][postcss]-normalize-timing-functions\n\n> Normalize timing functions with PostCSS.\n\n## Install\n\nWith [npm](https://npmjs.org/package/postcss-normalize-timing-functions) do:\n\n```\nnpm install postcss-normalize-timing-functions --save\n```\n\n## Example\n\n### Input\n\n```css\ndiv {\n animate: fade 3s cubic-bezier(0.42, 0, 1, 1)\n}\n```\n\n### Output\n\n```css\ndiv {\n animate: fade 3s ease-in\n}\n``` \n\n## Usage\n\nSee the [PostCSS documentation](https://github.com/postcss/postcss#usage) for\nexamples for your environment.\n\n## Contributors\n\nSee [CONTRIBUTORS.md](https://github.com/cssnano/cssnano/blob/master/CONTRIBUTORS.md).\n\n## License\n\nMIT \u00a9 [Ben Briggs](http://beneb.info)\n\n[postcss]: https://github.com/postcss/postcss\n"
+}
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;
diff --git a/node_modules/postcss-normalize-timing-functions/types/index.d.ts b/node_modules/postcss-normalize-timing-functions/types/index.d.ts
new file mode 100644
index 0000000..d2beadb
--- /dev/null
+++ b/node_modules/postcss-normalize-timing-functions/types/index.d.ts
@@ -0,0 +1,9 @@
+export = pluginCreator;
+/**
+ * @type {import('postcss').PluginCreator<void>}
+ * @return {import('postcss').Plugin}
+ */
+declare function pluginCreator(): import('postcss').Plugin;
+declare namespace pluginCreator {
+ const postcss: true;
+}