Giters

facebook / docusaurus

Easy to maintain open source documentation websites.

Home Page:https://docusaurus.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

broken styles after build

lumi2021 opened this issue · comments

commented
  • 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).

I'm working on the new Silk.NET presentation and documentation website where i was requested to use docusaurus to do it. The library never shows any error during the debugging process and the development goes well until i need to build the website, when i noticed the problem.

Most of the styles and media queries are being broken by the CSS Minimizer plugin. It logs don't help to solve any problem because the minimize is done after all the compilation, so my CSS code is unrecognizable after this.

Steps to reproduce

  1. clone the website repo
  2. execute npm run build
  3. execute npm run serve

behavior

The styles should be exactly what it is during the debug (npm run start)

One of the best examples, the first section of the main page that is being rendered as the follow in debug:
image

It's being rendering as it after the build process:
image

environment

  • Public source code: https://github.com/lumi2021/Silk.NET-website
  • Public site URL: N/A
  • Docusaurus version used: lib: 3.2.2, --version: 10.4.0
  • Environment name and version: Mozilla/5.0
  • Operating system and version: Win 10
commented

I and a moderator of the Discord server discovered the problem. Some of my styles use nested CSS, what is a new feature in default CSS and already implemented in SCSS. the problem is: the default CSS minimizer don't have support to nested CSS, so I'm installing the scss plugin to solve my problem.

As i still think this is a problem, i will let the issue open for some mod review and give the verdict.

commented

Agree with have a bug, already tracked in #9303

Note CSS nesting is not yet "widely" supported.

CleanShot 2024-05-09 at 12 07 41@2x

Only 81% full support, that's maybe a bit too soon to emit CSS nesting, but maybe we could at least support it as an authoring format and emit non-nested CSS (similar to what SCSS does).

commented

Only 81% full support, that's maybe a bit too soon to emit CSS nesting, but maybe we could at least support it as an authoring format and emit non-nested CSS (similar to what SCSS does).

the idea of emit non nested CSS looks really good for me, but isn't so much work for docusaurus team? Like an entire css parser and etc...

commented

Forgot to close as duplicate

the idea of emit non nested CSS looks really good for me, but isn't so much work for docusaurus team? Like an entire css parser and etc...

We wouldn't do this on our own but likely use PostCSS for that.

https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting

Since postcss-preset-env supports browserslist, we should probably use that in the future