Make sure we point out to the not defined but used props correctly

Author: ezhlobo

lib/util/getUsedVariablesInPug.js

@@ -154,8 +154,17 @@ const getUsedVariablesInPug = (template = '') => {
         variablesInScope = getUsedVariablesInPug(body)
           .filter(item => item.allNames.length > 1 || item.extra.isSpreadElement === true)
           .map(item => ({
-            // @TODO: Make the `loc` value relative to the main template
             ...item,
+            loc: {
+              start: {
+                line: variable.loc.start.line + item.loc.start.line - 1,
+                column: item.loc.start.column,
+              },
+              end: {
+                line: variable.loc.start.line + item.loc.end.line - 1,
+                column: item.loc.end.column,
+              },
+            },
             allNames: item.allNames[0] === token.val
               ? ['__COMPUTED_PROP__', ...item.allNames.slice(1)]
               : item.allNames,

tests/lib/rules/prop-types.js

@@ -641,6 +641,31 @@ const cases = [
           buildError([9, 23], [9, 37], buildUnusedMessage('a.unused')),
         ],
       },
+      {
+        only: true,
+        code: `
+          function Component(props) {
+            const id = true
+
+            return pug\`
+              each item in props.list
+                div
+                  div(key=item.id)
+                    = item.test
+                  div Hello
+
+              = item.test
+            \`
+          }
+          Component.propTypes = {
+            list: PropTypes.arrayOf(PropTypes.shape({})),
+          }
+        `,
+        errors: [
+          buildError([8, 32], [8, 34], buildMissingMessage('list[].id')),
+          buildError([9, 28], [9, 32], buildMissingMessage('list[].test')),
+        ],
+      },
     ],
   },
 ]