diff --git a/packages/eslint-plugin/docs/rules/no-top-level-material-ui-4-imports.md b/packages/eslint-plugin/docs/rules/no-top-level-material-ui-4-imports.md index a00eb73ffd..a105014abc 100644 --- a/packages/eslint-plugin/docs/rules/no-top-level-material-ui-4-imports.md +++ b/packages/eslint-plugin/docs/rules/no-top-level-material-ui-4-imports.md @@ -7,12 +7,12 @@ Forbid top level import from Material UI v4 packages. Add the rules as follows, it has no options: ```js -"@backstage/no-top-level-material-ui-4-imports": ["error"] +'@backstage/no-top-level-material-ui-4-imports': 'error' ``` ## Rule Details -TBD - Not sure what should go here +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 diff --git a/packages/eslint-plugin/rules/no-top-level-material-ui-4-imports.js b/packages/eslint-plugin/rules/no-top-level-material-ui-4-imports.js index dc2a555e24..6a726545fc 100644 --- a/packages/eslint-plugin/rules/no-top-level-material-ui-4-imports.js +++ b/packages/eslint-plugin/rules/no-top-level-material-ui-4-imports.js @@ -57,19 +57,8 @@ module.exports = { // 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'` - if ( - node.specifiers.length >= 1 && - node.source.value?.split('/').length === 3 - ) - return; - - // Return if third level or deeper imports - if ( - node.specifiers.length >= 1 && - node.source.value.split('/').length > 3 - ) { - return; - } + // Or if third level or deeper imports + if (node.source.value?.split('/').length >= 3) return; // Report all other imports context.report({ @@ -84,17 +73,13 @@ module.exports = { ); const specifiersMap = specifiers.map(s => { - const propsTest = /^([A-Z]\w+)Props$/.test(s.local.name); const propsMatch = /^([A-Z]\w+)Props$/.exec(s.local.name); - let propValue; - if (propsMatch) { - propValue = propsMatch[1]; - } + return { - emitComponent: !propsTest, - emitProp: propsTest, + emitComponent: !(propsMatch !== null), + emitProp: propsMatch !== null, value: s.local.name, - propValue, + propValue: propsMatch ? propsMatch[1] : undefined, }; });