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

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

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

Description

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

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.