Search code examples
next.jspostcssgoogle-fonts

Why am I getting CssSyntaxError: <css input> from PostCSS build?

I am doing what I think is a standard Next.js build. It works fine in development mode but when I try to get a production build, I get:

(node:39333) UnhandledPromiseRejectionWarning: CssSyntaxError: <css input>:17:20: Missed semicolon
at Input.error (/node_modules/next/node_modules/postcss/lib/input.js:129:16)

But here is the strange things: I don’t have any CSS.

Actually, I had some CSS but I deleted it all to figure out what was going wrong. No change.

Solution

  • After an hour or so of frustration, I did what I should have done in the first 10 minutes, and edited the file postcss/lib/input.js to just print out the offending CSS, and got quite a surprise. Let me describe the sequence of events in the order they occurred, not the order I discovered them.

    A few days ago, I received from the designer an HTML file with the layout she wanted. In the <head>, there were some <link>s to the fonts she had chosen, including:

    <link
        href="https://fonts.googleapis.com/css?family=FontAwesome"
        rel="stylesheet"
  />

    What I didn’t noticed (apparently the designer didn’t either) was that there is no such font-family (FontAwesome is the name of font toolkit), I dutifully copied the line into my React code. Next.js and the browser plowed right through the problem.

    PostCSS did not. Instead, when attempting the production build, it tried to parse the error page that Google sent.

    Unfortunately, the error page was, you know, just an error page. Nobody at Google had scrutinized it for strict standards-compliance. Sure enough, near the top I found:

         body {
       background: 100% 5px no-repeat;
       margin-top: 0;
       max-width: none:

    That colon there at the end is supposed to be a semi-colon. Of course, removing the useless link to the nonexistent font solved the problem.

    Now I don’t know who to blame:

    • Google for having a syntax error on an error page
    • Google for not running a check on their error pages
    • Google for returning a 400 instead of a 404 when it cannot find a font
    • PostCSS for trying to parse an error page (I don’t know if the 400/404 thing confused it, but still)
    • PostCSS for giving such an obscure error message
    • the designer for giving me a link to a bad font

    Because, you know I am not blaming myself...