build: add lint rule to prevent @import usage (#22222)

Adds a custom lint rule that doesn't allow for `@import` to be used.

Author: crisbeto

.stylelintrc.json

@@ -8,7 +8,8 @@
     "./tools/stylelint/no-nested-mixin.ts",
     "./tools/stylelint/no-concrete-rules.ts",
     "./tools/stylelint/no-top-level-ampersand-in-mixin.ts",
-    "./tools/stylelint/theme-mixin-api.ts"
+    "./tools/stylelint/theme-mixin-api.ts",
+    "./tools/stylelint/no-import.ts"
   ],
   "rules": {
     "material/no-prefixes": [true, {
@@ -18,6 +19,9 @@
     "material/theme-mixin-api": true,
     "material/selector-no-deep": true,
     "material/no-nested-mixin": true,
+    "material/no-import": [true, {
+      "exclude": "\\.import\\.scss$"
+    }],
     "material/no-ampersand-beyond-selector-start": [true, {
       "filePattern": "-theme\\.scss$"
     }],
@@ -69,8 +73,8 @@
     "declaration-block-semicolon-newline-after": "always-multi-line",
     "declaration-colon-space-after": "always-single-line",
     "declaration-property-value-disallowed-list": [
-        {"/.*/": ["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",

src/material/core/theming/tests/test-theming-bundle.scss

@@ -1,6 +1,7 @@
 // Imports the theming bundle. Needs to be an absolute bin-dir import path as on Windows,
 // runfiles are not symlinked, so the Sass compilation happens in the workspace directory
 // with the include paths being set to the `bazel-bin` directory.
+// stylelint-disable-next-line material/no-import
 @import 'src/material/theming';
 
 // Disable theme style duplication warnings. This test intentionally generates

tools/stylelint/no-import.ts

@@ -0,0 +1,37 @@
+import {createPlugin, utils} from 'stylelint';
+import {basename} from 'path';
+
+const ruleName = 'material/no-import';
+const messages = utils.ruleMessages(ruleName, {
+  expected: () => '@import is not allowed. Use @use instead.',
+});
+
+/** Stylelint plugin that doesn't allow `@import` to be used. */
+const plugin = createPlugin(ruleName, (isEnabled: boolean, options?: {exclude?: string}) => {
+  return (root, result) => {
+    if (!isEnabled) {
+      return;
+    }
+
+    const excludePattern = options?.exclude ? new RegExp(options.exclude) : null;
+
+    if (excludePattern?.test(basename(root.source!.input.file!))) {
+      return;
+    }
+
+    root.walkAtRules(rule => {
+      if (rule.name === 'import') {
+        utils.report({
+          result,
+          ruleName,
+          message: messages.expected(),
+          node: rule
+        });
+       }
+    });
+  };
+});
+
+plugin.ruleName = ruleName;
+plugin.messages = messages;
+export default plugin;