Merge efa3f51 into 69a4c62

README.md

@@ -137,6 +137,7 @@ Please also see the [example configs](./docs/examples/) for special cases.
 
 ### General / Sheet
 
+- [`no-dollar-variables`](./src/rules/no-dollar-variables/README.md): Disallow dollar variables within a stylesheet.
 - [`no-duplicate-dollar-variables`](./src/rules/no-duplicate-dollar-variables/README.md): Disallow duplicate dollar variables within a stylesheet.
 
 ## Help out

src/rules/index.js

@@ -29,6 +29,7 @@ import doubleSlashCommentEmptyLineBefore from "./double-slash-comment-empty-line
 import doubleSlashCommentInline from "./double-slash-comment-inline";
 import doubleSlashCommentWhitespaceInside from "./double-slash-comment-whitespace-inside";
 import mediaFeatureValueDollarVariable from "./media-feature-value-dollar-variable";
+import noDollarVariables from "./no-dollar-variables";
 import noDuplicateDollarVariables from "./no-duplicate-dollar-variables";
 import operatorNoNewlineAfter from "./operator-no-newline-after";
 import operatorNoNewlineBefore from "./operator-no-newline-before";
@@ -69,6 +70,7 @@ export default {
   "double-slash-comment-inline": doubleSlashCommentInline,
   "double-slash-comment-whitespace-inside": doubleSlashCommentWhitespaceInside,
   "media-feature-value-dollar-variable": mediaFeatureValueDollarVariable,
+  "no-dollar-variables": noDollarVariables,
   "no-duplicate-dollar-variables": noDuplicateDollarVariables,
   "operator-no-newline-after": operatorNoNewlineAfter,
   "operator-no-newline-before": operatorNoNewlineBefore,

src/rules/no-dollar-variables/README.md

@@ -0,0 +1,38 @@
+# no-dollar-variables
+
+Disallow dollar variables within a stylesheet.
+
+```scss
+    $a: 1;
+/** ↑
+ * These dollar variables */
+```
+
+## Options
+
+### `true`
+
+The following patterns are considered violations:
+
+```scss
+$a: 1;
+```
+
+```scss
+$a: 1;
+$b: 2;
+```
+
+```scss
+.b {
+  $a: 1;
+}
+```
+
+The following patterns are *not* considered violations:
+
+```scss
+a {
+  color: blue;
+}
+```

src/rules/no-dollar-variables/__tests__/index.js

@@ -0,0 +1,91 @@
+import rule, { ruleName, messages } from "..";
+
+testRule(rule, {
+  ruleName,
+  config: [true],
+  syntax: "scss",
+
+  accept: [
+    {
+      code: "a { color: blue; }",
+      description: "No variables"
+    },
+    {
+      code: "a { @less: 0; @less: @less + 1; }",
+      description: "Less variables are ignored"
+    },
+    {
+      code: "a { --custom-property: 0; --custom-property: 1; }",
+      description: "Custom properties are ignored"
+    }
+  ],
+
+  reject: [
+    {
+      code: `
+      $a: 1;
+    `,
+      line: 2,
+      column: 7,
+      message: messages.rejected("$a"),
+      description: "A dollar variable"
+    },
+    {
+      code: `
+      $a: 1;
+
+      $b: 2;
+    `,
+      line: 2,
+      column: 7,
+      message: messages.rejected("$a"),
+      description: "Two dollar variables"
+    },
+    {
+      code: `
+      .b {
+        $a: 1;
+      }
+    `,
+      line: 3,
+      column: 9,
+      message: messages.rejected("$a"),
+      description: "A dollar variable inside a class selector"
+    },
+    {
+      code: `
+      %b {
+        $a: 1;
+      }
+    `,
+      line: 3,
+      column: 9,
+      message: messages.rejected("$a"),
+      description: "A dollar variable inside a placeholder selector"
+    },
+    {
+      code: `
+      @mixin test() {
+        $a: 1;
+      }
+    `,
+      line: 3,
+      column: 9,
+      message: messages.rejected("$a"),
+      description: "A dollar variable inside a @mixin"
+    },
+    {
+      code: `
+      .b {
+        .c {
+          $a: 1;
+        }
+      }
+    `,
+      line: 4,
+      column: 11,
+      message: messages.rejected("$a"),
+      description: "Nested dollar variable"
+    }
+  ]
+});

src/rules/no-dollar-variables/index.js

@@ -0,0 +1,33 @@
+import { utils } from "stylelint";
+import { namespace } from "../../utils";
+
+export const ruleName = namespace("no-dollar-variables");
+
+export const messages = utils.ruleMessages(ruleName, {
+  rejected: variable => `Unexpected dollar variable ${variable}`
+});
+
+export default function(value) {
+  return (root, result) => {
+    const validOptions = utils.validateOptions(result, ruleName, {
+      actual: value
+    });
+
+    if (!validOptions) {
+      return;
+    }
+
+    root.walkDecls(decl => {
+      if (decl.prop[0] !== "$") {
+        return;
+      }
+
+      utils.report({
+        message: messages.rejected(decl.prop),
+        node: decl,
+        result,
+        ruleName
+      });
+    });
+  };
+}