@backstage/eslint-plugin 0.1.4 → 0.1.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @backstage/eslint-plugin
 
+## 0.1.5
+
+### Patch Changes
+
+- 995d280: Added new `@backstage/no-top-level-material-ui-4-imports` rule that forbids top level imports from Material UI v4 packages
+
+## 0.1.5-next.0
+
+### Patch Changes
+
+- 995d280: Added new `@backstage/no-top-level-material-ui-4-imports` rule that forbids top level imports from Material UI v4 packages
+
 ## 0.1.4
 
 ### Patch Changes

package/README.md

@@ -35,8 +35,9 @@ rules: {
 
 The following rules are provided by this plugin:
 
-| Rule                                                                                    | Description                                                                                                              |
-| --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
-| [@backstage/no-forbidden-package-imports](./docs/rules/no-forbidden-package-imports.md) | Disallow internal monorepo imports from package subpaths that are not exported.                                          |
-| [@backstage/no-relative-monorepo-imports](./docs/rules/no-relative-monorepo-imports.md) | Forbid relative imports that reach outside of the package in a monorepo.                                                 |
-| [@backstage/no-undeclared-imports](./docs/rules/no-undeclared-imports.md)               | Forbid imports of external packages that have not been declared in the appropriate dependencies field in `package.json`. |
+| Rule                                                                                                | Description                                                                                                              |
+| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| [@backstage/no-forbidden-package-imports](./docs/rules/no-forbidden-package-imports.md)             | Disallow internal monorepo imports from package subpaths that are not exported.                                          |
+| [@backstage/no-relative-monorepo-imports](./docs/rules/no-relative-monorepo-imports.md)             | Forbid relative imports that reach outside of the package in a monorepo.                                                 |
+| [@backstage/no-undeclared-imports](./docs/rules/no-undeclared-imports.md)                           | Forbid imports of external packages that have not been declared in the appropriate dependencies field in `package.json`. |
+| [@backstage/no-top-level-material-ui-4-imports](./docs/rules/no-top-level-material-ui-4-imports.md) | Forbid top level import from Material UI v4 packages.                                                                    |

package/docs/rules/no-top-level-material-ui-4-imports.md

@@ -0,0 +1,43 @@
+# @backstage/no-top-level-material-ui-4-imports
+
+Forbid top level import from Material UI v4 packages.
+
+## Usage
+
+Add the rules as follows, it has no options:
+
+```js
+'@backstage/no-top-level-material-ui-4-imports': 'error'
+```
+
+## Rule Details
+
+Automatically fixes imports from named to default imports. This will help you comply with [Material UI recommendations](https://mui.com/material-ui/guides/minimizing-bundle-size/) and make migrating to Material UI v5 easier.
+
+### Fail
+
+```tsx
+import { Box, Typography } from '@material-ui/core';
+```
+
+```tsx
+import Box from '@material-ui/core';
+```
+
+```tsx
+import {
+  Box,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  makeStyles,
+} from '@material-ui/core';
+```
+
+### Pass
+
+```tsx
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+```

package/index.js

@@ -29,5 +29,6 @@ module.exports = {
     'no-forbidden-package-imports': require('./rules/no-forbidden-package-imports'),
     'no-relative-monorepo-imports': require('./rules/no-relative-monorepo-imports'),
     'no-undeclared-imports': require('./rules/no-undeclared-imports'),
+    'no-top-level-material-ui-4-imports': require('./rules/no-top-level-material-ui-4-imports'),
   },
 };

package/knip-report.md

@@ -0,0 +1,9 @@
+# Knip report
+
+## Unlisted dependencies (2)
+
+| Name   | Location                       | Severity |
+| :----- | :----------------------------- | :------- |
+| estree | rules/no-undeclared-imports.js | error    |
+| estree | lib/visitImports.js            | error    |
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/eslint-plugin",
   "description": "Backstage ESLint plugin",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "publishConfig": {
     "access": "public"
   },
@@ -22,7 +22,7 @@
     "minimatch": "^5.1.2"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.25.0",
+    "@backstage/cli": "^0.25.2",
     "eslint": "^8.33.0"
   }
 }

package/rules/no-top-level-material-ui-4-imports.js

@@ -0,0 +1,156 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// @ts-check
+
+const KNOWN_STYLES = [
+  'makeStyles',
+  'withStyles',
+  'createStyles',
+  'styled',
+  'useTheme',
+  'Theme',
+];
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    fixable: 'code',
+    messages: {
+      topLevelImport: 'Top level imports for Material UI are not allowed',
+    },
+    docs: {
+      description: 'Forbid top level import from Material UI v4 packages.',
+      url: 'https://github.com/backstage/backstage/blob/master/packages/eslint-plugin/docs/rules/no-top-level-material-ui-4-imports.md',
+    },
+  },
+  create: context => ({
+    ImportDeclaration: node => {
+      // Anatomy of a Node
+      // Example: import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+      // Specifiers are the part between the `import` and `from`, in the example that would be `SvgIcon, { SvgIconProps }`
+      // Source is the part after the `from`, in the example that would be `'@material-ui/core/SvgIcon'`
+      // Source value gets you `@material-ui/core/SvgIcon` without the quotes, where as Source raw gets it as is
+
+      // Return if empty import
+      if (node.specifiers.length === 0) return;
+      // Return if empty source value
+      if (!node.source.value) return;
+      // Return if source value not a string
+      if (typeof node.source.value !== 'string') return;
+      // Return if import does not start with '@material-ui/'
+      if (!node.source.value.startsWith('@material-ui/')) return;
+      // Return if import is from '@material-ui/core/styles', as it's valid already
+      if (node.source.value === '@material-ui/core/styles') return;
+      // Return if proper import eg. `import Box from '@material-ui/core/Box'`
+      // Or if third level or deeper imports
+      if (node.source.value?.split('/').length >= 3) return;
+
+      // Report all other imports
+      context.report({
+        node,
+        messageId: 'topLevelImport',
+        fix: fixer => {
+          const replacements = [];
+          const styles = [];
+
+          const specifiers = node.specifiers.filter(
+            s => s.type === 'ImportSpecifier',
+          );
+
+          const specifiersMap = specifiers.map(s => {
+            const propsMatch = /^([A-Z]\w+)Props$/.exec(s.local.name);
+
+            return {
+              emitComponent: !(propsMatch !== null),
+              emitProp: propsMatch !== null,
+              value: s.local.name,
+              propValue: propsMatch ? propsMatch[1] : undefined,
+            };
+          });
+
+          // We have 3 cases:
+          // 1 - Just Prop: import { TabProps } from '@material-ui/core';
+          // 2 - Just Component: import { Box } from '@material-ui/core';
+          // 3 - Component and Prop: import { SvgIcon, SvgIconProps } from '@material-ui/core';
+
+          const components = specifiersMap
+            .filter(f => {
+              return f.emitComponent;
+            })
+            .map(m => m.value);
+          const props = specifiersMap
+            .filter(f => {
+              return f.emitProp;
+            })
+            .map(m => m.value);
+
+          if (
+            specifiersMap.some(s => s.emitProp) &&
+            !specifiersMap.some(s => s.emitComponent)
+          ) {
+            // 1 - Just Prop
+            const propValue = specifiersMap
+              .filter(f => {
+                return f.emitProp;
+              })
+              .map(m => m.propValue);
+            replacements.push(
+              `import { ${props.join(', ')} } from '@material-ui/core/${
+                propValue[0]
+              }';`,
+            );
+          } else if (
+            !specifiersMap.some(s => s.emitProp) &&
+            specifiersMap.some(s => s.emitComponent)
+          ) {
+            // 2 - Just Component
+            for (const specifier of specifiers) {
+              if (KNOWN_STYLES.includes(specifier.local.name)) {
+                styles.push(specifier.local.name);
+              } else {
+                const replacement = `import ${specifier.local.name} from '${node.source.value}/${specifier.local.name}';`;
+                replacements.push(replacement);
+              }
+            }
+          } else if (
+            specifiersMap.some(s => s.emitProp) &&
+            specifiersMap.some(s => s.emitComponent)
+          ) {
+            // 3 - Component and Prop
+            replacements.push(
+              `import ${components[0]}, { ${props.join(
+                ', ',
+              )} } from '@material-ui/core/${components[0]}';`,
+            );
+          }
+
+          if (styles.length > 0) {
+            const stylesReplacement = `import { ${styles.join(
+              ', ',
+            )} } from '@material-ui/core/styles';`;
+            replacements.push(stylesReplacement);
+          }
+
+          const result = fixer.replaceText(node, replacements.join('\n'));
+
+          return result;
+        },
+      });
+    },
+  }),
+};

package/src/no-forbidden-package-imports.test.ts

@@ -25,6 +25,11 @@ const ERR = (name: string, path: string) => ({
   message: `${name} does not export ${path}`,
 });
 
+// cwd must be restored
+const origDir = process.cwd();
+afterAll(() => {
+  process.chdir(origDir);
+});
 process.chdir(FIXTURE);
 
 const ruleTester = new RuleTester({

package/src/no-relative-monorepo-imports.test.ts

@@ -28,6 +28,11 @@ const ERR_FORBIDDEN = (newImp: string) => ({
   message: `Relative imports of monorepo packages are forbidden, use '${newImp}' instead`,
 });
 
+// cwd must be restored
+const origDir = process.cwd();
+afterAll(() => {
+  process.chdir(origDir);
+});
 process.chdir(FIXTURE);
 
 const ruleTester = new RuleTester({

package/src/no-top-level-material-ui-4-imports.test.ts

@@ -0,0 +1,107 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { RuleTester } from 'eslint';
+import rule from '../rules/no-top-level-material-ui-4-imports';
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2021,
+  },
+});
+
+ruleTester.run('path-imports-rule', rule, {
+  valid: [
+    {
+      code: `import Typography from '@material-ui/core/Typography';`,
+    },
+    {
+      code: `import Box from '@material-ui/core/Box'`,
+    },
+    {
+      code: `import { styled, withStyles } from '@material-ui/core/styles';`,
+    },
+    {
+      code: `import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';`,
+    },
+    {
+      code: `import { StyleRules } from '@material-ui/core/styles/withStyles';`,
+    },
+    {
+      code: `import { CreateCSSProperties, StyledComponentProps } from '@material-ui/core/styles/withStyles';`,
+    },
+  ],
+  invalid: [
+    {
+      code: `import { Box, Typography } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';`,
+    },
+    {
+      code: `import { Box } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import Box from '@material-ui/core/Box';`,
+    },
+    {
+      code: `import {
+                  Box,
+                  DialogActions,
+                  DialogContent,
+                  DialogTitle,
+                  Grid,
+                  makeStyles,
+                } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import Box from '@material-ui/core/Box';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';`,
+    },
+    {
+      code: `import { Box, Button, makeStyles } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import { makeStyles } from '@material-ui/core/styles';`,
+    },
+    {
+      code: `import { Paper, Typography, styled, withStyles } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import { styled, withStyles } from '@material-ui/core/styles';`,
+    },
+    {
+      code: `import { styled } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import { styled } from '@material-ui/core/styles';`,
+    },
+    {
+      code: `import { SvgIcon, SvgIconProps } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';`,
+    },
+    {
+      code: `import { TabProps } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import { TabProps } from '@material-ui/core/Tab';`,
+    },
+  ],
+});

package/src/no-undeclared-imports.test.ts

@@ -53,6 +53,11 @@ const ERR_SWITCH_BACK = () => ({
   message: 'Switch back to import declaration',
 });
 
+// cwd must be restored
+const origDir = process.cwd();
+afterAll(() => {
+  process.chdir(origDir);
+});
 process.chdir(FIXTURE);
 
 const ruleTester = new RuleTester({