fix: make fallback script work with multiple variables per line (#252)

Author: vladitasev

packages/base/package.json

@@ -25,6 +25,7 @@
     "url-search-params-polyfill": "^5.0.0"
   },
   "devDependencies": {
+    "array-uniq": "^2.0.0",
     "eslint": "^5.13.0",
     "eslint-config-airbnb-base": "^13.1.0"
   },

packages/main/lib/postcss-add-fallback/index.js

@@ -1,5 +1,6 @@
 const postcss = require('postcss');
 const fs = require('fs');
+const arrayUniq = require('array-uniq');
 
 const findCSSVars = styleString => {
 	const vars = new Map();
@@ -24,12 +25,16 @@ module.exports = postcss.plugin('add fallback plugin', function (opts) {
 
 		root.walkDecls(decl => {
 			// extract var name
-			const match = decl.value.match(/var\((.+)\)/);
-			if (match) {
-				const varName = match[1];
-				if (params.has(varName)) {
-					decl.value = decl.value.replace(varName, `${varName}, ${params.get(varName)}`)
-				}
+			let matches = decl.value.match(/var\(([^\,\(\)]+)\)/g);
+			matches = arrayUniq(matches);
+			if (matches) {
+				matches.forEach(varMatch => {
+					const varNameMatch = varMatch.match(/var\((.*)\)/);
+					const varName = varNameMatch[1];
+					if (params.has(varName)) {
+						decl.value = decl.value.replace(new RegExp(varName, 'g'), `${varName}, ${params.get(varName)}`)
+					}
+				});
 			}
 			params.set(decl.prop, decl.value);
 		});

yarn.lock

@@ -1233,6 +1233,11 @@ array-uniq@^1.0.1, array-uniq@^1.0.3:
   resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
   integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
 
+array-uniq@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-2.0.0.tgz#0009e30306e37a6dd2e2e2480db5316fdade1583"
+  integrity sha512-O3QZEr+3wDj7otzF7PjNGs6CA3qmYMLvt5xGkjY/V0VxS+ovvqVo/5wKM/OVOAyuX4DTh9H31zE/yKtO66hTkg==
+
 array-unique@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"