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-display-values/src/index.js b/node_modules/postcss-normalize-display-values/src/index.js
new file mode 100644
index 0000000..7495e57
--- /dev/null
+++ b/node_modules/postcss-normalize-display-values/src/index.js
@@ -0,0 +1,71 @@
+'use strict';
+const valueParser = require('postcss-value-parser');
+const mappings = require('./lib/map.js');
+
+/**
+ * @param {string} value
+ * @return {string}
+ */
+function transform(value) {
+ const { nodes } = valueParser(value);
+
+ if (nodes.length === 1) {
+ return value;
+ }
+
+ const values = nodes
+ .filter((list, index) => index % 2 === 0)
+ .filter((node) => node.type === 'word')
+ .map((n) => n.value.toLowerCase());
+
+ if (values.length === 0) {
+ return value;
+ }
+
+ const match = mappings.get(values.toString());
+
+ if (!match) {
+ return value;
+ }
+
+ return match;
+}
+
+/**
+ * @type {import('postcss').PluginCreator<void>}
+ * @return {import('postcss').Plugin}
+ */
+function pluginCreator() {
+ return {
+ postcssPlugin: 'postcss-normalize-display-values',
+
+ prepare() {
+ const cache = new Map();
+ return {
+ OnceExit(css) {
+ css.walkDecls(/^display$/i, (decl) => {
+ const value = decl.value;
+
+ if (!value) {
+ return;
+ }
+
+ 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-display-values/src/lib/map.js b/node_modules/postcss-normalize-display-values/src/lib/map.js
new file mode 100644
index 0000000..7f92128
--- /dev/null
+++ b/node_modules/postcss-normalize-display-values/src/lib/map.js
@@ -0,0 +1,45 @@
+'use strict';
+const block = 'block';
+const flex = 'flex';
+const flow = 'flow';
+const flowRoot = 'flow-root';
+const grid = 'grid';
+const inline = 'inline';
+const inlineBlock = 'inline-block';
+const inlineFlex = 'inline-flex';
+const inlineGrid = 'inline-grid';
+const inlineTable = 'inline-table';
+const listItem = 'list-item';
+const ruby = 'ruby';
+const rubyBase = 'ruby-base';
+const rubyText = 'ruby-text';
+const runIn = 'run-in';
+const table = 'table';
+const tableCell = 'table-cell';
+const tableCaption = 'table-caption';
+
+/**
+ * Specification: https://drafts.csswg.org/css-display/#the-display-properties
+ */
+
+module.exports = new Map([
+ [[block, flow].toString(), block],
+ [[block, flowRoot].toString(), flowRoot],
+ [[inline, flow].toString(), inline],
+ [[inline, flowRoot].toString(), inlineBlock],
+ [[runIn, flow].toString(), runIn],
+ [[listItem, block, flow].toString(), listItem],
+ [[inline, flow, listItem].toString(), inline + ' ' + listItem],
+ [[block, flex].toString(), flex],
+ [[inline, flex].toString(), inlineFlex],
+ [[block, grid].toString(), grid],
+ [[inline, grid].toString(), inlineGrid],
+ [[inline, ruby].toString(), ruby],
+ // `block ruby` is same
+ [[block, table].toString(), table],
+ [[inline, table].toString(), inlineTable],
+ [[tableCell, flow].toString(), tableCell],
+ [[tableCaption, flow].toString(), tableCaption],
+ [[rubyBase, flow].toString(), rubyBase],
+ [[rubyText, flow].toString(), rubyText],
+]);