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

user_238884 0
Viewed 2199

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.

google-fonts postcss next.js
4 Answers

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...

user_2388840

For people who couldn't still understand the issue or find out where's the mistake, check for any links like

<link
        href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
        rel="stylesheet"
      />

Please make sure your weights are in ascending order or else it will throw 400 error from google and still show the same error from PostCSS

user_65220110

Following code solved my problem.

Pre:

                    <link
                        href="https://fonts.googleapis.com/css2?family=Monserat:wght@300;400;500;900&display=swap"
                        rel="stylesheet"
                    />

Post:

                    <link
                        href={`https://fonts.googleapis.com/css2?family=Monserat:wght@300;400;500;900&display=swap`}
                        rel="stylesheet"
                    />
user_36985770

Try this in your Next.js app:

<Head>
    <link
        href="https://fonts.googleapis.com/css2?family=Petrona"
        rel="stylesheet"
    />
</Head>

Note that the only difference between your code and mine is: css2

user_1103490
Related