init

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;

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],
+]);