Fix error reporting for dimension-no-non-numeric-values

src/rules/dimension-no-non-numeric-values/__tests__/index.js

@@ -1,4 +1,4 @@
-import rule, { ruleName, messages, units } from "..";
+import rule, { messages, ruleName, units } from "..";
 
 testRule(rule, {
   ruleName,
@@ -32,26 +32,82 @@ testRule(rule, {
         padding: #{$value}%unit%;
       }
       `,
-    messages: messages.rejected,
+    message: messages.rejected("%unit%"),
+    line: 3,
+    column: 27,
     description: "Rejects interpolation with %unit%"
   }).concat([
     {
       code: "$pad: 2; $padAndMore: #{$pad + 5}px;",
       description: "reports lint when expression used in interpolation",
-      messages: messages.rejected("px")
+      line: 1,
+      column: 34,
+      message: messages.rejected("px")
+    },
+    {
+      code: `
+      p {
+        padding: ($foo * 1rem) #{$foo}px;
+      }
+      `,
+      description: "reports lint when mixing accepted and rejected syntax",
+      line: 3,
+      column: 39,
+      message: messages.rejected("px")
+    },
+    {
+      code: `
+      p {
+        padding: ($foo * 1rem) #{$foo}px 4vmin;
+      }
+      `,
+      description: "reports lint when mixing accepted and rejected syntax",
+      line: 3,
+      column: 39,
+      message: messages.rejected("px")
+    },
+    {
+      code: `
+      p {
+        padding: 1em #{$foo}vmin;
+      }
+      `,
+      description: "reports lint when mixing normal unit and rejected syntax",
+      line: 3,
+      column: 29,
+      message: messages.rejected("vmin")
+    },
+    {
+      code: `
+      p {
+        padding: 1em #{$foo}vmin 2rem;
+      }
+      `,
+      description: "reports lint when mixing normal unit and rejected syntax",
+      line: 3,
+      column: 29,
+      message: messages.rejected("vmin")
     }
   ])
 });
 
 function loopOverUnits(codeBlock) {
   return units.map(unit => {
     const block = {
-      code: codeBlock.code.replace("%unit%", unit),
-      description: codeBlock.description.replace("%unit%", unit)
+      code: codeBlock.code.replace(/%unit%/g, unit),
+      description: codeBlock.description.replace(/%unit%/g, unit)
     };
 
-    if (codeBlock.messages) {
-      block["messages"] = codeBlock.messages.call(unit);
+    if (codeBlock.message) {
+      block.message = codeBlock.message.replace(/%unit%/g, unit);
+    }
+
+    if (codeBlock.line) {
+      block.line = codeBlock.line;
+    }
+
+    if (codeBlock.column) {
+      block.column = codeBlock.column;
     }
 
     return block;

src/rules/dimension-no-non-numeric-values/index.js

@@ -1,12 +1,12 @@
-import { utils } from "stylelint";
-import { namespace } from "../../utils";
 import valueParser from "postcss-value-parser";
+import { utils } from "stylelint";
+import { declarationValueIndex, namespace } from "../../utils";
 
 export const ruleName = namespace("dimension-no-non-numeric-values");
 
 export const messages = utils.ruleMessages(ruleName, {
   rejected: unit =>
-    `Expected "$value * 1${unit}" instead of "#{value}${unit}". Consider writing "value" in terms of ${unit} originally.`
+    `Expected "$value * 1${unit}" instead of "#{$value}${unit}". Consider writing "value" in terms of ${unit} originally.`
 });
 
 export const units = [
@@ -91,10 +91,18 @@ export default function rule(primary) {
           return;
         }
 
+        const regex = new RegExp(
+          "#{[$a-z_0-9 +-]*}(" + units.join("|") + ");?"
+        );
+        const matchUnit = decl.value.match(regex);
+        const unit = matchUnit[1];
+        const offset = decl.value.indexOf(unit);
+
         utils.report({
           ruleName,
           result,
-          message: messages.rejected,
+          message: messages.rejected(unit),
+          index: declarationValueIndex(decl) + offset,
           node: decl
         });
       });