Open hrumhurum opened 1 month ago
Actually the problem is more likely to be:
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
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:
static
folder, they were just copied from static
to build
.static
folder, and the issue has started to manifest itselfThanks for investigating.
I'm not sure what is happening here, will need to study the problem to figure out.
Have you read the Contributing Guidelines on issues?
Prerequisites
npm run clear
oryarn clear
command.rm -rf node_modules yarn.lock package-lock.json
and re-installing packages.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
Enter the directory of a corresponding sample:
cd 3.3.2
orcd 3.4.0
Install the missing dependencies. This creates
node_modules
directory which is not included in this repository:npm install
Build the project
npm run build
Expected behavior
Actual behavior
Your environment
Self-service