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

[contenthash] generated by this plugin does not match the hash generated by css-loader 5.2.0

Offen
#301 3 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

Content hashes in css class names generated by this plugin are not the same as the hashes generated by `css-loader`.

Example:

`babel-plugin-react-css-module` => `navbar__container___2dO7z`
`css-loader` => `navbar__container___ocJ3d`

Debugging webpack reveals the reason - the `options.content` values used are different. Example (actual library name replaced by `xxx`):

`content` value used by `babel-plugin-react-css-module`:

```
node_modules/xxx/components/Navbar/navbar.scss+container
```

`content` value used by `css-loader`:

```
node_modules/frontier-pub/components/Navbar/navbar.scss[NIL]container
```

In the second value above, `[NIL]` is `\x00`

This `\x00` character is used in `css-loader/dist/utils.js` like this:

```js
options.content = `${options.hashPrefix}${relativeMatchResource}${relativeResourcePath}\x00${localName}`;
```

Versions:
* css-loader: 5.2.0
* babel-plugin-react-css-module: 5.2.6

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Rechercherichtung

Beginnen Sie mit dem Vergleich der Inhaltserstellung in css-loader/dist/utils.js mit dem Hash-Generierungspfad des Plugins und verwenden Sie dabei das gemeldete Beispiel mit css-loader 5.2.0 und babel-plugin-react-css-module 5.2.6. Reproduzieren Sie den Container-Fall von navbar.scss und bestätigen Sie, dass beide Tools denselben Content-Hash erzeugen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

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

Neue Issues direkt in Ihr Postfach

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