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

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

Abierto
#301 3 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Lenguaje dominante
JavaScript
Estrellas
2k
Forks
159
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza comparando la construcción del contenido en css-loader/dist/utils.js con la ruta de generación del hash del plugin, utilizando el ejemplo reportado con css-loader 5.2.0 y babel-plugin-react-css-module 5.2.6. Reproduce el caso del contenedor de navbar.scss y confirma que ambas herramientas generan el mismo hash de contenido.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript, react, webpack
Área
build-system, frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
38/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.