facebook / facebook/docusaurus

Mismatch of css grid-column names after build

Open
#8,860 4 comments 0 reactions 0 assignees View on GitHub
bug external
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
52

Description

### 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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.