build: add stylelint rule to prevent nested mixins (#5354)

Adds a Stylelint rule that will prevent uses of nested mixins. This will help prevent issues like #5232 in the future.

Author: crisbeto

stylelint-config.json

@@ -2,11 +2,13 @@
   "plugins": [
     "./tools/stylelint/no-prefixes/no-prefixes.js",
     "./tools/stylelint/selector-nested-pattern-scoped/index.js",
-    "./tools/stylelint/selector-no-deep/index.js"
+    "./tools/stylelint/selector-no-deep/index.js",
+    "./tools/stylelint/no-nested-mixin/index.js"
   ],
   "rules": {
     "material/no-prefixes": [["last 2 versions", "not ie <= 10", "not ie_mob <= 10"]],
     "material/selector-no-deep": true,
+    "material/no-nested-mixin": true,
     "material/selector-nested-pattern-scoped": [".*[^&]$", {
       "message": "The & operator is not allowed at the end of theme selectors.",
       "filePattern": "-theme\\.scss$"

tools/stylelint/no-nested-mixin/index.js

@@ -0,0 +1,35 @@
+const stylelint = require('stylelint');
+
+const ruleName = 'material/no-nested-mixin';
+const messages = stylelint.utils.ruleMessages(ruleName, {
+  expected: () => 'Nested mixins are not allowed.',
+});
+
+
+/**
+ * Stylelint plugin that prevents nesting SASS mixins.
+ */
+const plugin = stylelint.createPlugin(ruleName, isEnabled => {
+  return (root, result) => {
+    if (!isEnabled) return;
+
+    root.walkAtRules(rule => {
+      if (rule.name !== 'mixin') return;
+
+      rule.walkAtRules(childRule => {
+        if (childRule.name !== 'mixin') return;
+
+        stylelint.utils.report({
+          result,
+          ruleName,
+          message: messages.expected(),
+          node: childRule
+        });
+      });
+    });
+  };
+});
+
+plugin.ruleName = ruleName;
+plugin.messages = messages;
+module.exports = plugin;