build: add stylelint rule to ban concrete CSS rules inside theme files

Adds a stylelint rule that will ensure that all of the CSS rules inside theme files are placed inside a mixin. This avoids style duplication whenever the file is imported.

Relates to angular#9999.

Author: crisbeto

stylelint-config.json

@@ -3,7 +3,8 @@
     "./tools/stylelint/no-prefixes/no-prefixes.js",
     "./tools/stylelint/selector-nested-pattern-scoped/index.js",
     "./tools/stylelint/selector-no-deep/index.js",
-    "./tools/stylelint/no-nested-mixin/index.js"
+    "./tools/stylelint/no-nested-mixin/index.js",
+    "./tools/stylelint/no-concrete-rules/index.js"
   ],
   "rules": {
     "material/no-prefixes": [["last 2 versions", "not ie <= 10", "not ie_mob <= 10"]],
@@ -13,6 +14,9 @@
       "message": "The & operator is not allowed at the end of theme selectors.",
       "filePattern": "-theme\\.scss$"
     }],
+    "material/no-concrete-rules": [true, {
+      "filePattern": "-theme\\.scss$"
+    }],
 
     "color-hex-case": "lower",
     "color-no-invalid-hex": true,
@@ -43,7 +47,7 @@
 
     "property-case": "lower",
 
-    "declaration-block-no-duplicate-properties": [ true, {
+    "declaration-block-no-duplicate-properties": [true, {
       "ignore": ["consecutive-duplicates-with-different-values"]
     }],
     "declaration-block-trailing-semicolon": "always",
@@ -53,8 +57,8 @@
     "declaration-block-semicolon-newline-before": "never-multi-line",
     "declaration-block-semicolon-newline-after": "always-multi-line",
     "declaration-property-value-blacklist": [
-        { "/.*/": ["initial"] },
-        { "message": "The `initial` value is not supported in IE."}
+        {"/.*/": ["initial"]},
+        {"message": "The `initial` value is not supported in IE."}
     ],
 
     "block-closing-brace-newline-after": "always",

tools/stylelint/no-concrete-rules/index.js

@@ -0,0 +1,39 @@
+const stylelint = require('stylelint');
+const path = require('path');
+const ruleName = 'material/no-concrete-rules';
+const messages = stylelint.utils.ruleMessages(ruleName, {
+  expected: pattern => `CSS rules must be placed inside a mixin for files matching '${pattern}'.`
+});
+
+/**
+ * Stylelint plugin that will log a warning for all top-level CSS rules.
+ * Can be used in theme files to ensure that everything is inside a mixin.
+ */
+const plugin = stylelint.createPlugin(ruleName, (isEnabled, options) => {
+  return (root, result) => {
+    if (!isEnabled) return;
+
+    const filePattern = new RegExp(options.filePattern);
+    const fileName = path.basename(root.source.input.file);
+
+    if (!filePattern.test(fileName)) return;
+
+    // Go through all the nodes and report a warning for every CSS rule or mixin inclusion.
+    // We use a regular `forEach`, instead of the PostCSS walker utils, because we only care
+    // about the top-level nodes.
+    root.nodes.forEach(node => {
+      if (node.type === 'rule' || (node.type === 'atrule' && node.name === 'include')) {
+        stylelint.utils.report({
+          result,
+          ruleName,
+          node,
+          message: messages.expected(filePattern)
+        });
+      }
+    });
+  };
+});
+
+plugin.ruleName = ruleName;
+plugin.messages = messages;
+module.exports = plugin;