Support @mui/material/styles

[kajirikajiri]

Support @mui/material/styles

[kajirikajiri]

First of all, thank you for the issue.

The eslint-plugin-mui-path-imports executes rules based on automatically generated json, and it is difficult to incorporate this proposal into those rules, so it will be put on hold at this time.
Below is the history of the creation of eslint-plugin-mui-path-imports.

When I created eslint-plugin-mui-path-imports, I tried to achieve the following

import { Box } from '@mui/material';
↓
import Box from "@mui/material/Box";

At this point, the following can be considered.

import { X } from '@mui/material';
↓
import X from "@mui/material/X";

In other words, we thought we could create an eslint rule that would remove the { and } and add /X after @mui/material.
Applying this rule also allowed us to support many packages in @mui/material, @mui/joy, @mui/lab and @mui/icons-material.
It was particularly effective when adapted to @mui/icons-material.

If I try to apply it to the code you have presented here, I find that it doesn't work.

import { ThemeProvider } from '@mui/material';
↓
import ThemeProvider from "@mui/material/ThemeProvider"; // got
import { ThemeProvider } from '@mui/material/styles'; // want

In the beginning I wanted to support everything, but that would not be enough time for me.
So I'm going to maintain this package to the extent that it can be generated automatically, and it would take a lot of time to deal with the syntax you've presented here, so I'm going to hold off on that for now.

However, when I actually load the syntax you provided in Next.js, it seems that the compile completes about 500ms earlier, so I would like to respond to it if possible.

wait - compiling...
event - compiled client and server successfully in 69 ms (1205 modules)
wait - compiling...
event - compiled client and server successfully in 556 ms (473 modules)

---

Note to future me.

以下の構文を読み込ませて、@mui/material/の後ろでTypeScriptに自動補完させた時に、stylesは候補に表示されるはず。それとpairで{ ThemeProvider }を読み込み自動テストするようにして、output.jsonの"Box": "@mui/material/Box"を"{ThemeProvider}": "@mui/material/styles"とすれば対応できそうな気がする。

import { } from '@mui/material/'