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

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

Offen
#280 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
JavaScript
Sterne
2k
Forks
159
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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?

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Rechercherichtung

Beginne mit der .babelrc-Konfiguration für module-resolver und dem compose-Beispiel. Untersuche anschließend requireCssModule.js bei getTokens und fetch sowie den in der Stack Trace gezeigten Aufruf von postcss-modules-parser. Reproduziere die Fälle mit Alias und relativen Pfaden und ermittle, ob die compose-Auflösung die konfigurierten Aliase verwenden sollte; fertig ist die Aufgabe, wenn der Alias-Fall ohne den ENOENT-Fehler aufgelöst wird und bestehende relative Imports weiterhin funktionieren.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
babel, javascript, react
Bereich
frontend, tooling
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.