facebook / facebook/docusaurus

Mismatch of css grid-column names after build

Abierto
#8,860 4 comentarios 0 reacciones 0 asignados Ver en GitHub
bug external
Lenguaje dominante
TypeScript
Estrellas
66.2k
Forks
10k
Merge medio
1 d 3 h
PR fusionados (30 d)
52

Descripción

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#issues).

### Prerequisites

- [X] I'm using the latest version of Docusaurus.
- [X] I have tried the `npm run clear` or `yarn clear` command.
- [X] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [X] I have tried creating a repro with https://new.docusaurus.io.
- [X] I have read the console error message carefully (if applicable).

### Description

The build process seems to rewrite css `grid-column` names to shorter names. But the according names from `grid-template-column` are not transformed. Since this optimisation is not done during development mode, it can only be seen on production builds.

```css
.grid {
display: grid;
grid-template-columns:
[kw] 2.5em
[day] 3em
[description] 10em;
}

.grid > .kw {
grid-column: kw;
}
.grid > .day {
grid-column: day;
}
.grid > .description {
grid-column: description;
}
```

is optimised/compiled to

```diff
.grid {
display: grid;
grid-template-columns:
[kw] 2.5em
[day] 3em
[description] 10em;
}

.grid > .kw {
+ grid-column: kw;
- grid-column: c;
}
.grid > .day {
+ grid-column: d;
- grid-column: day;
}
.grid > .description {
+ grid-column: e;
- grid-column: description;
}
```
(see that the `grid-template-columns` still have their original names)

Demo (for dev mode) on Stackblitz: https://stackblitz.com/edit/github-eurpwa?file=src/components/TableGrid/styles.module.css
And a deployed version on Netlify: https://astounding-unicorn-4f925c.netlify.app/

### Reproducible demo

https://stackblitz.com/edit/github-eurpwa?file=src/components/TableGrid/styles.module.css

### Steps to reproduce

1. Add a css grid with named `grid-template-columns`
2. Assign elements to the grid by setting the according `grid-column` names
3. check in dev mode that everything is okay
4. build the page and see the broken behavior

### Expected behavior

image

### Actual behavior

image

### Your environment

- Public source code: https://github.com/lebalz/docusaurus-css-grid-template-bug
- Public site URL: https://astounding-unicorn-4f925c.netlify.app/
- Docusaurus version used: 2.4.0
- Environment name and version (e.g. Chrome 89, Node.js 16.4): Node.js 16.4

### Self-service

- [ ] I'd be willing to fix this bug myself.

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.