[v2] - CSS minifier crash the build due to fonts

[semoal]

🐛 Bug Report

/Users/x/Projects/docs-v2/node_modules/clean-css/lib/optimizer/level-2/properties/populate-components.js:30
          throw e;
          ^

TypeError: Cannot read property '0' of undefined
    at Object.font [as breakUp] (/Users/x/Projects/docs-v2/node_modules/clean-css/lib/optimizer/level-2/break-up.js:303:91)
    at populateComponents (/Users/x/Projects/docs-v2/node_modules/clean-css/lib/optimizer/level-2/properties/populate-components.js:17:42)
    at /Users/x/Projects/docs-v2/node_modules/clean-css/lib/optimizer/level-2/remove-unused-at-rules.js:141:9

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

(Write your steps here:)

1. npx @docusaurus/init@latest init my-website classic
2. Add a font on custom.css

 @font-face {
  font-family: 'Manrope';
  src: url("/fonts/Manrope.ttf") format("truetype");
  font-style: normal;
  font-display: swap
}

If I remove this code from the css file, the crash disappears.

3. Add a font.ttf in static folder
4. Run yarn build

Expected behavior

To not crash

Your Environment

• Docusaurus version used: 2.0.0-alpha.69
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Node v12.16.0

Reproducible Demo

I'll post one asap

[semoal]

Probably this issue should be opened on clean-css library, let me know if I should move this

[slorber]

Thanks Can you share your site custom css file or site source code? Can you try this env variable? USE_SIMPLE_CSS_MINIFIER=true Cf https://v2.docusaurus.io/docs/cli/#docusaurus-build Le ven. 27 nov. 2020 à 22:35, Sergio Moreno <notifications@github.com> a écrit :

…

Probably this issue should be opened on clean-css library, let me know if I should move this — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#3836 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFW6PVIIW7DGFVFFBTO5WDSSALSXANCNFSM4UFKGCEQ> .

[semoal]

Thanks Can you share your site custom css file or site source code? Can you try this env variable? USE_SIMPLE_CSS_MINIFIER=true Cf v2.docusaurus.io/docs/cli/#docusaurus-build Le ven. 27 nov. 2020 à 22:35, Sergio Moreno notifications@github.com a écrit :
…
Probably this issue should be opened on clean-css library, let me know if I should move this — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#3836 (comment)>, or unsubscribe <github.com/notifications/unsubscribe-auth/AAFW6PVIIW7DGFVFFBTO5WDSSALSXANCNFSM4UFKGCEQ> .

With that environment variable works as expected, i'll create a reproducible repo right now.

[semoal]

https://github.com/semoal/docusaurus-css-minifier-bug

Here you have @sebelga , https://github.com/semoal/docusaurus-css-minifier-bug/blob/main/src/css/custom.css

[lex111]

Weird CleanCSS bug I think the best thing is just to turn off font-face optimization, this should help.

[kotapeter]

I was able to reproduce this issue. @lex111 how can I turn off font-face optimization?

[semoal]

I was able to reproduce this issue. @lex111 how can I turn off font-face optimization?

As @slorber already said, USE_SIMPLE_CSS_MINIFIER=true environment variable.

If you speak about just disabling that, probably that has to be made on Docusaurus codebase,
https://github.com/facebook/docusaurus/blob/master/packages/docusaurus-cssnano-preset/index.js#L13

https://www.npmjs.com/package/cssnano-preset-advanced has one parameters to disable postcss-minify-font-values that probably is the issuer.

[kotapeter]

@semoal Thank you!
finally my temporary workaround was:

yarn build --no-minify