gajus / gajus/babel-plugin-react-css-modules

Using aliases with composes and babel-plugin-module-resolver does not works

Open
#280 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2k
Forks
159
PR merge metrics
No merged PRs in 30d

Description

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?

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the .babelrc module-resolver configuration and the compose example, then inspect requireCssModule.js at getTokens and fetch, along with the postcss-modules-parser call shown in the stack trace. Reproduce the alias and relative-path cases and determine whether compose resolution should use the configured aliases; done means the alias case resolves without the ENOENT error while existing relative imports continue to work.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, javascript, react
Domain
frontend, tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.