build: convert stylelint rules to typescript

Converts the Stylelint rules to TypeScript so they're in line with the rest of the project and to make it easier to work with the PostCSS AST.

Author: crisbeto

.stylelintrc.json

@@ -1,11 +1,12 @@
 {
   "plugins": [
-    "./tools/stylelint/no-prefixes/index.js",
-    "./tools/stylelint/no-ampersand-beyond-selector-start.js",
-    "./tools/stylelint/selector-no-deep.js",
-    "./tools/stylelint/no-nested-mixin.js",
-    "./tools/stylelint/no-concrete-rules.js",
-    "./tools/stylelint/no-top-level-ampersand-in-mixin.js"
+    "./tools/stylelint/loader-rule.js",
+    "./tools/stylelint/no-prefixes/index.ts",
+    "./tools/stylelint/no-ampersand-beyond-selector-start.ts",
+    "./tools/stylelint/selector-no-deep.ts",
+    "./tools/stylelint/no-nested-mixin.ts",
+    "./tools/stylelint/no-concrete-rules.ts",
+    "./tools/stylelint/no-top-level-ampersand-in-mixin.ts"
   ],
   "rules": {
     "material/no-prefixes": [true, {

package.json

@@ -83,6 +83,7 @@
     "@firebase/app-types": "^0.3.2",
     "@octokit/rest": "16.28.7",
     "@schematics/angular": "^9.0.7",
+    "@types/autoprefixer": "^9.7.2",
     "@types/browser-sync": "^2.26.1",
     "@types/fs-extra": "^4.0.3",
     "@types/glob": "^5.0.33",
@@ -98,6 +99,7 @@
     "@types/run-sequence": "^0.0.29",
     "@types/semver": "^6.2.0",
     "@types/send": "^0.14.5",
+    "@types/stylelint": "^9.10.1",
     "autoprefixer": "^6.7.6",
     "axe-webdriverjs": "^1.1.1",
     "browser-sync": "^2.26.7",
@@ -136,6 +138,7 @@
     "moment": "^2.18.1",
     "node-fetch": "^2.6.0",
     "parse5": "^5.0.0",
+    "postcss": "^7.0.27",
     "protractor": "^5.4.3",
     "requirejs": "^2.3.6",
     "rollup": "~1.25.0",
@@ -150,7 +153,7 @@
     "semver": "^6.3.0",
     "send": "^0.17.1",
     "shelljs": "^0.8.3",
-    "stylelint": "^13.2.0",
+    "stylelint": "^13.3.1",
     "terser": "^4.3.9",
     "ts-api-guardian": "^0.5.0",
     "ts-node": "^3.0.4",

tools/stylelint/loader-rule.js

@@ -0,0 +1,11 @@
+const path = require('path');
+const stylelint = require('stylelint');
+
+// Custom rule that registers all of the custom rules, written in TypeScript, with ts-node. This is
+// necessary, because `stylelint` and IDEs won't execute any rules that aren't in a .js file.
+require('ts-node').register({
+  project: path.join(__dirname, '../gulp/tsconfig.json')
+});
+
+// Dummy rule so Stylelint doesn't complain that there aren't rules in the file.
+module.exports = stylelint.createPlugin('material/loader', () => {});

tools/stylelint/no-ampersand-beyond-selector-start.js renamed to tools/stylelint/no-ampersand-beyond-selector-start.ts

@@ -1,28 +1,40 @@
-const stylelint = require('stylelint');
-const path = require('path');
+import {createPlugin, utils} from 'stylelint';
+import {basename} from 'path';
+import {Node} from 'postcss';
+
 const isStandardSyntaxRule = require('stylelint/lib/utils/isStandardSyntaxRule');
 const isStandardSyntaxSelector = require('stylelint/lib/utils/isStandardSyntaxSelector');
 
 const ruleName = 'material/no-ampersand-beyond-selector-start';
-const messages = stylelint.utils.ruleMessages(ruleName, {
+const messages = utils.ruleMessages(ruleName, {
   expected: () => 'Ampersand is only allowed at the beginning of a selector',
 });
 
+/** Config options for the rule. */
+interface RuleOptions {
+  filePattern: string;
+}
+
 /**
  * Stylelint rule that doesn't allow for an ampersand to be used anywhere
  * except at the start of a selector. Skips private mixins.
  *
  * Based off the `selector-nested-pattern` Stylelint rule.
  * Source: https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-nested-pattern/
  */
-const plugin = stylelint.createPlugin(ruleName, (isEnabled, options) => {
+const plugin = createPlugin(ruleName, (isEnabled: boolean, _options?) => {
   return (root, result) => {
-    if (!isEnabled) return;
+    if (!isEnabled) {
+      return;
+    }
 
+    const options = _options as RuleOptions;
     const filePattern = new RegExp(options.filePattern);
-    const fileName = path.basename(root.source.input.file);
+    const fileName = basename(root.source!.input.file!);
 
-    if (!filePattern.test(fileName)) return;
+    if (!filePattern.test(fileName)) {
+      return;
+    }
 
     root.walkRules(rule => {
       if (
@@ -36,7 +48,7 @@ const plugin = stylelint.createPlugin(ruleName, (isEnabled, options) => {
 
         // Skip rules inside private mixins.
         if (!mixinName || !mixinName.startsWith('_')) {
-          stylelint.utils.report({
+          utils.report({
             result,
             ruleName,
             message: messages.expected(),
@@ -48,7 +60,7 @@ const plugin = stylelint.createPlugin(ruleName, (isEnabled, options) => {
   };
 
   /** Walks up the AST and finds the name of the closest mixin. */
-  function getClosestMixinName(node) {
+  function getClosestMixinName(node: Node): string | undefined {
     let parent = node.parent;
 
     while (parent) {
@@ -58,9 +70,11 @@ const plugin = stylelint.createPlugin(ruleName, (isEnabled, options) => {
 
       parent = parent.parent;
     }
+
+    return undefined;
   }
 });
 
 plugin.ruleName = ruleName;
 plugin.messages = messages;
-module.exports = plugin;
+export default plugin;

tools/stylelint/no-concrete-rules.js renamed to tools/stylelint/no-concrete-rules.ts

@@ -1,29 +1,40 @@
-const stylelint = require('stylelint');
-const path = require('path');
+import {createPlugin, utils} from 'stylelint';
+import {basename} from 'path';
+
 const ruleName = 'material/no-concrete-rules';
-const messages = stylelint.utils.ruleMessages(ruleName, {
+const messages = utils.ruleMessages(ruleName, {
   expected: pattern => `CSS rules must be placed inside a mixin for files matching '${pattern}'.`
 });
 
+/** Config options for the rule. */
+interface RuleOptions {
+  filePattern: string;
+}
+
 /**
  * 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) => {
+const plugin = createPlugin(ruleName, (isEnabled: boolean, _options) => {
   return (root, result) => {
-    if (!isEnabled) return;
+    if (!isEnabled) {
+      return;
+    }
 
+    const options = _options as RuleOptions;
     const filePattern = new RegExp(options.filePattern);
-    const fileName = path.basename(root.source.input.file);
+    const fileName = basename(root.source!.input.file!);
 
-    if (!filePattern.test(fileName)) return;
+    if (!filePattern.test(fileName) || !root.nodes) {
+      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({
+        utils.report({
           result,
           ruleName,
           node,
@@ -36,4 +47,4 @@ const plugin = stylelint.createPlugin(ruleName, (isEnabled, options) => {
 
 plugin.ruleName = ruleName;
 plugin.messages = messages;
-module.exports = plugin;
+export default plugin;

tools/stylelint/no-nested-mixin.js renamed to tools/stylelint/no-nested-mixin.ts

@@ -1,35 +1,34 @@
-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;
+import {createPlugin, utils} from 'stylelint';
+
+const ruleName = 'material/no-nested-mixin';
+const messages = utils.ruleMessages(ruleName, {
+  expected: () => 'Nested mixins are not allowed.',
+});
+
+/**
+ * Stylelint plugin that prevents nesting Sass mixins.
+ */
+const plugin = createPlugin(ruleName, (isEnabled: boolean) => {
+  return (root, result) => {
+    if (!isEnabled) { return; }
+
+    root.walkAtRules(rule => {
+      if (rule.name !== 'mixin') { return; }
+
+      rule.walkAtRules(childRule => {
+        if (childRule.name !== 'mixin') { return; }
+
+        utils.report({
+          result,
+          ruleName,
+          message: messages.expected(),
+          node: childRule
+        });
+      });
+    });
+  };
+});
+
+plugin.ruleName = ruleName;
+plugin.messages = messages;
+export default plugin;

tools/stylelint/no-prefixes/index.js renamed to tools/stylelint/no-prefixes/index.ts

@@ -1,29 +1,36 @@
-const stylelint = require('stylelint');
-const NeedsPrefix = require('./needs-prefix');
-const parseSelector = require('stylelint/lib/utils/parseSelector');
-const minimatch = require('minimatch');
+import {createPlugin, utils} from 'stylelint';
+import * as minimatch from 'minimatch';
+import {NeedsPrefix} from './needs-prefix';
 
+const parseSelector = require('stylelint/lib/utils/parseSelector');
 const ruleName = 'material/no-prefixes';
-const messages =  stylelint.utils.ruleMessages(ruleName, {
+const messages =  utils.ruleMessages(ruleName, {
   property: property => `Unprefixed property "${property}".`,
   value: (property, value) => `Unprefixed value in "${property}: ${value}".`,
   atRule: name => `Unprefixed @rule "${name}".`,
   mediaFeature: value => `Unprefixed media feature "${value}".`,
   selector: selector => `Unprefixed selector "${selector}".`
 });
 
+/** Config options for the rule. */
+interface RuleOptions {
+  browsers: string[];
+  filePattern: string;
+}
+
 /**
  * Stylelint plugin that warns for unprefixed CSS.
  */
-const plugin = stylelint.createPlugin(ruleName, (isEnabled, options) => {
+const plugin = createPlugin(ruleName, (isEnabled: boolean, _options?) => {
   return (root, result) => {
-    if (!isEnabled || !stylelint.utils.validateOptions(result, ruleName, {})) {
+    if (!isEnabled) {
       return;
     }
 
+    const options = _options as RuleOptions;
     const {browsers, filePattern} = options;
 
-    if (filePattern && !minimatch(root.source.input.file, filePattern)) {
+    if (filePattern && !minimatch(root.source!.input.file!, filePattern)) {
       return;
     }
 
@@ -32,15 +39,15 @@ const plugin = stylelint.createPlugin(ruleName, (isEnabled, options) => {
     // Check all of the `property: value` pairs.
     root.walkDecls(decl => {
       if (needsPrefix.property(decl.prop)) {
-        stylelint.utils.report({
+        utils.report({
           result,
           ruleName,
           message: messages.property(decl.prop),
           node: decl,
           index: (decl.raws.before || '').length
         });
       } else if (needsPrefix.value(decl.prop, decl.value)) {
-        stylelint.utils.report({
+        utils.report({
           result,
           ruleName,
           message: messages.value(decl.prop, decl.value),
@@ -53,14 +60,14 @@ const plugin = stylelint.createPlugin(ruleName, (isEnabled, options) => {
     // Check all of the @-rules and their values.
     root.walkAtRules(rule => {
       if (needsPrefix.atRule(rule.name)) {
-        stylelint.utils.report({
+        utils.report({
           result,
           ruleName,
           message: messages.atRule(rule.name),
           node: rule
         });
       } else if (needsPrefix.mediaFeature(rule.params)) {
-        stylelint.utils.report({
+        utils.report({
           result,
           ruleName,
           message: messages.mediaFeature(rule.name),
@@ -73,10 +80,10 @@ const plugin = stylelint.createPlugin(ruleName, (isEnabled, options) => {
     root.walkRules(rule => {
       // Silence warnings for Sass selectors. Stylelint does this in their own rules as well:
       // https://github.com/stylelint/stylelint/blob/master/lib/utils/isStandardSyntaxSelector.js
-      parseSelector(rule.selector, { warn: () => {} }, rule, selectorTree => {
-        selectorTree.walkPseudos(pseudoNode => {
+      parseSelector(rule.selector, { warn: () => {} }, rule, (selectorTree: any) => {
+        selectorTree.walkPseudos((pseudoNode: any) => {
           if (needsPrefix.selector(pseudoNode.value)) {
-            stylelint.utils.report({
+            utils.report({
               result,
               ruleName,
               message: messages.selector(pseudoNode.value),
@@ -94,4 +101,4 @@ const plugin = stylelint.createPlugin(ruleName, (isEnabled, options) => {
 
 plugin.ruleName = ruleName;
 plugin.messages = messages;
-module.exports = plugin;
+export default plugin;