Wrong grid-template-areas when minified

[tonai]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on 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

CSS value for grid-template-areas gets transformed during minification. I use the following CSS:

.project {
  display: grid;
  grid-template-areas:
    'b a'
    'b c';
}

Then it gets transformed into:

.project_bxJZ{display:grid;grid-template-areas:"c d" "e c"}

e and c should be reversed.

Also tested with USE_SIMPLE_CSS_MINIFIER=true btu the result is the same. I need to disable minification with --no-minify as a workaround.

Reproducible demo

https://stackblitz.com/edit/github-rfgrzj?file=src%2Fpages%2Findex.module.css

Steps to reproduce

1. Stop the running server
2. Run yarn build
3. Look at file build/assets/css/styles.8cc5e1e4.css and search for grid-template-areas
4. CSS value is now "c d" "e c"

Expected behavior

Order of areas in minified CSS should respect the original CSS declaration.

Actual behavior

Order is not respected and design is broken.

Your environment

• Public source code: https://github.com/tonai/blog/blob/main/src/components/Project/styles.module.css
• Public site URL: https://tonai.github.io/blog/projects/os-projects (Desktop version)
• Docusaurus version used: 3.4.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome Version 126.0.6478.182 (Build officiel) (64 bits), node v20.15.1
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Ubuntu 22.04.4 LTS

Self-service

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

[Josh-Cena]

This appears to be a cssnano bug. You can reproduce it in their playground: https://cssnano.github.io/cssnano/playground/ with the "Preset Advanced" option. Could you report the bug to them instead?

[tonai]

Thanks for your reply @Josh-Cena . You are right I posted a bug there: https://github.com/cssnano/cssnano/issues/1652

[Sanjoy-droid]

@tonai is this issue solved by now

[tonai]

Nop still an issue on cssnano side. For now I don't use minification.

[slorber]

Please try canary and Docusaurus Faster, this should be fixed with the LightningCSS migration.

[tonai]

I can confirm that this problem doesn't occur with docusaurus faster.