@import, @font-face in CSS files causes builds to fail

[Lulech23]

🐛 Bug Report

Use of certain @ rules in CSS files causes builds to fail with no clear error message to help identify the issue. (Possible validation issue?) This makes it impossible to import other CSS files, most notably fonts, via custom.css or docusaurus.config.js. Removing any @ rules allows the build to complete successfully.

(On a personal note, I feel it's worth mentioning that ever since Docusaurus attempted to validate literally everything it's been a horrible broken mess. Sites that previously worked now generate tons of errors that wouldn't be there if Docusaurus simply trusted developers that they actually intended to write the code they did. Most of the time we do.)

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. Initialize a new Docusaurus site
2. Upload a custom font to be served locally (mine are located in /static/fonts). Example font
3. Add @import to custom.css to import the font
4. yarn run build or npm run build (both produce the same result)

Expected behavior

Build completes successfully and fonts are loaded in final build

Actual Behavior

Build fails at 92% "OptimizeCssAssetsWebpackPlugin" with a very unhelpful error message:

Node 14.x:

undefined
(node:13766) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'hasErrors' of undefined
    at ../node_modules/@docusaurus/core/lib/webpack/utils.js:168:23
(node:13766) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:13766) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Node 15.x:

undefined
../node_modules/@docusaurus/core/lib/webpack/utils.js:168
            if (stats.hasErrors()) {
                      ^

TypeError: Cannot read property 'hasErrors' of undefined
error Command failed with exit code 1.

Your Environment

• Docusaurus version used: v2.0.0-alpha69, v2.0.0-alpha70
• Environment name and version: Node.js v14.15.3, v15.0.1
• Operating system and version: Debian 10

Reproducible Demo

Example repo. Just install and build.

[NoahMaizels]

I tried to import a local font using font-face and also got an error, and have no idea how to fix it. The same code worked fine for the old docusaurus.

@font-face { font-family: 'ProximaNovaRg'; src: url('font-kit/ProximaNova-Bold.eot'); }

Error:

./src/css/custom.css ModuleParseError: Module parse failed: Unexpected character '' (1:2) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file) @ ./.docusaurus/client-modules.js 1:411-455 @ ./node_modules/@docusaurus/core/lib/client/client-lifecycles-dispatcher.js @ ./node_modules/@docusaurus/core/lib/client/App.js @ ./node_modules/@docusaurus/core/lib/client/clientEntry.js @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/@docusaurus/core/lib/client/clientEntry.js

[slorber]

Thanks for reporting this.

I thought it was fixed in alpha 70 but it seems not.
(probably related to #3836)

You can use USE_SIMPLE_CSS_MINIFIER=true as a temporary workaround for now

@noahniuwa font-face should work with alpha 70, try to upgrade.

[Lulech23]

You can use USE_SIMPLE_CSS_MINIFIER=true as a temporary workaround for now

Can confirm this allows the build to complete successfully. Thanks for the workaround!