facebook / docusaurus

Easy to maintain open source documentation websites.
https://docusaurus.io
MIT License
55.39k stars 8.31k forks source link

Wrong grid-template-areas when minified #10329

Open tonai opened 1 month ago

tonai commented 1 month ago

Have you read the Contributing Guidelines on issues?

Prerequisites

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

Self-service

Josh-Cena commented 1 month ago

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 commented 1 month ago

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