Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wrong grid-template-areas when minified #10329

Open
6 of 7 tasks
tonai opened this issue Jul 22, 2024 · 2 comments
Open
6 of 7 tasks

Wrong grid-template-areas when minified #10329

tonai opened this issue Jul 22, 2024 · 2 comments
Labels
bug An error in the Docusaurus core causing instability or issues with its execution external This issue is caused by an external dependency and not Docusaurus.

Comments

@tonai
Copy link

tonai commented Jul 22, 2024

Have you read the Contributing Guidelines on issues?

Prerequisites

  • I'm using the latest version of Docusaurus.
  • I have tried the npm run clear or yarn clear command.
  • I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
  • I have tried creating a repro with https://new.docusaurus.io.
  • 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

Self-service

  • I'd be willing to fix this bug myself.
@tonai tonai added bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers labels Jul 22, 2024
@Josh-Cena
Copy link
Collaborator

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?

@Josh-Cena Josh-Cena added the external This issue is caused by an external dependency and not Docusaurus. label Jul 22, 2024
tonai added a commit to tonai/blog that referenced this issue Jul 22, 2024
@tonai
Copy link
Author

tonai commented Jul 22, 2024

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

@slorber slorber removed the status: needs triage This issue has not been triaged by maintainers label Jul 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug An error in the Docusaurus core causing instability or issues with its execution external This issue is caused by an external dependency and not Docusaurus.
Projects
None yet
Development

No branches or pull requests

3 participants