Docusaurus 3.4.0+ does not respect PostCSS plugins when it minimizes CSS files from 'static' folder

[hrumhurum]

Have you read the Contributing Guidelines on issues?

• I have 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

Docusaurus 3.4.0+ tries to minimize CSS files from static directory, while Docusaurus 3.3.2 and earlier just kept them intact. While doing that CSS minimization, Docusaurus 3.4.0+ forgets to initialize PostCSS correctly, ignoring custom plugins like they do not exist. This leads to numerous issues in projects that use CSS 3 syntax in static CSS files, because they cannot be built without producing warnings and errors.

This is a regressive behavior. The same projects worked in Docusaurus 3.3.2 and earlier. An alternative solution would be to instruct Docusaurus 3.4.0+ to exclude CSS files from static folder minimization.

Reproducible demo

https://github.com/hrumhurum/docusaurus-postcss-issue-repro

Steps to reproduce

1. Enter the directory of a corresponding sample:

   cd 3.3.2 or
   cd 3.4.0

2. Install the missing dependencies. This creates node_modules directory which is not
   included in this repository:

   npm install

3. Build the project

   npm run build

Expected behavior

• Build finishes successfully

Actual behavior

• [WARNING] {"file":"api/my-api.css","message":"api/my-api.css from Css Minimizer plugin\nUnexpected '}' at api/my-api.css:1:85.","compilerPath":"client"}
• [WARNING] {"file":"api/my-api.css","message":"api/my-api.css from Css Minimizer plugin\nInvalid character(s) '}' at api/my-api.css:1:85. Ignoring.","compilerPath":"client"}
• [WARNING] {"file":"api/my-api.css","message":"api/my-api.css from Css Minimizer plugin\nInvalid property name '& .my-api-sub-area{background' at api/my-api.css:1:40. Ignoring.","compilerPath":"client"}

Your environment

• Docusaurus 3.4.0
• Windows 11 Version 21H2 (OS Build 22000.2538)
• x64

Self-service

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

[slorber]

Actually the problem is more likely to be:

• in v3.3.2 we had a regression, that we fixed in v3.4 (fix(core): configurePostCss() should run after configureWebpack() #10132)
• our postcss setup does not yet support CSS nesting (Can't use CSS nesting in prod #9303)

I'd be curious to see what result you get with v3.2, but I suspect it's like v3.4. v3.3 is the probably anomaly here, and probably didn't run your file against postcss.

Looks like our minifier does not support nesting, even if you add the preset yourself. That's probably the real issue here.

I'd also try running with USE_SIMPLE_CSS_MINIFIER=true or SKIP_HTML_MINIFICATION=true and see what it leads to.
https://docusaurus.io/docs/next/cli#docusaurus-build-sitedir

[hrumhurum]

After trying different Docusaurus versions, here are the results.

Docusaurus v3.2.1 works as expected, as well as Docusaurus v3.1.1 and prior versions back to Docusaurus v2.x.

Looks like our minifier does not support nesting, even if you add the preset yourself.

It does not pose a problem because PostCSS addons provided by postcss-preset-env (see code) translate CSS v3 syntax to CSS v2 before minifier kicks in. The only problem is that somehow the minifer works differently for static folder (!). Docusaurus seems to ignore PostCSS addons for that specific folder. But for src\css\custom.css file, for example, minifier works perfectly well in all Docusaurus v2.x/3.x versions, including CSS v3 syntax (when corresponding PostCSS addons are installed in docusaurus.config.ts).

I'd also try running with USE_SIMPLE_CSS_MINIFIER=true or SKIP_HTML_MINIFICATION=true and see what it leads to.

When USE_SIMPLE_CSS_MINIFIER=true, the issue does not manifest itself. SKIP_HTML_MINIFICATION=true has no an effect.

The biggest observed difference is:

• Docusaurus before v3.4 did not minify CSS files in static folder, they were just copied from static to build.
• Docusaurus v3.4 has started to minify CSS files in static folder, and the issue has started to manifest itself

[slorber]

Thanks for investigating.

I'm not sure what is happening here, will need to study the problem to figure out.

[slorber]

fixed in 3.6.1