feat: support nested and multiple invocation

fixes #13

Author: marcalexiei

package.json

@@ -19,7 +19,8 @@
     "version": "conventional-changelog -i changelog.md -s -r 0 && git commit -am \"build: update changelog\"",
     "prepare": "npm run build",
     "build": "rimraf lib && babel src -d lib",
-    "test": "nyc ava"
+    "test": "nyc ava",
+    "coverage": "nyc --reporter=lcov --reporter=text-summary ava"
   },
   "files": [
     "lib/"

src/constant.js

@@ -1,2 +1 @@
 export const METHOD = 'map-get((';
-export const CLOSING_PARENTHESIS = ')';

src/index.js

@@ -1,50 +1,22 @@
 import postcss from 'postcss';
-import strGetContent from './str-get-content';
+import processValue from './process-value';
 import {METHOD} from './constant';
 
-const getKeyFromMapString = (mapString, key) => {
-  // Remove all whitespace character from the key
-  const keyValue = key.replace(/\s/g, '');
-
-  let requiredValue;
-
-  mapString.split(',').some(completePropertyString => {
-    if (completePropertyString.includes(':')) {
-      const [key, value] = completePropertyString.split(':');
-      if (key.trim() === keyValue) {
-        requiredValue = value.trim();
-      }
-    } else {
-      requiredValue = completePropertyString;
-    }
-
-    return Boolean(requiredValue);
-  });
-
-  return requiredValue;
-};
-
-const valResolve = val => {
-  const {before, map, key, after} = strGetContent(val);
-
-  return `${before}${getKeyFromMapString(map, key)}${after}`;
-};
-
 export default postcss.plugin('postcss-map-get', () => {
   return nodes => {
     nodes.walkDecls(decl => {
       let {value} = decl;
 
       if (value.includes(METHOD)) {
-        decl.value = valResolve(decl.value);
+        decl.value = processValue(decl.value);
       }
     });
 
     nodes.walkAtRules(rules => {
-      const {params} = rules;
+      const {params: parameters} = rules;
 
-      if (params.includes(METHOD)) {
-        rules.params = valResolve(params);
+      if (parameters.includes(METHOD)) {
+        rules.params = processValue(parameters);
       }
     });
   };

src/parse-parenthesis-content.js

@@ -0,0 +1,31 @@
+/**
+ * Get all the content inside brackets
+ * @param {string} stringToParse string with parenthesis. This string must start with an `()`
+ * @param {string} [startingPosition] to start parsing
+ * @returns {{content: string, position: number}} All the content inside parenthesis including nested properties
+ *
+ * @todo might worth to parse the string until a `(` is found?
+ */
+export default function parseParenthesisContent(stringToParse, startingPosition = 0) {
+  let position = startingPosition;
+  let content = '';
+
+  const stack = [];
+  while (true) { // eslint-disable-line no-constant-condition
+    const mapChracter = stringToParse[position];
+    if (mapChracter === '(') {
+      stack.push(mapChracter);
+    } else if (mapChracter === ')') {
+      stack.pop();
+    }
+
+    content += mapChracter;
+    position++; // go ahead
+
+    if (stack.length === 0) {
+      break;
+    }
+  }
+
+  return {content, position};
+}

src/process-value.js

@@ -0,0 +1,115 @@
+import {METHOD} from './constant';
+
+import parseParenthesisContent from './parse-parenthesis-content';
+
+/**
+ * @param {string} mapString SASS map string without opening parenthesis
+ * @param {string} keyParameter the key to extract from the map
+ * @returns {?string} retrieved `keyParameter` value from the map
+ */
+function getKeyFromMapString(mapString, keyParameter) {
+  // remove all whitespace character from the key
+  const keyValue = keyParameter.replace(/\s/g, '');
+  // remove open and close parenthesis from the map string
+  mapString = mapString.slice(1, -1);
+
+  const map = {};
+
+  let isParsingKey = true;
+
+  let key = '';
+  let value = '';
+
+  for (let position = 0; position < mapString.length; position++) {
+    const currentCharacter = mapString[position];
+
+    if (isParsingKey) { // process the key (add all characters until find a :)
+      if (currentCharacter === ':') {
+        isParsingKey = false;
+      } else {
+        key += currentCharacter;
+      }
+    } else if (currentCharacter === '(') {
+      // if value contains a `(` that means that is map so parse the string until the `(` is closed
+      const output = parseParenthesisContent(mapString, position);
+      value += output.content;
+      position = output.position;
+
+      map[key] = value.trim();
+
+      // value declaration is complete return to check key and reset both variables
+      isParsingKey = true;
+      key = '';
+      value = '';
+    } else {
+      // simple map with property / value pairs
+      const isLastCharacter = position === mapString.length - 1;
+      if (currentCharacter === ',' || isLastCharacter) { // map with only one property or end of the string
+        if (isLastCharacter) {
+          value += currentCharacter;
+        }
+
+        map[key] = value.trim();
+
+        isParsingKey = true;
+        key = '';
+        value = '';
+      } else {
+        value += currentCharacter;
+      }
+    }
+  }
+
+  return map[keyValue];
+}
+
+/**
+ * @param {string} value CSS property value including map-get invocation
+ * @returns {string} value of css property resolved by map-get
+ */
+export default function (value) {
+  let resolvedValue = value;
+  // start to resolve map-get more nested
+  let indexOfMethod = resolvedValue.indexOf(METHOD);
+  while (indexOfMethod > -1) {
+    const startPosition = indexOfMethod;
+    let position = (startPosition + METHOD.length) - 1;
+
+    let mapString = '';
+
+    // resolve map content
+    const output = parseParenthesisContent(resolvedValue, position);
+    mapString += output.content;
+    position = output.position;
+
+    // resolve the desidered requested key
+    let keyString = '';
+    let hasFoundComa = false;
+
+    for (; position < resolvedValue.length; position++) {
+      const currentCharacter = resolvedValue[position];
+
+      if (currentCharacter === ',') {
+        hasFoundComa = true;
+      } else if (currentCharacter === ')') {
+        break;
+      } else if (hasFoundComa) {
+        keyString += currentCharacter;
+      }
+    }
+
+    // get the original invocation string
+    position++; // Include last closing parenthesis
+    const currentDeclaration = resolvedValue.slice(startPosition, position);
+
+    const mapResolvedValue = getKeyFromMapString(mapString, keyString);
+
+    // replace the value string with the resolved value
+    resolvedValue = resolvedValue.replace(currentDeclaration, mapResolvedValue);
+
+    // check if property value contains another map-get invocation
+    indexOfMethod = resolvedValue.indexOf(METHOD);
+  }
+
+  return resolvedValue;
+}

src/str-get-content.js

@@ -0,0 +1,33 @@
+import test from 'ava';
+import parseParenthesisContent from '../src/parse-parenthesis-content';
+
+const tests = [
+  {
+    stringToParse: '(foo: bar) something else',
+    expectedContent: '(foo: bar)'
+  },
+  {
+    stringToParse: '(foo: bar, asd: (innerFoo: innerBar)) something else',
+    expectedContent: '(foo: bar, asd: (innerFoo: innerBar))'
+  },
+  {
+    stringToParse: '(foo: bar, asd: (innerFoo: (deepFoo: deepBar))) something else',
+    expectedContent: '(foo: bar, asd: (innerFoo: (deepFoo: deepBar)))'
+  },
+  {
+    stringToParse: 'before(foo: bar, asd: (innerFoo: (deepFoo: deepBar))) something else',
+    startPosition: 6,
+    expectedContent: '(foo: bar, asd: (innerFoo: (deepFoo: deepBar)))'
+  }
+];
+
+tests.forEach(({stringToParse, startPosition, expectedContent}, testIndex) => {
+  test(`parse-parenthesis-content ${testIndex} – "${stringToParse}" should result in "${expectedContent}"`, function (t) {
+    const output = parseParenthesisContent(stringToParse, startPosition);
+
+    t.deepEqual(output.content, expectedContent);
+
+    const expectedPosition = stringToParse.indexOf(expectedContent) + expectedContent.length;
+    t.deepEqual(output.position, expectedPosition);
+  });
+});

test/test.parse-parenthesis-content.js

@@ -42,9 +42,14 @@ test('it should keep proper string format for element before invocation, borderS
   t.is(processing(value), expected);
 });
 
-test('multi getters property', t => {
-  const expected = '.foo {color: "green"}';
-  const value = '.foo {color: map-get(map-get((corporate: (textColor: "green"), ea: (textColor: "black")), corporate), textColor)}';
+test('it should resolve multiple map-get on the same property value', t => {
+  const expected = '.foo {border: 1px solid #FFF;}';
+  const value = '.foo {border: 1px map-get((borderStyle: solid), borderStyle) map-get((borderColor: #FFF), borderColor);}';
   t.is(processing(value), expected);
 });
 
+test('it should resolve nested invocation', t => {
+  const expected = '.foo {color: green}';
+  const value = '.foo {color: map-get(map-get((corporate: (textColor: green), ea: (textColor: black)), corporate), textColor)}';
+  t.is(processing(value), expected);
+});