gajus / gajus/babel-plugin-react-css-modules
Using aliases with composes and babel-plugin-module-resolver does not works
- Ngôn ngữ chính
- JavaScript
- Star
- 2k
- Fork
- 159
- Chỉ số merge pull request
- Không có pull request nào được merge trong 30 ngày
Mô tả
I'm trying to replace `react-css-modules` with this plugin. Most things work or have a simple solution, except for our use of aliases when composing classes. Previously we've used webpack and postcss-import to resolve the aliases, I don't expect that to work with a babel plugin.
@imports still work with aliases, even if I can't compose classes from a file loaded with `@import`. I can still do `composes: button from '../button.css` as long as the path is relative.
I've tried to set up the babel module-resolver by this comment https://github.com/gajus/babel-plugin-react-css-modules/issues/46#issuecomment-414130223
My config in .babelrc looks like this:
```json
{
"presets": [
"@babel/preset-react"
],
"plugins": [
[
"module-resolver",
{
"root": [
"../apps"
],
"alias": {
"@constants": "../shared/constants",
"@shared": "../shared",
"@common": "./common",
}
}
],
["react-css-modules", {
"exclude": "node_modules",
"handleMissingStyleName": "warn",
"filetypes": {
".pcss": {
"syntax": ""
}
}
}],
],
```
If I compose a class like this:
```
.button {
composes: reset-button from '@common/styles/elements/button.css';
}
```
I get this error, as it tries to load the path as relative.
```
ERROR in ./src/app/components/Panel/Participants/Participant/Participant.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: ENOENT: no such file or directory, open '/[rootpath]/apps/src/app/components/Panel/Participants/Participant/@common/styles/elements/button.css'
at Object.openSync (fs.js:443:3)
at readFileSync (fs.js:343:35)
at getTokens (/[rootpath]/apps/node_modules/babel-plugin-react-css-modules/dist/requireCssModule.js:74:58)
at fetch (/[rootpath]/apps/node_modules/babel-plugin-react-css-modules/dist/requireCssModule.js:100:12)
at /[rootpath]/apps/node_modules/postcss-modules-parser/lib/index.js:74:20
```
Am I mistaken when I expect `babel-plugin-react-css-modules` to respect rules set with `babel-plugin-module-resolver` in `compose` statements?
Hướng dẫn đóng góp
Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này
Hướng nghiên cứu
Bắt đầu với cấu hình module-resolver trong .babelrc và ví dụ compose, sau đó kiểm tra requireCssModule.js tại getTokens và fetch, cùng với lệnh gọi postcss-modules-parser được hiển thị trong stack trace. Tái hiện các trường hợp alias và đường dẫn tương đối, đồng thời xác định liệu việc phân giải compose có nên sử dụng các alias đã cấu hình hay không; hoàn tất khi trường hợp alias được phân giải mà không có lỗi ENOENT và các import tương đối hiện có vẫn tiếp tục hoạt động.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- babel, javascript, react
- Lĩnh vực
- frontend, tooling
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 45/100