Switch from component name list to duck-typing system props

Author: greglittlefield-wf

lib/src/mui_suggestors/system_props_to_sx_migrator.dart

@@ -14,9 +14,11 @@
 
 import 'package:analyzer/dart/ast/ast.dart';
 import 'package:analyzer/dart/ast/token.dart';
+import 'package:analyzer/dart/element/element.dart';
 import 'package:analyzer/dart/element/nullability_suffix.dart';
 import 'package:analyzer/dart/element/type.dart';
 import 'package:collection/collection.dart';
+import 'package:meta/meta.dart';
 import 'package:over_react_codemod/src/util.dart';
 import 'package:over_react_codemod/src/util/component_usage.dart';
 import 'package:over_react_codemod/src/util/component_usage_migrator.dart';
@@ -112,15 +114,13 @@ class SystemPropsToSxMigrator extends ComponentUsageMigrator {
       if (propName == 'sx') {
         existingSxProp = prop;
       } else if (systemPropNames.contains(propName)) {
-        final propElement = prop.staticElement?.nonSynthetic;
-        final declaringPropsElement = propElement?.enclosingElement;
-        if (propElement != null && declaringPropsElement != null) {
-          final componentName = declaringPropsElement.name
-              ?.replaceAll(RegExp(r'Props(Mixin)?$'), '');
-          if (_componentsWithDeprecatedSystemProps.contains(componentName) &&
-              propElement.hasDeprecated) {
-            systemProps.add(prop);
-          }
+        final isPropDeprecated =
+            prop.staticElement?.nonSynthetic.hasDeprecated ?? false;
+        late final propsClassElement = usage.propsClassElement;
+        if (isPropDeprecated &&
+            propsClassElement != null &&
+            hasSxAndSomeSystemProps(propsClassElement)) {
+          systemProps.add(prop);
         }
       }
     }
@@ -356,13 +356,25 @@ List<_PropSpreadSource> _detectPropForwardingSources(
       .toList();
 }
 
-const _componentsWithDeprecatedSystemProps = {
-  'Box',
-  'Grid',
-  'Stack',
-  'Typography',
-};
+/// Duck-types a component props class as a MUI-system-props-supporting props
+/// class by checking for the presence of an `sx` prop and at least one system prop.
+@visibleForTesting
+bool hasSxAndSomeSystemProps(InterfaceElement propsElement) {
+  const propsToCheck = [
+    'sx',
+    // The following items are arbitrary; we don't need to check for all system props,
+    // just a few to help prevent false positives where components have a prop or two
+    // that happens to match a system prop.
+    'bgcolor',
+    'm',
+    'letterSpacing',
+  ];
+
+  return propsToCheck.every((propName) =>
+      propsElement.lookUpGetter(propName, propsElement.library) != null);
+}
 
+@visibleForTesting
 const systemPropNames = {
   'm',
   'mt',

test/mui_suggestors/system_props_to_sx_migrator_test.dart

@@ -14,6 +14,9 @@
 
 import 'dart:convert';
 
+import 'package:analyzer/dart/analysis/results.dart';
+import 'package:analyzer/dart/element/element.dart';
+import 'package:collection/collection.dart';
 import 'package:over_react_codemod/src/mui_suggestors/system_props_to_sx_migrator.dart';
 import 'package:test/test.dart';
 
@@ -57,6 +60,36 @@ void main() {
       resolvedContext: resolvedContext,
     );
 
+    group('hasSxAndSomeSystemProps returns as expected for test props:', () {
+      late ResolvedUnitResult unit;
+
+      setUpAll(() async {
+        final file =
+            await resolvedContext.resolvedFileContextForTest(withHeader(''));
+        unit = (await file.getResolvedUnit())!;
+      });
+
+      InterfaceElement getProps(String propsName) =>
+          getImportedInterfaceElement(unit, propsName);
+
+      test('with system props', () async {
+        expect(
+          hasSxAndSomeSystemProps(getProps('BoxProps')),
+          isTrue,
+        );
+        expect(hasSxAndSomeSystemProps(getProps('GridProps')), isTrue);
+        expect(hasSxAndSomeSystemProps(getProps('StackProps')), isTrue);
+        expect(hasSxAndSomeSystemProps(getProps('TypographyProps')), isTrue);
+      });
+
+      test('without system props', () async {
+        // Test props with sx and a prop named like a system prop.
+        expect(hasSxAndSomeSystemProps(getProps('TextFieldProps')), isFalse);
+        // Some other props from over_react.
+        expect(hasSxAndSomeSystemProps(getProps('DomProps')), isFalse);
+      });
+    });
+
     test('migrates single system prop to sx', () async {
       await testSuggestor(
         input: withHeader('''
@@ -1156,8 +1189,8 @@ void main() {
 String getStubMuiLibrarySource({required String filenameWithoutExtension}) {
   final systemPropComponentsSource = [
     'Box',
-    'Stack',
     'Grid',
+    'Stack',
     'Typography',
   ].map((componentName) {
     return '''
@@ -1195,3 +1228,17 @@ String getStubMuiLibrarySource({required String filenameWithoutExtension}) {
       }
   ''';
 }
+
+// Borrowed from https://github.com/Workiva/over_react/blob/5.6.0/tools/analyzer_plugin/test/unit/util/prop_declaration/util.dart#L73-L78
+
+InterfaceElement getInterfaceElement(ResolvedUnitResult result, String name) =>
+    result.libraryElement.topLevelElements
+        .whereType<InterfaceElement>()
+        .singleWhere((e) => e.name == name);
+
+InterfaceElement getImportedInterfaceElement(
+        ResolvedUnitResult result, String name) =>
+    result.libraryElement.importedLibraries
+        .map((l) => l.exportNamespace.get(name))
+        .whereNotNull()
+        .single as InterfaceElement;