diff --git a/.tape.js b/.tape.js index e62812a..cc7d4cc 100644 --- a/.tape.js +++ b/.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') + } + }, }; diff --git a/src/lib/get-value-as-object.js b/src/lib/get-value-as-object.js index 543e8e4..1be2077 100644 --- a/src/lib/get-value-as-object.js +++ b/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*$/; diff --git a/src/lib/transform-each-atrule.js b/src/lib/transform-each-atrule.js index bcd6ef0..a28dbe6 100644 --- a/src/lib/transform-each-atrule.js +++ b/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 }; }; diff --git a/test/each.expect.scss b/test/each.expect.scss new file mode 100644 index 0000000..b481b36 --- /dev/null +++ b/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"; + } diff --git a/test/each.scss b/test/each.scss new file mode 100644 index 0000000..9ccf642 --- /dev/null +++ b/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}; + } +}