Rewrite value parser

Author: TrySound

package.json

@@ -68,6 +68,8 @@
   },
   "dependencies": {
     "icss-utils": "^3.0.1",
-    "postcss": "^6.0.2"
+    "lodash": "^4.17.4",
+    "postcss": "^6.0.2",
+    "postcss-value-parser": "^3.3.0"
   }
 }

src/index.js

@@ -1,84 +1,156 @@
 /* eslint-env node */
 import postcss from "postcss";
+import valueParser from "postcss-value-parser";
 import {
   replaceSymbols,
   replaceValueSymbols,
   extractICSS,
   createICSSRules
 } from "icss-utils";
+import findLastIndex from "lodash/findLastIndex";
+import dropWhile from "lodash/dropWhile";
+import dropRightWhile from "lodash/dropRightWhile";
+import fromPairs from "lodash/fromPairs";
 
 const plugin = "postcss-modules-values";
 
-const matchImports = /^(.+?|\([\s\S]+?\))\s+from\s+("[^"]*"|'[^']*'|[\w-]+)$/;
-const matchValueDefinition = /(?:\s+|^)([\w-]+):?\s+(.+?)\s*$/g;
-const matchImport = /^([\w-]+)(?:\s+as\s+([\w-]+))?/;
+const chunkBy = (collection, iteratee) =>
+  collection.reduce(
+    (acc, item) =>
+      iteratee(item)
+        ? [...acc, []]
+        : [...acc.slice(0, -1), [...acc[acc.length - 1], item]],
+    [[]]
+  );
+
+const isWord = node => node.type === "word";
+
+const isDiv = node => node.type === "div";
+
+const isSpace = node => node.type === "space";
+
+const isNotSpace = node => !isSpace(node);
+
+const isFromWord = node => isWord(node) && node.value === "from";
+
+const isAsWord = node => isWord(node) && node.value === "as";
+
+const isComma = node => isDiv(node) && node.value === ",";
+
+const isColon = node => isDiv(node) && node.value === ":";
+
+const isInitializer = node => isColon(node) || isSpace(node);
+
+const trimNodes = nodes => dropWhile(dropRightWhile(nodes, isSpace), isSpace);
+
+const getPathValue = nodes =>
+  nodes.length === 1 && nodes[0].type === "string" ? nodes[0].value : null;
+
+const ensurePairsList = valuesNodes =>
+  valuesNodes.length === 1 && valuesNodes[0].type === "function"
+    ? valuesNodes[0].nodes
+    : valuesNodes;
+
+const getAliasesPairs = valuesNodes =>
+  chunkBy(ensurePairsList(valuesNodes), isComma).map(pairNodes => {
+    const nodes = pairNodes.filter(isNotSpace);
+    if (nodes.length === 1 && isWord(nodes[0])) {
+      return [nodes[0].value, nodes[0].value];
+    }
+    if (
+      nodes.length === 3 &&
+      isWord(nodes[0]) &&
+      isAsWord(nodes[1]) &&
+      isWord(nodes[2])
+    ) {
+      return [nodes[0].value, nodes[2].value];
+    }
+    return null;
+  });
+
+const parse = value => {
+  const parsed = valueParser(value).nodes;
+  const fromIndex = findLastIndex(parsed, isFromWord);
+  if (fromIndex === -1) {
+    if (parsed.length > 2 && isWord(parsed[0]) && isInitializer(parsed[1])) {
+      return {
+        type: "value",
+        name: parsed[0].value,
+        value: valueParser.stringify(trimNodes(parsed.slice(2)))
+      };
+    }
+    return null;
+  }
+  const pairs = getAliasesPairs(trimNodes(parsed.slice(0, fromIndex)));
+  const path = getPathValue(trimNodes(parsed.slice(fromIndex + 1)));
+  if (pairs.every(Boolean) && path) {
+    return {
+      type: "import",
+      pairs,
+      path
+    };
+  }
+  return null;
+};
 
 const getAliasName = (name, index) =>
   `__value__${name.replace(/\W/g, "_")}__${index}`;
 
+// TODO forbig '.' and '#' in names
+
 module.exports = postcss.plugin(plugin, () => (css, result) => {
   const { icssImports, icssExports } = extractICSS(css);
   let importIndex = 0;
   const createImportedName = (path, name) => {
     const importedName = getAliasName(name, importIndex);
-    if (icssImports[path] && icssImports[path][importedName]) {
-      importIndex += 1;
-      return createImportedName(path, name);
-    }
     importIndex += 1;
     return importedName;
   };
 
-  const addDefinition = atRule => {
-    let matches;
-    while ((matches = matchValueDefinition.exec(atRule.params))) {
-      let [, key, value] = matches;
-      // Add to the definitions, knowing that values can refer to each other
-      icssExports[key] = replaceValueSymbols(value, icssExports);
-      atRule.remove();
-    }
-  };
-
-  const addImport = atRule => {
-    let matches = matchImports.exec(atRule.params);
-    if (matches) {
-      const aliasesString = matches[1];
-      let path = matches[2];
-      path = path[0] === "'" || path[0] === '"' ? path.slice(1, -1) : path;
-      let aliases = aliasesString
-        .replace(/^\(\s*([\s\S]+)\s*\)$/, "$1")
-        .split(/\s*,\s*/)
-        .map(alias => {
-          let tokens = matchImport.exec(alias);
-          if (tokens) {
-            let [, theirName, myName = theirName] = tokens;
-            let importedName = createImportedName(path, myName);
-            icssExports[myName] = importedName;
-            return { theirName, importedName };
-          } else {
-            throw new Error(`@import statement "${alias}" is invalid!`);
-          }
-        })
-        .reduce((acc, { theirName, importedName }) => {
-          acc[importedName] = theirName;
-          return acc;
-        }, {});
-      icssImports[path] = Object.assign({}, icssImports[path], aliases);
-      atRule.remove();
-    }
-  };
-
-  /* Look at all the @value statements and treat them as locals or as imports */
   css.walkAtRules("value", atRule => {
-    if (matchImports.exec(atRule.params)) {
-      addImport(atRule);
+    if (atRule.params.indexOf("@value") !== -1) {
+      result.warn(`Invalid value definition "${atRule.params}"`, {
+        node: atRule
+      });
     } else {
-      if (atRule.params.indexOf("@value") !== -1) {
-        result.warn("Invalid value definition: " + atRule.params);
+      const parsed = parse(atRule.params);
+      if (parsed) {
+        if (parsed.type === "value") {
+          if (icssExports[parsed.name]) {
+            result.warn(`"${parsed.name}" value already declared`, {
+              node: atRule
+            });
+          }
+          icssExports[parsed.name] = replaceValueSymbols(
+            parsed.value,
+            icssExports
+          );
+        }
+        if (parsed.type === "import") {
+          const pairs = parsed.pairs.map(([key, value]) => {
+            let importedName = createImportedName(parsed.path, value);
+            if (icssExports[value]) {
+              result.warn(`"${value}" value already declared`, {
+                node: atRule
+              });
+            }
+            icssExports[value] = importedName;
+            return [importedName, key];
+          });
+          const aliases = fromPairs(pairs);
+          icssImports[parsed.path] = Object.assign(
+            {},
+            icssImports[parsed.path],
+            aliases
+          );
+        }
+      } else {
+        result.warn(`Invalid value definition "${atRule.params}"`, {
+          node: atRule
+        });
       }
-
-      addDefinition(atRule);
     }
+    atRule.remove();
   });
 
   replaceSymbols(css, icssExports);