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};
+ }
+}