facebook / facebook/docusaurus
Mismatch of css grid-column names after build
- Vorherrschende Sprache
- TypeScript
- Sterne
- 66.2k
- Forks
- 10k
- Ø Merge
- 1 T. 3 Std.
- Gemergte PRs (30 T.)
- 52
Beschreibung
### 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

### Actual behavior

### 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.
Beitragsleitfaden
Bewertung
Dieses Issue wurde noch nicht bewertet.