fix: improve support for each

.tape.js

@@ -156,4 +156,13 @@ module.exports = {
 			syntax: require('postcss-scss')
 		}
 	},
+	'each': {
+		message: 'supports each',
+		source: 'each.scss',
+		expect: 'each.expect.scss',
+		result: 'each.result.scss',
+		processOptions: {
+			syntax: require('postcss-scss')
+		}
+	},
 };

src/lib/get-value-as-object.js

@@ -38,7 +38,7 @@ export default function getValueAsObject(value) {
 const matchWrappingParens = /^\(([\W\w]*)\)$/g;
 
 // match a property name (any-possible_name)
-const matchDeclaration = /^([\w-]+)\s*:\s*([\W\w]+)\s*$/;
+const matchDeclaration = /^["']?([\w-]+)["']?\s*:\s*([\W\w]+)\s*$/;
 
 // match a trailing comma
 const matchTrailingComma = /\s*,\s*$/;

src/lib/transform-each-atrule.js

@@ -55,7 +55,7 @@ export default function transformEachAtrule(rule, opts) {
 // return the @each statement options (@each NAME in LIST, @each NAME ITERATOR in LIST)
 const getEachOpts = (node, opts) => {
 	const params = node.params.split(matchInOperator);
-	const args    = (params[0] || '').trim().split(' ');
+	const args    = (params[0] || '').trim().split(/[\s,]+/);
 	const varname = args[0].trim().slice(1);
 	const incname = args.length > 1 && args[1].trim().slice(1);
 	const rawlist = getValueAsObject(
@@ -67,6 +67,11 @@ const getEachOpts = (node, opts) => {
 	);
 	const list = 'string' === typeof rawlist ? [rawlist] : rawlist;
 
+	const reverseParams = incname && !Array.isArray(list)
+	if (reverseParams) {
+		return { incname: varname, varname: incname, list };
+	}
+
 	return { varname, incname, list };
 };
 

test/each.expect.scss

@@ -0,0 +1,47 @@
+/* arrayTest: $value */
+.one-arrayTest {
+      	content: one;
+    }
+.two-arrayTest {
+      	content: two;
+    }
+
+/* arrayTest: $value, $key */
+.0-arrayTest {
+      content: one;
+    }
+.1-arrayTest {
+      content: two;
+    }
+
+/* objectTest: $value */
+."1"-arrayTest {
+      	content: "1";
+    }
+."2"-arrayTest {
+      	content: "2";
+    }
+
+/* objectTest: $key, $value */
+.one-arrayTest {
+      content: "1";
+    }
+.two-arrayTest {
+      content: "2";
+    }
+
+/* objectStringTest: $key, $value */
+.one-arrayTest {
+      content: "1";
+    }
+.two-arrayTest {
+      content: "2";
+    }
+
+/* objectStringTestMultiLine: $key, $value */
+.one-arrayTest {
+      content: "1";
+    }
+.two-arrayTest {
+      content: "2";
+    }

test/each.scss

@@ -0,0 +1,51 @@
+$arrayTest: (one, two);
+
+$objectTest: (one: "1", two: "2");
+$objectStringTest: ("one": "1", "two": "2");
+
+$objectStringTestMultiLine: (
+	"one": "1",
+	"two": "2"
+);
+
+/* arrayTest: $value */
+@each $value in $arrayTest {
+    .#{$value}-arrayTest {
+      	content: #{$value};
+    }
+}
+
+/* arrayTest: $value, $key */
+@each $value, $key in $arrayTest {
+    .#{$key}-arrayTest {
+      content: #{$value};
+    }
+}
+
+/* objectTest: $value */
+@each $value in $objectTest {
+    .#{$value}-arrayTest {
+      	content: #{$value};
+    }
+}
+
+/* objectTest: $key, $value */
+@each $key, $value in $objectTest {
+    .#{$key}-arrayTest {
+      content: #{$value};
+    }
+}
+
+/* objectStringTest: $key, $value */
+@each $key, $value in $objectStringTest {
+    .#{$key}-arrayTest {
+      content: #{$value};
+    }
+}
+
+/* objectStringTestMultiLine: $key, $value */
+@each $key, $value in $objectStringTestMultiLine {
+    .#{$key}-arrayTest {
+      content: #{$value};
+    }
+}