build: fix theming api lint rule (#22011)

Reworks the `theme-mixin-api` lint rule to account for the Sass module changes.

Author: crisbeto

src/material/expansion/_expansion-theme.scss

@@ -91,7 +91,7 @@
 
 @mixin theme($theme-or-color-config) {
   $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-expansion-panel') {
+  @include theming.private-check-duplicate-theme-styles($theme, 'mat-expansion') {
     $color: theming.get-color-config($theme);
     $density: theming.get-density-config($theme);
     $typography: theming.get-typography-config($theme);

tools/stylelint/theme-mixin-api.ts

@@ -1,4 +1,5 @@
 import {createPlugin, Plugin, utils} from 'stylelint';
+import {basename} from 'path';
 import {
   AtRule,
   atRule,
@@ -13,8 +14,7 @@ import {
 const ruleName = 'material/theme-mixin-api';
 
 /** Regular expression that matches all theme mixins. */
-const themeMixinRegex =
-    /^(?:(mat-.+)-(density)|(mat-.+)-(density|color|typography|theme))\((.*)\)$/;
+const themeMixinRegex = /^(density|color|typography|theme)\((.*)\)$/;
 
 /**
  * Stylelint plugin which ensures that theme mixins have a consistent API. Besides
@@ -31,13 +31,14 @@ const themeMixinRegex =
  */
 const plugin = (isEnabled: boolean, _options: never, context: {fix: boolean}) => {
   return (root: Root, result: Result) => {
-    if (!isEnabled) {
+    const componentName = getComponentNameFromPath(root.source!.input.file!);
+
+    if (!componentName || !isEnabled) {
       return;
     }
 
     root.walkAtRules('mixin', node => {
-      if (node.params.startsWith('_') || node.params.startsWith('mat-private-') ||
-          node.params.startsWith('mat-mdc-private-')) {
+      if (node.params.startsWith('_') || node.params.startsWith('private-')) {
         // This is a private mixins that isn't intended to be consumed outside of our own code.
         return;
       }
@@ -47,24 +48,22 @@ const plugin = (isEnabled: boolean, _options: never, context: {fix: boolean}) =>
         return;
       }
 
-      // Name of the component with prefix. e.g. `mat-mdc-button` or `mat-slide-toggle`.
-      const componentName = matches[1] || matches[3];
       // Type of the theme mixin. e.g. `density`, `color`, `theme`.
-      const type = matches[2] || matches[4];
+      const type = matches[1];
       // Naively assumes that mixin arguments can be easily retrieved by splitting based on
       // a comma. This is not always correct because Sass maps can be constructed in parameters.
       // These would contain commas that throw of the argument retrieval. It's acceptable that
       // this rule will fail in such edge-cases. There is no AST for `postcss.AtRule` params.
-      const args = matches[5].split(',');
+      const args = matches[2].split(',').map(arg => arg.trim());
 
       if (type === 'theme') {
-        validateThemeMixin(node, componentName, args);
+        validateThemeMixin(node, args);
       } else {
         validateIndividualSystemMixins(node, type, args);
       }
     });
 
-    function validateThemeMixin(node: AtRule, componentName: string, args: string[]) {
+    function validateThemeMixin(node: AtRule, args: string[]) {
       if (args.length !== 1) {
         reportError(node, 'Expected theme mixin to only declare a single argument.');
       } else if (args[0] !== '$theme-or-color-config') {
@@ -76,9 +75,9 @@ const plugin = (isEnabled: boolean, _options: never, context: {fix: boolean}) =>
       }
 
       const themePropName = `$theme`;
-      const legacyColorExtractExpr = `mat-private-legacy-get-theme($theme-or-color-config)`;
+      const legacyColorExtractExpr = `theming.private-legacy-get-theme($theme-or-color-config)`;
       const duplicateStylesCheckExpr =
-          `mat-private-check-duplicate-theme-styles(${themePropName}, '${componentName}')`;
+          `theming.private-check-duplicate-theme-styles(${themePropName}, '${componentName}')`;
 
       let legacyConfigDecl: Declaration|null = null;
       let duplicateStylesCheck: AtRule|null = null;
@@ -155,14 +154,13 @@ const plugin = (isEnabled: boolean, _options: never, context: {fix: boolean}) =>
       }
 
       const expectedProperty = type === 'density' ? '$density-scale' : '$config';
-      const expectedValues = [`mat-get-${type}-config($config-or-theme)`];
-      if (type === 'typography') {
-        expectedValues.shift();
-        expectedValues.unshift(
-            'mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme))',
-            'mat-get-typography-config($config-or-theme)',
-        );
-      }
+      const expectedValues = type === 'typography' ?
+        [
+          'typography.private-typography-to-2014-config(' +
+              'theming.get-typography-config($config-or-theme))',
+          'theming.get-typography-config($config-or-theme)'
+        ] :
+        [`theming.get-${type}-config($config-or-theme)`];
       let configExtractionNode: Declaration|null = null;
       let nonCommentNodeCount = 0;
 
@@ -172,7 +170,8 @@ const plugin = (isEnabled: boolean, _options: never, context: {fix: boolean}) =>
             nonCommentNodeCount++;
           }
 
-          if (currentNode.type === 'decl' && expectedValues.includes(currentNode.value)) {
+          if (currentNode.type === 'decl' &&
+              expectedValues.includes(stripNewlinesAndIndentation(currentNode.value))) {
             configExtractionNode = currentNode;
             break;
           }
@@ -204,6 +203,30 @@ const plugin = (isEnabled: boolean, _options: never, context: {fix: boolean}) =>
   };
 };
 
+/** Figures out the name of the component from a file path. */
+function getComponentNameFromPath(filePath: string): string|null {
+  const match = basename(filePath).match(/_?(.*)-theme\.scss$/);
+
+  if (!match) {
+    return null;
+  }
+
+  let prefix = '';
+
+  if (filePath.includes('material-experimental')) {
+    prefix = 'mat-mdc-';
+  } else if (filePath.includes('material')) {
+    prefix = 'mat-';
+  }
+
+  return prefix + match[1];
+}
+
+/** Strips newlines from a string and any whitespace immediately after it. */
+function stripNewlinesAndIndentation(value: string): string {
+  return value.replace(/(\r|\n)\s+/g, '');
+}
+
 // Note: We need to cast the value explicitly to `Plugin` because the stylelint types
 // do not type the context parameter. https://stylelint.io/developer-guide/rules#add-autofix
 module.exports = createPlugin(ruleName, plugin as Plugin);