docusaurus icon indicating copy to clipboard operation
docusaurus copied to clipboard

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

Open hrumhurum opened this issue 7 months ago • 3 comments

Have you read the Contributing Guidelines on issues?

Prerequisites

  • [X] I'm using the latest version of Docusaurus.
  • [X] I have tried the npm run clear or yarn clear command.
  • [X] 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.
  • [X] 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.

hrumhurum avatar Jul 23 '24 14:07 hrumhurum