feat(eslint): add rule to update deprecated loader classes

packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts

@@ -753,6 +753,7 @@ export class MigrationV99Component extends LitElement {
                   <p>
                     Deprecated loader classes and related scss variables have been removed
                     <span class="tag tag-sm tag-danger">breaking</span>
+                    <span class="tag tag-sm tag-info">🪄 migration rule</span>
                   </p>
                   <ul>
                     <li><code>.loader-xs</code></li>

packages/eslint/docs/rules/html/migrations/no-deprecated-loader.md

@@ -0,0 +1,28 @@
+# `no-deprecated-loader`
+
+Flags deprecated `loader-xs` and `loader-sm` classes and replaces them with `loader-16` and `loader-40` respectively.
+- Type: problem
+- 🔧 Supports autofix (--fix)
+
+
+## Rule Options
+
+This rule does not have any configuration options.
+
+## Example
+
+### ❌ Invalid Code
+
+```html
+<div role="status" aria-live="polite" class="loader loader-xs">
+  <span class="visually-hidden">Loading…</span>
+</div>
+```
+
+### ✅ Valid Code
+
+```html
+<div role="status" aria-live="polite" class="loader loader-16">
+  <span class="visually-hidden">Loading…</span>
+</div>
+```

packages/eslint/src/rules/html/migrations/index.ts

@@ -1,9 +1,11 @@
 import noDeprecatedBtnRgRule, { name as noDeprecatedBtnRgRuleName } from './no-deprecated-btn-rg';
+import noDeprecatedLoaderRule, { name as noDeprecatedLoaderRuleName } from './no-deprecated-loader';
 import noUnnumberedBorderRadiusRule, {
   name as noUnnumberedBorderRadiusRuleName,
 } from './no-unnumbered-border-radius';
 
 export const htmlMigrationRules = {
   [noDeprecatedBtnRgRuleName]: noDeprecatedBtnRgRule,
+  [noDeprecatedLoaderRuleName]: noDeprecatedLoaderRule,
   [noUnnumberedBorderRadiusRuleName]: noUnnumberedBorderRadiusRule,
 };

packages/eslint/src/rules/html/migrations/no-deprecated-loader.ts

@@ -0,0 +1,56 @@
+import { createRule } from '../../../utils/create-rule';
+import { HtmlNode } from '../../../parsers/html/html-node';
+
+export const name = 'no-deprecated-loader';
+
+// Type: RuleModule<"uppercase", ...>
+export default createRule({
+  name,
+  meta: {
+    docs: {
+      dir: 'html',
+      description:
+        'Flags deprecated "loader-xs" and "loader-sm" classes and replaces them with "loader-16" and "loader-40" respectively.',
+    },
+    messages: {
+      deprecatedLoaderXS:
+        'The "loader-xs" class is deprecated. Please replace it with "loader-16".',
+      deprecatedLoaderSM:
+        'The "loader-sm" class is deprecated. Please replace it with "loader-40".',
+    },
+    type: 'problem',
+    fixable: 'code',
+    schema: [],
+  },
+  defaultOptions: [],
+  create(context) {
+    return {
+      tag(node: HtmlNode) {
+        const $node = node.toCheerio();
+
+        if ($node.hasClass('loader-xs')) {
+          context.report({
+            messageId: 'deprecatedLoaderXS',
+            loc: node.loc,
+            fix(fixer) {
+              const fixedNode = $node.removeClass('loader-xs').addClass('loader-16');
+              return fixer.replaceTextRange(node.range, fixedNode.toString());
+            },
+          });
+        }
+
+        if ($node.hasClass('loader-sm')) {
+          context.report({
+            messageId: 'deprecatedLoaderSM',
+            loc: node.loc,
+            fix(fixer) {
+              const fixedNode = $node.removeClass('loader-sm').addClass('loader-40');
+              return fixer.replaceTextRange(node.range, fixedNode.toString());
+            },
+          });
+        }
+
+      },
+    };
+  },
+});

packages/eslint/test/rules/html/migrations/no-deprecated-loader.spec.ts

@@ -0,0 +1,49 @@
+import rule, { name } from '../../../../src/rules/html/migrations/no-deprecated-loader';
+import { htmlRuleTester } from '../../../utils/html-rule-tester';
+
+htmlRuleTester.run(name, rule, {
+  valid: [
+    {
+      code: `
+        <div role="status" aria-live="polite" class="loader">
+          <span class="visually-hidden">Loading…</span>
+        </div>
+      `,
+    },
+    {
+      code: `
+        <div role="status" aria-live="polite" class="loader loader-16">
+          <span class="visually-hidden">Loading…</span>
+        </div>
+      `,
+    },
+  ],
+  invalid: [
+    {
+      code: `
+        <div role="status" aria-live="polite" class="loader loader-xs">
+          <span class="visually-hidden">Loading…</span>
+        </div>
+      `,
+      output: `
+        <div role="status" aria-live="polite" class="loader loader-16">
+          <span class="visually-hidden">Loading…</span>
+        </div>
+      `,
+      errors: [{ messageId: 'deprecatedLoaderXS' }],
+    },
+    {
+      code: `
+        <div role="status" aria-live="polite" class="loader loader-sm">
+          <span class="visually-hidden">Loading…</span>
+        </div>
+      `,
+      output: `
+        <div role="status" aria-live="polite" class="loader loader-40">
+          <span class="visually-hidden">Loading…</span>
+        </div>
+      `,
+      errors: [{ messageId: 'deprecatedLoaderSM' }],
+    },
+  ],
+});